Repository: skovy/llm-markdown Branch: main Commit: 5f404dfd20f4 Files: 25 Total size: 40.8 KB Directory structure: gitextract_7slcflxo/ ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── next.config.js ├── package.json ├── postcss.config.js ├── src/ │ ├── app/ │ │ ├── api/ │ │ │ └── chat/ │ │ │ └── route.ts │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── markdown/ │ │ │ └── page.tsx │ │ └── page.tsx │ ├── components/ │ │ ├── assistant-message.tsx │ │ ├── dialog.tsx │ │ ├── empty-message.tsx │ │ ├── message-list.tsx │ │ ├── message.tsx │ │ ├── model-dialog.tsx │ │ ├── nav.tsx │ │ ├── token-dialog.tsx │ │ └── user-message.tsx │ └── hooks/ │ ├── use-local-storage.ts │ └── use-markdown-processor.tsx ├── tailwind.config.js └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintrc.json ================================================ { "extends": "next/core-web-vitals" } ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env*.local # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2023 Spencer Miskoviak Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 📝 LLM Markdown A [Nextjs](https://nextjs.org) app demonstrating how to display rich-text responses from Large Language Models (LLMs) by prompting and rendering Markdown formatting, Mermaid diagrams, and LaTeX equations. Read more in this blog post: [Rendering rich responses from LLMs](https://www.skovy.dev/blog/vercel-ai-rendering-markdown) ## Examples This example is asking for the top grossing movies, structured as a Mermaid pie chart. ![LLM Markdown Demo](other/demo-movies.gif) This example is asking when vegetables should be planted, structured as a Mermaid Gantt chart. ![LLM Markdown Demo](other/demo-vegetables.gif) ## Technologies - [Nextjs](https://nextjs.org) - [Vercel AI](https://sdk.vercel.ai/docs) - [`remark`](https://remark.js.org) - [`mermaid`](https://mermaid.js.org) - [`latex.js`](https://latex.js.org) - And more... ## Setup - Clone the project - `npm install` - `npm run dev` - Open in your browser - Set your OpenAI API Key ================================================ FILE: next.config.js ================================================ /** @type {import('next').NextConfig} */ const nextConfig = {} module.exports = nextConfig ================================================ FILE: package.json ================================================ { "name": "nextjs-ai-markdown", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@capsizecss/metrics": "^1.2.0", "@phosphor-icons/react": "^2.0.10", "@radix-ui/react-dialog": "^1.0.4", "@themosaad/tailwindcss-capsize": "^1.0.0", "@types/node": "20.3.3", "@types/react": "18.2.14", "@types/react-dom": "18.2.6", "@vercel/analytics": "^1.0.1", "ai": "2.1.12", "autoprefixer": "10.4.14", "classnames": "^2.3.2", "eslint": "8.44.0", "eslint-config-next": "13.4.7", "latex.js": "^0.12.6", "mermaid": "^10.2.4", "next": "13.4.7", "openai-edge": "^1.1.1", "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", "react-keyed-flatten-children": "^2.2.1", "rehype-highlight": "^6.0.0", "rehype-react": "^7.2.0", "remark-gfm": "^3.0.1", "remark-parse": "^10.0.2", "remark-rehype": "^10.1.0", "tailwindcss": "3.3.2", "typescript": "5.1.6", "unified": "^10.1.2" }, "devDependencies": { "prettier-plugin-organize-imports": "^3.2.2" } } ================================================ FILE: postcss.config.js ================================================ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ================================================ FILE: src/app/api/chat/route.ts ================================================ import { OpenAIStream, StreamingTextResponse } from "ai"; import { NextResponse } from "next/server"; import { ChatCompletionRequestMessageRoleEnum, Configuration, OpenAIApi, } from "openai-edge"; export const runtime = "edge"; const SYSTEM_PROMPT = `You are a general answering assistant that can comply with any request. You always answer the with markdown formatting. You will be penalized if you do not answer with markdown when it would be possible. The markdown formatting you support: headings, bold, italic, links, tables, lists, code blocks, and blockquotes. You do not support images and never include images. You will be penalized if you render images. You also support Mermaid diagrams. You will be penalized if you do not render Mermaid diagrams when it would be possible. The Mermaid diagrams you support: sequenceDiagram, flowChart, classDiagram, stateDiagram, erDiagram, gantt, journey, gitGraph, pie. You also support LaTeX equation syntax only in markdown code blocks with the "latex" language. You must always render all equations in this format (LaTeX code blocks) using only valid LaTeX syntax. For example: \`\`\`latex \\[ F = \\frac{{G \\cdot m_1 \\cdot m_2}}{{r^2}} \\] \`\`\`latex `; export async function POST(req: Request) { const { messages, token, model = "gpt-3.5-turbo" } = await req.json(); const configuration = new Configuration({ apiKey: token }); const openai = new OpenAIApi(configuration); try { const response = await openai.createChatCompletion({ model, stream: true, messages: [ { role: ChatCompletionRequestMessageRoleEnum.System, content: SYSTEM_PROMPT, }, ...messages, ], }); if (response.status >= 300) { const body = await response.json(); return NextResponse.json( { error: `OpenAI error encountered: ${body?.error?.message}.` }, { status: response.status } ); } const stream = OpenAIStream(response); return new StreamingTextResponse(stream); } catch (e) { console.error(e); return NextResponse.json( { error: "An unexpected error occurred. Please try again later." }, { status: 500 } ); } } ================================================ FILE: src/app/globals.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; ================================================ FILE: src/app/layout.tsx ================================================ import { Analytics } from "@vercel/analytics/react"; import classNames from "classnames"; import { Inter, JetBrains_Mono } from "next/font/google"; import "./globals.css"; const sans = Inter({ subsets: ["latin"], variable: "--font-sans", }); const monospace = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono", }); export const metadata = { title: "LLM Markdown", description: "App demo for rendering rich-text (markdown) from a Large Language Model.", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ================================================ FILE: src/app/markdown/page.tsx ================================================ "use client"; import { Nav } from "@/components/nav"; import { MARKDOWN_TEST_MESSAGE, useMarkdownProcessor, } from "@/hooks/use-markdown-processor"; export default function Chat() { const content = useMarkdownProcessor(MARKDOWN_TEST_MESSAGE); return (
); } ================================================ FILE: src/app/page.tsx ================================================ "use client"; import { EmptyMessage } from "@/components/empty-message"; import { MessageList } from "@/components/message-list"; import { ModelDialog, SUPPORTED_MODELS, SupportedModels, } from "@/components/model-dialog"; import { Nav } from "@/components/nav"; import { TokenDialog } from "@/components/token-dialog"; import { useLocalStorage } from "@/hooks/use-local-storage"; import { ANCHOR_CLASS_NAME } from "@/hooks/use-markdown-processor"; import PaperPlaneRight from "@phosphor-icons/react/dist/icons/PaperPlaneRight"; import { useChat } from "ai/react"; import { useState } from "react"; const parseError = (error: Error) => { try { return JSON.parse(error.message).error; } catch (e) { console.error(e); return error.message; } }; export default function Chat() { const [tokenOpen, setTokenOpen] = useState(false); const [modelOpen, setModelOpen] = useState(false); const [token, setToken] = useLocalStorage("ai-token", null); const [model, setModel] = useLocalStorage( "ai-model", SUPPORTED_MODELS[0] ); const { messages, input, handleInputChange, handleSubmit, error } = useChat({ body: { token, model }, }); return ( <>
); } ================================================ FILE: src/components/assistant-message.tsx ================================================ import { useMarkdownProcessor } from "@/hooks/use-markdown-processor"; interface Props { children: string; } export const AssistantMessage = ({ children }: Props) => { const content = useMarkdownProcessor(children); return (

  • AI:

    {content}
    • ); }; ================================================ FILE: src/components/dialog.tsx ================================================ import X from "@phosphor-icons/react/dist/icons/X"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { ReactNode } from "react"; interface Props { open: boolean; setOpen(open: boolean): void; title: string; description?: ReactNode; children: ReactNode; size?: "xl" | "3xl"; } export const Dialog = ({ open, setOpen, title, description, children, size = "xl", }: Props) => { return ( {title} {description ? ( {description} ) : null} {children} ); }; ================================================ FILE: src/components/empty-message.tsx ================================================ import { ANCHOR_CLASS_NAME } from "@/hooks/use-markdown-processor"; import Link from "next/link"; export const EmptyMessage = () => { return (

    Welcome to LLM Markdown!

    This app is a demo for supporting rich-text responses from a{" "} Large Language Model {" "} (LLM). Once you provide your OpenAI API Key, you can start prompting and receiving rich-text responses.

    Try something like:{" "} "Top 10 grossing movies of all time as a pie chart"

    How it works

    A system prompt is used to encourage the LLM to generate a response with Markdown and Mermaid formatting.

    The response is rendered using{" "} unified ,{" "} Mermaid , and{" "} LaTeX.js {" "} with{" "} Nextjs .

    For an example of the supported formatting, see{" "} supported markdown .

    All the source code is available on{" "} GitHub .

    ); }; ================================================ FILE: src/components/message-list.tsx ================================================ import Message from "./message"; import { Message as MessageType } from "ai/react"; interface Props { messages: MessageType[]; } export const MessageList = ({ messages }: Props) => { return (
      {messages.map((m) => ( ))}
    ); }; ================================================ FILE: src/components/message.tsx ================================================ import { Message } from "ai/react"; import { UserMessage } from "./user-message"; import { AssistantMessage } from "./assistant-message"; interface Props { message: Message; } export default function Message({ message }: Props) { switch (message.role) { case "user": return {message.content}; case "assistant": return {message.content}; default: throw new Error(`Unknown message role: ${message.role}`); } } ================================================ FILE: src/components/model-dialog.tsx ================================================ import { Dialog } from "./dialog"; export const SUPPORTED_MODELS = [ "gpt-3.5-turbo", "gpt-3.5-turbo-16k", "gpt-4", ] as const; export type SupportedModels = (typeof SUPPORTED_MODELS)[number]; interface Props { open: boolean; setOpen(open: boolean): void; model: SupportedModels; setModel(mode: SupportedModels): void; } export const ModelDialog = ({ open, setOpen, model, setModel }: Props) => { return ( Choose the OpenAI model to use. Note, you must have access to the model you select. If you are not sure, select{" "} gpt-3.5-turbo. } >
    ); }; ================================================ FILE: src/components/nav.tsx ================================================ import { GithubLogo } from "@phosphor-icons/react"; import MarkerCircle from "@phosphor-icons/react/dist/icons/MarkerCircle"; import Link from "next/link"; export const Nav = () => { return ( ); }; ================================================ FILE: src/components/token-dialog.tsx ================================================ import { ANCHOR_CLASS_NAME } from "@/hooks/use-markdown-processor"; import { useState } from "react"; import { Dialog } from "./dialog"; interface Props { open: boolean; setOpen(open: boolean): void; setToken(key: string): void; } export const TokenDialog = ({ open, setOpen, setToken }: Props) => { const [tokenInput, setTokenInput] = useState(""); return ( Since this is a demo app, you will need to provide your own OpenAI API Key. This will be saved in your browser's local storage under the name{" "} ai-token . This will only be sent when you ask a question, and never persisted outside of your browser. If you have not obtained your OpenAI API key, you can do so by{" "} signing up {" "} on the OpenAI website. } >
    setTokenInput(e.target.value)} className="w-full border-2 border-slate-200 rounded-lg p-2 font-sans text-base outline-none ring-offset-0 focus:border-slate-400 focus-visible:ring-2 focus-visible:ring-offset-2 ring-emerald-600 transition-[box-shadow,border-color] pr-10" />
    ); }; ================================================ FILE: src/components/user-message.tsx ================================================ interface Props { children: string; } export const UserMessage = ({ children }: Props) => { return (

  • You:

    {children}

    • ); }; ================================================ FILE: src/hooks/use-local-storage.ts ================================================ import { useEffect, useState } from "react"; export const useLocalStorage = ( key: string, initialValue: T ): [T, (value: T) => void] => { const [storedValue, setStoredValue] = useState(initialValue); useEffect(() => { // Retrieve from localStorage const item = window.localStorage.getItem(key); if (item) { setStoredValue(JSON.parse(item)); } }, [key]); const setValue = (value: T) => { // Save state setStoredValue(value); // Save to localStorage window.localStorage.setItem(key, JSON.stringify(value)); }; return [storedValue, setValue]; }; ================================================ FILE: src/hooks/use-markdown-processor.tsx ================================================ import { Dialog } from "@/components/dialog"; import { CircleNotch, MathOperations } from "@phosphor-icons/react"; import CheckFat from "@phosphor-icons/react/dist/icons/CheckFat"; import Copy from "@phosphor-icons/react/dist/icons/Copy"; import FlowArrow from "@phosphor-icons/react/dist/icons/FlowArrow"; import { Root } from "hast"; import "highlight.js/styles/base16/green-screen.css"; import mermaid from "mermaid"; import Link from "next/link"; import { Children, Fragment, createElement, isValidElement, useEffect, useMemo, useState, useRef, } from "react"; import flattenChildren from "react-keyed-flatten-children"; import rehypeHighlight from "rehype-highlight"; import rehypeReact from "rehype-react"; import remarkGfm from "remark-gfm"; import remarkParse from "remark-parse"; import remarkRehype from "remark-rehype"; import { Plugin, unified } from "unified"; import { visit } from "unist-util-visit"; // @ts-expect-error import { HtmlGenerator, parse } from "latex.js"; // import "node_modules/latex.js/dist/css/base.css" import "node_modules/latex.js/dist/css/katex.css"; export const ANCHOR_CLASS_NAME = "font-semibold underline text-emerald-700 underline-offset-[2px] decoration-1 hover:text-emerald-800 transition-colors"; // Mixing arbitrary Markdown + Capsize leads to lots of challenges // with paragraphs and list items. This replaces paragraphs inside // list items into divs to avoid nesting Capsize. const rehypeListItemParagraphToDiv: Plugin<[], Root> = () => { return (tree) => { visit(tree, "element", (element) => { if (element.tagName === "li") { element.children = element.children.map((child) => { if (child.type === "element" && child.tagName === "p") { child.tagName = "div"; } return child; }); } }); return tree; }; }; export const useMarkdownProcessor = (content: string) => { useEffect(() => { mermaid.initialize({ startOnLoad: false, theme: "forest" }); }, []); return useMemo(() => { return unified() .use(remarkParse) .use(remarkGfm) .use(remarkRehype) .use(rehypeHighlight, { ignoreMissing: true }) .use(rehypeListItemParagraphToDiv) .use(rehypeReact, { createElement, Fragment, components: { a: ({ href, children }: JSX.IntrinsicElements["a"]) => ( {children} ), h1: ({ children, id }: JSX.IntrinsicElements["h1"]) => (

    {children}

    ), h2: ({ children, id }: JSX.IntrinsicElements["h2"]) => (

    {children}

    ), h3: ({ children, id }: JSX.IntrinsicElements["h3"]) => (

    {children}

    ), h4: ({ children, id }: JSX.IntrinsicElements["h4"]) => (

    {children}

    ), h5: ({ children, id }: JSX.IntrinsicElements["h5"]) => (
    {children}
    ), h6: ({ children, id }: JSX.IntrinsicElements["h6"]) => (
    {children}
    ), p: (props: JSX.IntrinsicElements["p"]) => { return (

    {props.children}

    ); }, strong: ({ children }: JSX.IntrinsicElements["strong"]) => ( {children} ), em: ({ children }: JSX.IntrinsicElements["em"]) => ( {children} ), code: CodeBlock, pre: ({ children }: JSX.IntrinsicElements["pre"]) => { return ( 
                      {children}
    ); }, ul: ({ children }: JSX.IntrinsicElements["ul"]) => (
      {Children.map( flattenChildren(children).filter(isValidElement), (child, index) => (
    • {child}
      • ) )}
    ), ol: ({ children }: JSX.IntrinsicElements["ol"]) => (
      {Children.map( flattenChildren(children).filter(isValidElement), (child, index) => (
    1. {index + 1}.
      {child}
      2. ) )}
    ), li: ({ children }: JSX.IntrinsicElements["li"]) => (
    {children}
    ), table: ({ children }: JSX.IntrinsicElements["table"]) => (
    {children}
    ), thead: ({ children }: JSX.IntrinsicElements["thead"]) => ( {children} ), th: ({ children }: JSX.IntrinsicElements["th"]) => ( {children} ), td: ({ children }: JSX.IntrinsicElements["td"]) => ( {children} ), blockquote: ({ children }: JSX.IntrinsicElements["blockquote"]) => (
    {children}
    ), }, }) .processSync(content).result; }, [content]); }; const CodeBlock = ({ children, className }: JSX.IntrinsicElements["code"]) => { const [copied, setCopied] = useState(false); const [showMermaidPreview, setShowMermaidPreview] = useState(false); const [showLatexPreview, setShowLatexPreview] = useState(false); const ref = useRef(null); useEffect(() => { if (copied) { const interval = setTimeout(() => setCopied(false), 1000); return () => clearTimeout(interval); } }, [copied]); // Highlight.js adds a `className` so this is a hack to detect if the code block // is a language block wrapped in a `pre` tag. if (className) { const isMermaid = className.includes("language-mermaid"); const isLatex = className.includes("language-latex"); return ( <> {children}
    {isMermaid ? ( <> ) : null} {isLatex ? ( <> ) : null}
    ); } return ( {children} ); }; const Latex = ({ content }: { content: string }) => { const [diagram, setDiagram] = useState(true); useEffect(() => { try { const generator = new HtmlGenerator({ hyphenate: false }); const fragment = parse(content, { generator: generator }).domFragment(); setDiagram(fragment.firstElementChild.outerHTML); } catch (error) { console.error(error); setDiagram(false); } }, [content]); if (diagram === true) { return (

    Rendering diagram...

    ); } else if (diagram === false) { return (

    Unable to render this diagram.

    ); } else { return
    ; } }; const Mermaid = ({ content }: { content: string }) => { const [diagram, setDiagram] = useState(true); useEffect(() => { const render = async () => { // Generate a random ID for mermaid to use. const id = `mermaid-svg-${Math.round(Math.random() * 10000000)}`; // Confirm the diagram is valid before rendering. if (await mermaid.parse(content, { suppressErrors: true })) { const { svg } = await mermaid.render(id, content); setDiagram(svg); } else { setDiagram(false); } }; render(); }, [content]); if (diagram === true) { return (

    Rendering diagram...

    ); } else if (diagram === false) { return (

    Unable to render this diagram. Try copying it into the{" "} Mermaid Live Editor .

    ); } else { return
    ; } }; export const MARKDOWN_TEST_MESSAGE = ` # Heading level 1 This is the first paragraph. This is the second paragraph. This is the third paragraph. ## Heading level 2 This is an [anchor](https://github.com). ### Heading level 3 This is **bold** and _italics_. #### Heading level 4 This is \`inline\` code. This is a code block: \`\`\`tsx const Message = () => { return
    hi
    ; }; \`\`\` ##### Heading level 5 This is an unordered list: - One - Two - Three, and **bold** This is an ordered list: 1. One 1. Two 1. Three This is a complex list: 1. **Bold**: One - One - Two - Three 2. **Bold**: Three - One - Two - Three 3. **Bold**: Four - One - Two - Three ###### Heading level 6 > This is a blockquote. This is a table: | Vegetable | Description | |-----------|-------------| | Carrot | A crunchy, orange root vegetable that is rich in vitamins and minerals. It is commonly used in soups, salads, and as a snack. | | Broccoli | A green vegetable with tightly packed florets that is high in fiber, vitamins, and antioxidants. It can be steamed, boiled, stir-fried, or roasted. | | Spinach | A leafy green vegetable that is dense in nutrients like iron, calcium, and vitamins. It can be eaten raw in salads or cooked in various dishes. | | Bell Pepper | A colorful, sweet vegetable available in different colors such as red, yellow, and green. It is often used in stir-fries, salads, or stuffed recipes. | | Tomato | A juicy fruit often used as a vegetable in culinary preparations. It comes in various shapes, sizes, and colors and is used in salads, sauces, and sandwiches. | | Cucumber | A cool and refreshing vegetable with a high water content. It is commonly used in salads, sandwiches, or as a crunchy snack. | | Zucchini | A summer squash with a mild flavor and tender texture. It can be sautéed, grilled, roasted, or used in baking recipes. | | Cauliflower | A versatile vegetable that can be roasted, steamed, mashed, or used to make gluten-free alternatives like cauliflower rice or pizza crust. | | Green Beans | Long, slender pods that are low in calories and rich in vitamins. They can be steamed, stir-fried, or used in casseroles and salads. | | Potato | A starchy vegetable available in various varieties. It can be boiled, baked, mashed, or used in soups, fries, and many other dishes. | This is a mermaid diagram: \`\`\`mermaid gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit \`\`\` \`\`\`latex \\[F(x) = \\int_{a}^{b} f(x) \\, dx\\] \`\`\` `; ================================================ FILE: tailwind.config.js ================================================ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/hooks/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { fontFamily: { sans: ["var(--font-sans)", "sans-serif"], mono: ["var(--font-mono)", "monospace"], }, capsize: { fontMetrics: { sans: require("@capsizecss/metrics/inter"), monospace: require("@capsizecss/metrics/jetBrainsMono"), }, }, }, plugins: [require("@themosaad/tailwindcss-capsize")], }; ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }