fix(chat): scaffold a Markdown renderer so chat renders answers

cli/templates/files/ai-agent/app/markdown-renderer.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { MarkdownRendererProps } from "veryfront/markdown";
+
+/**
+ * Rich Markdown for assistant answers.
+ *
+ * `veryfront/markdown` presents plain source until a renderer is installed, so
+ * this component supplies one. Swap in any renderer that accepts
+ * `MarkdownRendererProps` to change how answers are parsed and rendered.
+ */
+export function MarkdownRenderer({ source }: MarkdownRendererProps): React.JSX.Element {
+  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>;
+}

cli/templates/files/ai-agent/app/page.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { Chat } from "veryfront/chat";
+import { MarkdownRendererProvider } from "veryfront/markdown";
+import { MarkdownRenderer } from "./markdown-renderer.tsx";
 
 export default function ChatPage(): React.JSX.Element {
-  return <Chat agentId="assistant" className="h-screen" />;
+  return (
+    <MarkdownRendererProvider renderer={MarkdownRenderer}>
+      <Chat agentId="assistant" className="h-screen" />
+    </MarkdownRendererProvider>
+  );
 }

cli/templates/files/coding-agent/app/markdown-renderer.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { MarkdownRendererProps } from 'veryfront/markdown'
+
+/**
+ * Rich Markdown for assistant answers.
+ *
+ * `veryfront/markdown` presents plain source until a renderer is installed, so
+ * this component supplies one. Swap in any renderer that accepts
+ * `MarkdownRendererProps` to change how answers are parsed and rendered.
+ */
+export function MarkdownRenderer({ source }: MarkdownRendererProps): React.JSX.Element {
+  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
+}

cli/templates/files/coding-agent/app/page.tsx

@@ -1,14 +1,18 @@
 'use client'
 
 import { Chat } from 'veryfront/chat'
+import { MarkdownRendererProvider } from 'veryfront/markdown'
+import { MarkdownRenderer } from './markdown-renderer.tsx'
 
 export default function CodeAgent(): React.JSX.Element {
   return (
-    <Chat
-      agentId="coder"
-      api="/api/ag-ui"
-      className="flex-1 min-h-0"
-      placeholder="Describe what you want to build or fix..."
-    />
+    <MarkdownRendererProvider renderer={MarkdownRenderer}>
+      <Chat
+        agentId="coder"
+        api="/api/ag-ui"
+        className="flex-1 min-h-0"
+        placeholder="Describe what you want to build or fix..."
+      />
+    </MarkdownRendererProvider>
   )
 }

cli/templates/files/docs-agent/app/markdown-renderer.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { MarkdownRendererProps } from 'veryfront/markdown'
+
+/**
+ * Rich Markdown for assistant answers.
+ *
+ * `veryfront/markdown` presents plain source until a renderer is installed, so
+ * this component supplies one. Swap in any renderer that accepts
+ * `MarkdownRendererProps` to change how answers are parsed and rendered.
+ */
+export function MarkdownRenderer({ source }: MarkdownRendererProps): React.JSX.Element {
+  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
+}

cli/templates/files/docs-agent/app/page.tsx

@@ -1,14 +1,18 @@
 'use client'
 
 import { Chat } from 'veryfront/chat'
+import { MarkdownRendererProvider } from 'veryfront/markdown'
+import { MarkdownRenderer } from './markdown-renderer.tsx'
 
-export default function DocsChat() {
+export default function DocsChat(): React.JSX.Element {
   return (
-    <Chat
-      agentId="rag"
-      api="/api/ag-ui"
-      className="flex-1 min-h-0"
-      placeholder="Ask anything about your documents..."
-    />
+    <MarkdownRendererProvider renderer={MarkdownRenderer}>
+      <Chat
+        agentId="rag"
+        api="/api/ag-ui"
+        className="flex-1 min-h-0"
+        placeholder="Ask anything about your documents..."
+      />
+    </MarkdownRendererProvider>
   )
 }

cli/templates/files/multi-agent-system/app/markdown-renderer.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { MarkdownRendererProps } from 'veryfront/markdown'
+
+/**
+ * Rich Markdown for assistant answers.
+ *
+ * `veryfront/markdown` presents plain source until a renderer is installed, so
+ * this component supplies one. Swap in any renderer that accepts
+ * `MarkdownRendererProps` to change how answers are parsed and rendered.
+ */
+export function MarkdownRenderer({ source }: MarkdownRendererProps): React.JSX.Element {
+  return <ReactMarkdown remarkPlugins={[remarkGfm]}>{source}</ReactMarkdown>
+}

cli/templates/files/multi-agent-system/app/page.tsx

@@ -1,14 +1,18 @@
 'use client'
 
 import { Chat } from 'veryfront/chat'
+import { MarkdownRendererProvider } from 'veryfront/markdown'
+import { MarkdownRenderer } from './markdown-renderer.tsx'
 
 export default function MultiAgentChat(): React.JSX.Element {
   return (
-    <Chat
-      agentId="orchestrator"
-      api="/api/ag-ui"
-      className="flex-1 min-h-0"
-      placeholder="Give the team a task..."
-    />
+    <MarkdownRendererProvider renderer={MarkdownRenderer}>
+      <Chat
+        agentId="orchestrator"
+        api="/api/ag-ui"
+        className="flex-1 min-h-0"
+        placeholder="Give the team a task..."
+      />
+    </MarkdownRendererProvider>
   )
 }

cli/templates/index.ts

@@ -44,10 +44,34 @@ export {
   validateFeatures,
 } from "./feature-loader.ts";
 
+/**
+ * Markdown renderer dependencies for the chat starters.
+ *
+ * `veryfront/markdown` presents plain source until a renderer is installed, so
+ * every starter that renders `<Chat>` scaffolds one in `app/markdown-renderer.tsx`
+ * and installs the parser it uses. Versions are exact: these reach the browser
+ * through the module pipeline, where a floating range would resolve to whatever
+ * is latest at request time.
+ */
+const CHAT_MARKDOWN_DEPENDENCIES: Record<string, string> = {
+  "react-markdown": "9.0.3",
+  "remark-gfm": "4.0.1",
+};
+
 export const templateConfigs: Partial<Record<TemplateName, TemplateConfig>> = {
+  "ai-agent": {
+    npmDependencies: { ...CHAT_MARKDOWN_DEPENDENCIES },
+  },
+  "coding-agent": {
+    npmDependencies: { ...CHAT_MARKDOWN_DEPENDENCIES },
+  },
+  "multi-agent-system": {
+    npmDependencies: { ...CHAT_MARKDOWN_DEPENDENCIES },
+  },
   "docs-agent": {
     firstPartyExtensions: ["@veryfront/ext-document-kreuzberg"],
     npmDependencies: {
+      ...CHAT_MARKDOWN_DEPENDENCIES,
       "@kreuzberg/node": "^4.4.2",
       "@kreuzberg/wasm": "4.5.2",
     },