@assistant-ui/mcp-docs-server 0.2.2 → 0.3.0

package/.docs/organized/code-examples/with-chain-of-thought.md

@@ -1,960 +0,0 @@
-# Example: with-chain-of-thought
-
-## app/api/chat/route.ts
-
-```typescript
-import { createOpenAI } from "@ai-sdk/openai";
-import {
-  streamText,
-  convertToModelMessages,
-  tool,
-  stepCountIs,
-  zodSchema,
-  createUIMessageStream,
-  JsonToSseTransformStream,
-} from "ai";
-import type { UIMessage, UIMessageStreamWriter } from "ai";
-import { AISDKToolkit } from "@assistant-ui/react-ai-sdk";
-import { z } from "zod";
-import toolkit from "../../toolkit";
-
-export const maxDuration = 30;
-
-const aiToolkit = new AISDKToolkit({ toolkit });
-
-type SearchResult = { id: string; url: string; title: string };
-
-const searchSources = (query: string): SearchResult[] => {
-  const q = query.toLowerCase();
-  if (q.includes("fibonacci")) {
-    return [
-      {
-        id: "src-fib-1",
-        url: "https://en.wikipedia.org/wiki/Fibonacci_number",
-        title: "Fibonacci number (Wikipedia)",
-      },
-      {
-        id: "src-fib-2",
-        url: "https://oeis.org/A000045",
-        title: "OEIS A000045: Fibonacci numbers",
-      },
-    ];
-  }
-  if (
-    q.includes("renewable") ||
-    q.includes("energy") ||
-    q.includes("climate")
-  ) {
-    return [
-      {
-        id: "src-iea",
-        url: "https://www.iea.org/reports/renewables-2024",
-        title: "IEA Renewables 2024",
-      },
-      {
-        id: "src-irena",
-        url: "https://www.irena.org/Publications",
-        title: "IRENA Publications",
-      },
-    ];
-  }
-  return [
-    {
-      id: "src-wiki",
-      url: `https://en.wikipedia.org/wiki/Special:Search?search=${encodeURIComponent(query)}`,
-      title: "Wikipedia search results",
-    },
-    {
-      id: "src-web",
-      url: `https://duckduckgo.com/?q=${encodeURIComponent(query)}`,
-      title: `Web results for: ${query}`,
-    },
-  ];
-};
-
-export async function POST(req: Request) {
-  const {
-    messages,
-    tools,
-  }: { messages: UIMessage[]; tools: Record<string, any> } = await req.json();
-
-  const uiStream = createUIMessageStream({
-    execute: async ({ writer }) => {
-      if (!process.env.OPENAI_API_KEY) {
-        await streamFallback(writer, messages);
-        return;
-      }
-      await streamModel(writer, messages, tools);
-    },
-  });
-
-  return new Response(
-    uiStream
-      .pipeThrough(new JsonToSseTransformStream())
-      .pipeThrough(new TextEncoderStream()),
-    {
-      headers: {
-        "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
-        Connection: "keep-alive",
-      },
-    },
-  );
-}
-
-async function streamModel(
-  writer: UIMessageStreamWriter,
-  messages: UIMessage[],
-  frontendToolDefs: Record<string, any>,
-) {
-  const toolNameByCall = new Map<string, string>();
-  const openai = createOpenAI({
-    apiKey: process.env.OPENAI_API_KEY!,
-    ...(process.env.OPENAI_BASE_URL && {
-      baseURL: process.env.OPENAI_BASE_URL,
-    }),
-  });
-
-  const toolkitTools = await aiToolkit.tools({ frontend: frontendToolDefs });
-
-  const result = streamText({
-    // Reasoning model so the chain-of-thought group has real content.
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-    stopWhen: stepCountIs(10),
-    tools: {
-      ...toolkitTools,
-      get_current_weather: tool({
-        description: "Get the current weather for a city",
-        inputSchema: zodSchema(z.object({ city: z.string() })),
-        execute: async ({ city }) => `The weather in ${city} is sunny, 72°F`,
-      }),
-      search_web: tool({
-        description:
-          "Search the web for citations on a topic. Returns a list of source URLs and titles the assistant should consult.",
-        inputSchema: zodSchema(z.object({ query: z.string() })),
-        execute: async ({ query }) => ({ sources: searchSources(query) }),
-      }),
-    },
-    providerOptions: {
-      openai: {
-        reasoningEffort: "high",
-        reasoningSummary: "auto",
-      },
-    },
-  });
-
-  // Forward model chunks, then synthesize `source-url` parts from each
-  // `search_web` tool output so the UI renders them as `source` parts. OpenAI
-  // does not natively emit `source-url` chunks without web search, so the route
-  // produces them deterministically from the tool result.
-  for await (const chunk of result.toUIMessageStream({ sendReasoning: true })) {
-    writer.write(chunk);
-
-    if (chunk.type === "tool-input-available") {
-      toolNameByCall.set(chunk.toolCallId, chunk.toolName);
-    }
-    if (
-      chunk.type === "tool-output-available" &&
-      toolNameByCall.get(chunk.toolCallId) === "search_web"
-    ) {
-      const output = chunk.output as { sources?: SearchResult[] };
-      for (const source of output.sources ?? []) {
-        writer.write({
-          type: "source-url",
-          sourceId: `${source.id}-${crypto.randomUUID()}`,
-          url: source.url,
-          title: source.title,
-        });
-      }
-    }
-  }
-}
-
-async function streamFallback(
-  writer: UIMessageStreamWriter,
-  messages: UIMessage[],
-) {
-  const lastUserText =
-    messages
-      .filter((m) => m.role === "user")
-      .at(-1)
-      ?.parts.flatMap((p) => (p.type === "text" ? [p.text] : []))
-      .join(" ") ?? "your question";
-
-  const messageId = `msg-${crypto.randomUUID()}`;
-  const reasoningId = `r-${crypto.randomUUID()}`;
-  const textId = `t-${crypto.randomUUID()}`;
-  const toolCallId = `call-${crypto.randomUUID()}`;
-  const sources = searchSources(lastUserText);
-
-  writer.write({ type: "start", messageId });
-  writer.write({ type: "start-step" });
-
-  writer.write({ type: "reasoning-start", id: reasoningId });
-  const reasoning =
-    "OPENAI_API_KEY is not set, so this response is generated deterministically by the route. " +
-    "A real run emits the same chunk shapes from the model: a reasoning step, " +
-    "a search_web tool call, source-url parts derived from the tool output, " +
-    "and a final answer that summarises the sources.";
-  for (const word of reasoning.match(/\S+\s*|\s+/g) ?? [reasoning]) {
-    writer.write({ type: "reasoning-delta", id: reasoningId, delta: word });
-    await sleep(15);
-  }
-  writer.write({ type: "reasoning-end", id: reasoningId });
-
-  writer.write({
-    type: "tool-input-available",
-    toolCallId,
-    toolName: "search_web",
-    input: { query: lastUserText },
-  });
-  await sleep(150);
-  writer.write({
-    type: "tool-output-available",
-    toolCallId,
-    output: { sources },
-  });
-
-  for (const source of sources) {
-    writer.write({
-      type: "source-url",
-      sourceId: `${source.id}-${crypto.randomUUID()}`,
-      url: source.url,
-      title: source.title,
-    });
-  }
-
-  writer.write({ type: "text-start", id: textId });
-  const answer =
-    `\n\nMock answer for: "${lastUserText}". ` +
-    "The badges above are structured `source` message parts emitted as " +
-    "`source-url` chunks, not URLs scraped from text. Set `OPENAI_API_KEY` " +
-    "to switch to a real model run.";
-  for (const word of answer.match(/\S+\s*|\s+/g) ?? [answer]) {
-    writer.write({ type: "text-delta", id: textId, delta: word });
-    await sleep(15);
-  }
-  writer.write({ type: "text-end", id: textId });
-
-  writer.write({ type: "finish-step" });
-  writer.write({ type: "finish" });
-}
-
-const sleep = (ms: number) =>
-  new Promise<void>((resolve) => setTimeout(resolve, ms));
-
-```
-
-## app/globals.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../../packages/ui/src";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-```
-
-## app/layout.tsx
-
-```tsx
-import type { Metadata } from "next";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "Chain of Thought Example",
-  description:
-    "Reasoning, tool calls, and source citations rendered as grouped message parts.",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className="h-dvh">{children}</body>
-    </html>
-  );
-}
-
-```
-
-## app/MyThread.tsx
-
-```tsx
-"use client";
-
-import { type FC, type PropsWithChildren } from "react";
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { Sources } from "@/components/assistant-ui/sources";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { Button } from "@/components/ui/button";
-import {
-  Reasoning,
-  ReasoningContent,
-  ReasoningRoot,
-  ReasoningText,
-  ReasoningTrigger,
-} from "@/components/assistant-ui/reasoning";
-import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
-import {
-  ToolGroupContent,
-  ToolGroupRoot,
-  ToolGroupTrigger,
-} from "@/components/assistant-ui/tool-group";
-import {
-  ComposerPrimitive,
-  groupPartByType,
-  MessagePrimitive,
-  SuggestionPrimitive,
-  ThreadPrimitive,
-  useAuiState,
-} from "@assistant-ui/react";
-import { ArrowDownIcon, ArrowUpIcon, SquareIcon } from "lucide-react";
-
-export const MyThread: FC = () => {
-  return (
-    <ThreadPrimitive.Root
-      className="bg-background flex h-full flex-col"
-      style={{ ["--thread-max-width" as string]: "44rem" }}
-    >
-      <ThreadPrimitive.Viewport className="flex flex-1 flex-col overflow-y-scroll scroll-smooth px-4 pt-8">
-        <ThreadPrimitive.Empty>
-          <ThreadWelcome />
-        </ThreadPrimitive.Empty>
-
-        <ThreadPrimitive.Messages>
-          {({ message }) => {
-            if (message.role === "user") return <UserMessage />;
-            return <AssistantMessage />;
-          }}
-        </ThreadPrimitive.Messages>
-
-        <ThreadPrimitive.ViewportFooter className="sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 pb-4">
-          <ThreadPrimitive.ScrollToBottom asChild>
-            <TooltipIconButton
-              tooltip="Scroll to bottom"
-              variant="outline"
-              className="absolute -top-12 self-center rounded-full p-4 disabled:invisible"
-            >
-              <ArrowDownIcon />
-            </TooltipIconButton>
-          </ThreadPrimitive.ScrollToBottom>
-          <Composer />
-        </ThreadPrimitive.ViewportFooter>
-      </ThreadPrimitive.Viewport>
-    </ThreadPrimitive.Root>
-  );
-};
-
-const Text: FC<{ text: string }> = ({ text }) => {
-  return <p>{text}</p>;
-};
-
-const ThreadWelcome: FC = () => {
-  return (
-    <div className="mx-auto flex w-full max-w-(--thread-max-width) grow flex-col justify-center gap-6">
-      <div>
-        <h1 className="text-2xl font-semibold">
-          What should we think through?
-        </h1>
-      </div>
-      <div className="flex flex-wrap gap-2">
-        <ThreadPrimitive.Suggestions>
-          {() => <ThreadSuggestionItem />}
-        </ThreadPrimitive.Suggestions>
-      </div>
-    </div>
-  );
-};
-
-const ThreadSuggestionItem: FC = () => {
-  return (
-    <SuggestionPrimitive.Trigger send asChild>
-      <Button
-        type="button"
-        variant="ghost"
-        className="bg-background hover:bg-muted h-auto w-full flex-col items-start justify-start gap-1 rounded-2xl border px-4 py-3 text-start text-sm sm:w-[calc(50%-0.25rem)]"
-      >
-        <SuggestionPrimitive.Title className="font-medium" />
-        <SuggestionPrimitive.Description className="text-muted-foreground empty:hidden" />
-      </Button>
-    </SuggestionPrimitive.Trigger>
-  );
-};
-
-const UserMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="mx-auto w-full max-w-(--thread-max-width) py-3">
-      <div className="flex justify-end">
-        <div className="bg-primary text-primary-foreground max-w-[80%] rounded-2xl px-4 py-2">
-          <MessagePrimitive.Parts>
-            {({ part }) => {
-              if (part.type === "text") return <Text {...part} />;
-              return null;
-            }}
-          </MessagePrimitive.Parts>
-        </div>
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root className="mx-auto w-full max-w-(--thread-max-width) py-3">
-      <div className="flex flex-col gap-2 px-2 leading-relaxed">
-        <MessagePrimitive.GroupedParts
-          groupBy={groupPartByType({
-            reasoning: ["group-chainOfThought", "group-reasoning"],
-            "tool-call": ["group-chainOfThought", "group-tool"],
-            "standalone-tool-call": [],
-            source: ["group-sources"],
-          })}
-        >
-          {({ part, children }) => {
-            switch (part.type) {
-              case "group-chainOfThought":
-                return <div data-slot="aui_chain-of-thought">{children}</div>;
-              case "group-tool":
-                return (
-                  <ToolGroupRoot variant="ghost">
-                    <ToolGroupTrigger
-                      count={part.indices.length}
-                      active={part.status.type === "running"}
-                    />
-                    <ToolGroupContent>{children}</ToolGroupContent>
-                  </ToolGroupRoot>
-                );
-              case "group-reasoning": {
-                const running = part.status.type === "running";
-                return (
-                  <ReasoningRoot streaming={running}>
-                    <ReasoningTrigger active={running} />
-                    <ReasoningContent aria-busy={running}>
-                      <ReasoningText>{children}</ReasoningText>
-                    </ReasoningContent>
-                  </ReasoningRoot>
-                );
-              }
-              case "group-sources":
-                return <SourcesLayout>{children}</SourcesLayout>;
-              case "text":
-                return <MarkdownText />;
-              case "reasoning":
-                return <Reasoning {...part} />;
-              case "tool-call":
-                return part.toolUI ?? <ToolFallback {...part} />;
-              case "source":
-                return <Sources {...part} />;
-              default:
-                return null;
-            }
-          }}
-        </MessagePrimitive.GroupedParts>
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-const SourcesLayout: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <div className="flex flex-wrap items-center gap-1.5">
-      <span className="text-muted-foreground mr-1 text-xs">Sources</span>
-      {children}
-    </div>
-  );
-};
-
-const Composer: FC = () => {
-  const isRunning = useAuiState((s) => s.thread.isRunning);
-
-  return (
-    <ComposerPrimitive.Root className="border-input bg-background has-[textarea:focus-visible]:border-foreground/60 flex w-full flex-col rounded-2xl border px-1 pt-2 transition-colors outline-none">
-      <ComposerPrimitive.Input
-        placeholder="Send a message..."
-        className="placeholder:text-muted-foreground mb-1 max-h-32 min-h-14 w-full resize-none bg-transparent px-4 pt-2 pb-3 text-sm outline-none"
-        rows={1}
-        autoFocus
-      />
-      <div className="relative mx-2 mb-2 flex items-center justify-end">
-        {!isRunning ? (
-          <ComposerPrimitive.Send asChild>
-            <TooltipIconButton
-              tooltip="Send"
-              side="bottom"
-              variant="default"
-              size="icon"
-              className="size-8 rounded-full"
-            >
-              <ArrowUpIcon className="size-4" />
-            </TooltipIconButton>
-          </ComposerPrimitive.Send>
-        ) : (
-          <ComposerPrimitive.Cancel asChild>
-            <Button
-              type="button"
-              variant="default"
-              size="icon"
-              className="size-8 rounded-full"
-            >
-              <SquareIcon className="size-3 fill-current" />
-            </Button>
-          </ComposerPrimitive.Cancel>
-        )}
-      </div>
-    </ComposerPrimitive.Root>
-  );
-};
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import {
-  AssistantRuntimeProvider,
-  AuiConfig,
-  Tools,
-  useAui,
-  AuiProvider,
-  Suggestions,
-} from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-import { MyThread } from "./MyThread";
-import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
-import toolkit from "./toolkit";
-
-function MyThreadWithSuggestions() {
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Calculate Fibonacci(20)",
-        label: "with chain of thought",
-        prompt:
-          "Calculate the 20th Fibonacci number using JavaScript and show your reasoning.",
-      },
-      {
-        title: "Research with citations",
-        label: "show sources",
-        prompt:
-          "Research recent developments in renewable energy and cite your sources.",
-      },
-    ]),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <MyThread />
-    </AuiProvider>
-  );
-}
-
-export default function Home() {
-  const runtime = useChatRuntime({
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
-  });
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-  });
-
-  return (
-    <AssistantRuntimeProvider config={config} runtime={runtime}>
-      <div className="h-full">
-        <MyThreadWithSuggestions />
-      </div>
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/toolkit.tsx
-
-```tsx
-"use generative";
-
-import { defineToolkit } from "@assistant-ui/react";
-import { z } from "zod";
-
-type ExecuteJsResult =
-  | { success: true; result: string }
-  | { success: false; error: string };
-
-export default defineToolkit({
-  execute_js: {
-    description: "Execute JavaScript code and return the result",
-    parameters: z.object({
-      code: z.string().describe("The JavaScript code to execute"),
-    }),
-    execute: async ({ code }) => {
-      "use client";
-      try {
-        const result = eval(code);
-        return { success: true, result: String(result) };
-      } catch (e) {
-        return { success: false, error: String(e) };
-      }
-    },
-    render: ({ args, result, status }) => {
-      const output = result as ExecuteJsResult | undefined;
-      return (
-        <div className="bg-muted/30 my-2 rounded-lg border p-4 text-sm">
-          <p className="mb-1 font-semibold">execute_js</p>
-          <pre className="bg-background rounded p-2 font-mono text-xs whitespace-pre-wrap">
-            {args.code}
-          </pre>
-          {status.type !== "running" && output && (
-            <div className="mt-2 border-t pt-2">
-              <p className="text-muted-foreground font-semibold">
-                {output.success ? "Result:" : "Error:"}
-              </p>
-              <pre className="font-mono text-xs whitespace-pre-wrap">
-                {output.success ? output.result : output.error}
-              </pre>
-            </div>
-          )}
-        </div>
-      );
-    },
-  },
-});
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide",
-  "registries": {
-    "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
-  }
-}
-
-```
-
-## next.config.js
-
-```javascript
-import { withAui } from "@assistant-ui/next";
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-chain-of-thought",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.40",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-ai-sdk": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.62",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.31.0",
-    "next": "^16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwind-merge": "^3.6.0",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/next": "workspace:*",
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# Chain of Thought Example
-
-A real chat flow that renders reasoning, tool calls, and source citations as grouped message parts. Demonstrates `MessagePrimitive.GroupedParts` with a nested `groupBy` path, plus structured `source` parts emitted from a search tool.
-
-## Quick start
-
-### Using the CLI
-
-```bash
-npx assistant-ui@latest create my-app --example with-chain-of-thought
-cd my-app
-```
-
-### Environment variables
-
-`OPENAI_API_KEY` is optional. With the key set the route runs a real reasoning model and a `search_web` tool; without it the route streams a deterministic mock response with the same chunk shapes, so the UI is fully demonstrable offline.
-
-Create `.env.local`:
-
-```
-OPENAI_API_KEY=sk-...
-```
-
-### Run
-
-```bash
-npm install
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000).
-
-## What the example demonstrates
-
-| Concern | Where it lives |
-|---|---|
-| Real chat flow with `useChatRuntime` | `app/page.tsx` |
-| Reasoning, tool calls, source citations streamed as message parts | `app/api/chat/route.ts` |
-| Nested adjacency-based grouping with `MessagePrimitive.GroupedParts` | `app/MyThread.tsx` |
-| `Sources` component rendering `source` parts | `app/MyThread.tsx` |
-| Fallback path that runs without an API key | `app/api/chat/route.ts` (`streamFallback`) |
-
-## How parts are grouped
-
-The thread groups three part types under one collapsible "Thinking" section, then renders source badges in a row below it. The grouping is configured on `MessagePrimitive.GroupedParts`:
-
-```tsx
-<MessagePrimitive.GroupedParts
-  groupBy={(part) => {
-    if (part.type === "reasoning") return ["group-chainOfThought", "group-reasoning"];
-    if (part.type === "tool-call") return ["group-chainOfThought", "group-tool"];
-    if (part.type === "source") return ["group-chainOfThought", "group-sources"];
-    return null;
-  }}
->
-```
-
-Each part is mapped to a nested group key path. Adjacent parts that share a path are coalesced and rendered through the matching `group-*` case in the render function. `null` leaves a part ungrouped.
-
-This is the canonical pattern. For non-adjacent clustering (parts that share an identifier but appear at different positions in the message), see [`/docs/ui/part-grouping`](https://www.assistant-ui.com/docs/ui/part-grouping).
-
-## How sources are emitted
-
-The route emits structured `source-url` chunks; `@assistant-ui/react-ai-sdk` converts them to `source` message parts that the `Sources` component renders as badges. They are not URLs scraped from assistant text.
-
-```ts
-writer.write({
-  type: "source-url",
-  sourceId: "src-1",
-  url: "https://example.com/report",
-  title: "Example report",
-});
-```
-
-In the real path the `search_web` tool returns sources in its output, and the route writes one `source-url` chunk per result immediately after the `tool-output-available` chunk. In the fallback path the same shape is written directly. The UI rendering is identical in both modes.
-
-## Why these features live together
-
-Chain-of-thought, tool calls, and citation sources are the parts of an assistant turn a user typically wants to inspect together. Grouping them under one collapsible keeps the message tidy by default and reveals the full reasoning trail on demand.
-
-## Related documentation
-
-- [Message Part Grouping](https://www.assistant-ui.com/docs/ui/part-grouping)
-- [Sources component](https://www.assistant-ui.com/docs/ui/sources)
-- [AI SDK v6 runtime](https://www.assistant-ui.com/docs/runtimes/ai-sdk/v6)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"],
-      "@/components/assistant-ui/*": [
-        "../../packages/ui/src/components/assistant-ui/*"
-      ],
-      "@/components/ui/*": [
-        "../../packages/ui/src/components/ui/base/*",
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/components/ui/radix/*": [
-        "../../packages/ui/src/components/ui/radix/*"
-      ],
-      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
-      "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
-      "@assistant-ui/store/client": ["../../packages/store/src/client"],
-      "@assistant-ui/*": ["../../packages/*/src"],
-      "@assistant-ui/core/*": ["../../packages/core/src/*"],
-      "@assistant-ui/react/*": ["../../packages/react/src/*"],
-      "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
-      "assistant-stream": ["../../packages/assistant-stream/src"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-