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

package/.docs/organized/code-examples/with-langgraph.md

@@ -1,855 +0,0 @@
-# Example: with-langgraph
-
-## app/api/[..._path]/route.ts
-
-```typescript
-import { type NextRequest, NextResponse } from "next/server";
-
-function getCorsHeaders() {
-  return {
-    "Access-Control-Allow-Origin": "*",
-    "Access-Control-Allow-Methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS",
-    "Access-Control-Allow-Headers": "*",
-  };
-}
-
-async function handleRequest(req: NextRequest, method: string) {
-  try {
-    const path = req.nextUrl.pathname.replace(/^\/?api\//, "");
-    const url = new URL(req.url);
-    const searchParams = new URLSearchParams(url.search);
-    searchParams.delete("_path");
-    searchParams.delete("nxtP_path");
-    const queryString = searchParams.toString()
-      ? `?${searchParams.toString()}`
-      : "";
-
-    const options: RequestInit = {
-      method,
-      headers: {
-        "x-api-key": process.env.LANGCHAIN_API_KEY || "",
-      },
-    };
-
-    if (["POST", "PUT", "PATCH"].includes(method)) {
-      options.body = await req.text();
-    }
-
-    const res = await fetch(
-      `${process.env.LANGGRAPH_API_URL}/${path}${queryString}`,
-      options,
-    );
-
-    const headers = new Headers(res.headers);
-    headers.delete("content-encoding");
-    headers.delete("content-length");
-    headers.delete("transfer-encoding");
-    const corsHeaders = getCorsHeaders();
-    for (const [key, value] of Object.entries(corsHeaders)) {
-      headers.set(key, value);
-    }
-
-    return new NextResponse(res.body, {
-      status: res.status,
-      statusText: res.statusText,
-      headers,
-    });
-  } catch (e: unknown) {
-    if (e instanceof Error) {
-      const typedError = e as Error & { status?: number };
-      return NextResponse.json(
-        { error: typedError.message },
-        { status: typedError.status ?? 500 },
-      );
-    }
-    return NextResponse.json({ error: "Unknown error" }, { status: 500 });
-  }
-}
-
-export const GET = (req: NextRequest) => handleRequest(req, "GET");
-export const POST = (req: NextRequest) => handleRequest(req, "POST");
-export const PUT = (req: NextRequest) => handleRequest(req, "PUT");
-export const PATCH = (req: NextRequest) => handleRequest(req, "PATCH");
-export const DELETE = (req: NextRequest) => handleRequest(req, "DELETE");
-export const OPTIONS = () =>
-  new NextResponse(null, {
-    status: 204,
-    headers: getCorsHeaders(),
-  });
-
-```
-
-## 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 "./globals.css";
-
-import { cn } from "@/lib/utils";
-import { Montserrat } from "next/font/google";
-import { MyRuntimeProvider } from "./MyRuntimeProvider";
-import { Suspense } from "react";
-
-const montserrat = Montserrat({ subsets: ["latin"] });
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <MyRuntimeProvider>
-      <html lang="en">
-        <body className={cn(montserrat.className, "h-dvh")}>
-          <Suspense>{children}</Suspense>
-        </body>
-      </html>
-    </MyRuntimeProvider>
-  );
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-"use client";
-
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useStreamRuntime } from "@assistant-ui/react-langchain";
-import { Client } from "@langchain/langgraph-sdk";
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const apiUrl =
-    process.env.NEXT_PUBLIC_LANGGRAPH_API_URL ||
-    (typeof window !== "undefined"
-      ? new URL("/api", window.location.href).href
-      : undefined);
-
-  const runtime = useStreamRuntime({
-    assistantId: process.env.NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID!,
-    apiUrl,
-    create: async () => {
-      const { thread_id } = await new Client(
-        apiUrl ? { apiUrl } : {},
-      ).threads.create();
-      return { externalId: thread_id };
-    },
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import { ThreadList } from "@/components/assistant-ui/thread-list";
-import {
-  useAui,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-  Tools,
-} from "@assistant-ui/react";
-import toolkit from "./toolkit";
-
-function ThreadWithSuggestions() {
-  const aui = useAui();
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-    suggestions: Suggestions([
-      {
-        title: "Check stock price",
-        label: "get the latest AAPL snapshot",
-        prompt: "What's the current price of AAPL?",
-      },
-      {
-        title: "Buy shares",
-        label: "execute a stock purchase",
-        prompt: "Buy 10 shares of TSLA.",
-      },
-    ]),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-
-export default function Home() {
-  return (
-    <div className="flex h-dvh">
-      <div className="max-w-md">
-        <ThreadList />
-      </div>
-      <div className="flex-grow">
-        <ThreadWithSuggestions />
-      </div>
-    </div>
-  );
-}
-
-```
-
-## app/toolkit.tsx
-
-```tsx
-"use generative";
-
-import { defineToolkit, externalTool } from "@assistant-ui/react";
-import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
-import { PurchaseStockToolUI } from "@/components/tools/purchase-stock/PurchaseStockTool";
-
-export default defineToolkit({
-  price_snapshot: {
-    execute: externalTool(),
-    render: PriceSnapshotToolUI,
-  },
-  purchase_stock: {
-    execute: externalTool(),
-    render: PurchaseStockToolUI,
-  },
-});
-
-```
-
-## 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"
-  }
-}
-
-```
-
-## components/tools/price-snapshot/price-snapshot.tsx
-
-```tsx
-"use client";
-
-import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-type PriceSnapshotToolArgs = {
-  ticker: string;
-};
-
-type PriceSnapshotToolResult = {
-  price: number;
-  day_change: number;
-  day_change_percent: number;
-  time: string;
-};
-
-export function PriceSnapshot({
-  ticker,
-  price,
-  day_change,
-  day_change_percent,
-  time,
-}: PriceSnapshotToolArgs & PriceSnapshotToolResult) {
-  const isPositiveChange = day_change >= 0;
-  const changeColor = isPositiveChange ? "text-green-600" : "text-red-600";
-  const ArrowIcon = isPositiveChange ? ArrowUpIcon : ArrowDownIcon;
-
-  return (
-    <Card className="mx-auto w-full max-w-md">
-      <CardHeader>
-        <CardTitle className="text-2xl font-bold">{ticker}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 gap-4">
-          <div className="col-span-2">
-            <p className="text-3xl font-semibold">${price?.toFixed(2)}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground text-sm">Day Change</p>
-            <p
-              className={`flex items-center text-lg font-medium ${changeColor}`}
-            >
-              <ArrowIcon className="mr-1 h-4 w-4" />$
-              {Math.abs(day_change)?.toFixed(2)} (
-              {Math.abs(day_change_percent)?.toFixed(2)}%)
-            </p>
-          </div>
-          <div>
-            <p className="text-muted-foreground text-sm">Last Updated</p>
-            <p className="text-lg font-medium">
-              {new Date(time).toLocaleTimeString()}
-            </p>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-```
-
-## components/tools/price-snapshot/PriceSnapshotTool.tsx
-
-```tsx
-"use client";
-
-import { PriceSnapshot } from "./price-snapshot";
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-
-type PriceSnapshotToolArgs = {
-  ticker: string;
-};
-type PriceSnapshotToolResult = {
-  snapshot: {
-    price: number;
-    day_change: number;
-    day_change_percent: number;
-    time: string;
-  };
-};
-export const PriceSnapshotToolUI: ToolCallMessagePartComponent<
-  PriceSnapshotToolArgs,
-  string
-> = function PriceSnapshotUI({ args, argsText, result }) {
-  const resultObj = result
-    ? (JSON.parse(result) as PriceSnapshotToolResult)
-    : undefined;
-
-  return (
-    <div className="mb-4 flex flex-col items-center gap-2">
-      <pre className="whitespace-pre-wrap">price_snapshot({argsText})</pre>
-      {resultObj && (
-        <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
-      )}
-    </div>
-  );
-};
-
-```
-
-## components/tools/purchase-stock/PurchaseStockTool.tsx
-
-```tsx
-"use client";
-
-import { TransactionConfirmationPending } from "./transaction-confirmation-pending";
-import { TransactionConfirmationFinal } from "./transaction-confirmation-final";
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-
-type PurchaseStockArgs = {
-  ticker: string;
-  companyName: string;
-  quantity: number;
-  maxPurchasePrice: number;
-};
-
-export const PurchaseStockToolUI: ToolCallMessagePartComponent<
-  PurchaseStockArgs,
-  string
-> = function PurchaseStockUI({ args, argsText, result, status, addResult }) {
-  const resultObj = result
-    ? (JSON.parse(result) as { transactionId: string })
-    : undefined;
-
-  const handleConfirm = async () => {
-    addResult(JSON.stringify({ confirmed: true }));
-  };
-
-  return (
-    <div className="mb-4 flex flex-col items-center gap-2">
-      <pre className="whitespace-pre-wrap">purchase_stock({argsText})</pre>
-      {!resultObj && status.type !== "running" && (
-        <TransactionConfirmationPending {...args} onConfirm={handleConfirm} />
-      )}
-      {resultObj && <TransactionConfirmationFinal {...args} />}
-    </div>
-  );
-};
-
-```
-
-## components/tools/purchase-stock/transaction-confirmation-final.tsx
-
-```tsx
-"use client";
-
-import { CheckCircle } from "lucide-react";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-type TransactionConfirmation = {
-  ticker: string;
-  companyName: string;
-  quantity: number;
-  maxPurchasePrice: number;
-};
-
-export function TransactionConfirmationFinal(props: TransactionConfirmation) {
-  const { ticker, companyName, quantity, maxPurchasePrice } = props;
-
-  return (
-    <Card className="mx-auto w-full max-w-md">
-      <CardHeader className="text-center">
-        <CheckCircle className="mx-auto mb-4 h-16 w-16 text-green-500" />
-        <CardTitle className="text-2xl font-bold text-green-700">
-          Transaction Confirmed
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="rounded-md border border-green-200 bg-green-50 p-4">
-          <h3 className="mb-2 text-lg font-semibold text-green-800">
-            Purchase Summary
-          </h3>
-          <div className="grid grid-cols-2 gap-2 text-sm">
-            <p className="font-medium text-green-700">Ticker:</p>
-            <p className="font-bold text-green-900">{ticker}</p>
-            <p className="font-medium text-green-700">Company:</p>
-            <p className="text-green-900">{companyName}</p>
-            <p className="font-medium text-green-700">Quantity:</p>
-            <p className="text-green-900">{quantity} shares</p>
-            <p className="font-medium text-green-700">Price per Share:</p>
-            <p className="text-green-900">${maxPurchasePrice?.toFixed(2)}</p>
-          </div>
-        </div>
-        <div className="rounded-md border border-green-300 bg-green-100 p-4">
-          <p className="text-lg font-semibold text-green-800">Total Cost:</p>
-          <p className="text-2xl font-bold text-green-900">
-            ${(quantity * maxPurchasePrice)?.toFixed(2)}
-          </p>
-        </div>
-        <p className="text-center text-sm text-green-600">
-          Your purchase of {quantity} shares of {companyName} ({ticker}) has
-          been successfully processed.
-        </p>
-      </CardContent>
-    </Card>
-  );
-}
-
-```
-
-## components/tools/purchase-stock/transaction-confirmation-pending.tsx
-
-```tsx
-"use client";
-
-import { CheckIcon } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-type TransactionConfirmation = {
-  ticker: string;
-  companyName: string;
-  quantity: number;
-  maxPurchasePrice: number;
-  onConfirm: () => void;
-};
-
-export function TransactionConfirmationPending(props: TransactionConfirmation) {
-  const { ticker, companyName, quantity, maxPurchasePrice, onConfirm } = props;
-
-  return (
-    <Card className="mx-auto w-full max-w-md">
-      <CardHeader>
-        <CardTitle className="text-2xl font-bold">
-          Confirm Transaction
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="grid grid-cols-2 gap-2">
-          <p className="text-muted-foreground text-sm font-medium">Ticker:</p>
-          <p className="text-sm font-bold">{ticker}</p>
-          <p className="text-muted-foreground text-sm font-medium">Company:</p>
-          <p className="text-sm">{companyName}</p>
-          <p className="text-muted-foreground text-sm font-medium">Quantity:</p>
-          <p className="text-sm">{quantity} shares</p>
-          <p className="text-muted-foreground text-sm font-medium">
-            Max Purchase Price:
-          </p>
-          <p className="text-sm">${maxPurchasePrice?.toFixed(2)}</p>
-        </div>
-        <div className="bg-muted rounded-md p-3">
-          <p className="text-sm font-medium">Total Maximum Cost:</p>
-          <p className="text-lg font-bold">
-            ${(quantity * maxPurchasePrice)?.toFixed(2)}
-          </p>
-        </div>
-      </CardContent>
-      <CardFooter className="flex justify-end">
-        {/* <Button variant="outline" onClick={onReject}>
-          <X className="mr-2 h-4 w-4" />
-          Reject
-        </Button> */}
-        <Button onClick={onConfirm}>
-          <CheckIcon className="mr-2 h-4 w-4" />
-          Confirm
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}
-
-```
-
-## components/tools/ToolFallback.tsx
-
-```tsx
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-
-export const ToolFallback: ToolCallMessagePartComponent = ({
-  toolName,
-  argsText,
-  result,
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(true);
-  return (
-    <div className="mb-4 flex w-full flex-col gap-3 rounded-lg border py-3">
-      <div className="flex items-center gap-2 px-4">
-        <CheckIcon className="size-4" />
-        <p className="">
-          Used tool: <b>{toolName}</b>
-        </p>
-        <div className="flex-grow" />
-        <Button onClick={() => setIsCollapsed(!isCollapsed)}>
-          {isCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
-        </Button>
-      </div>
-      {!isCollapsed && (
-        <div className="flex flex-col gap-2 border-t pt-2">
-          <div className="px-4">
-            <pre className="whitespace-pre-wrap">{argsText}</pre>
-          </div>
-          {result !== undefined && (
-            <div className="border-t border-dashed px-4 pt-2">
-              <p className="font-semibold">Result:</p>
-              <pre className="whitespace-pre-wrap">
-                {typeof result === "string"
-                  ? result
-                  : JSON.stringify(result, null, 2)}
-              </pre>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-```
-
-## next.config.ts
-
-```typescript
-import { withAui } from "@assistant-ui/next";
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  async rewrites() {
-    return [
-      {
-        source: "/assistant/:path*",
-        destination: "http://localhost:8000/assistant/:path*",
-      },
-    ];
-  },
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-langgraph",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-langchain": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "@langchain/langgraph-sdk": "^1.9.31",
-    "@langchain/react": "^1.0.32",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "next": "^16.3.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwind-merge": "^3.6.0"
-  },
-  "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.5",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# LangGraph Integration
-
-[Hosted Demo](https://assistant-ui-langgraph.vercel.app/)
-
-This example demonstrates how to use LangChain LangGraph with assistant-ui. It is meant to be used with the backend found at LangGraph's Stockbroker example: https://github.com/bracesproul/langgraphjs-examples/tree/main/stockbroker
-
-## Quick Start
-
-### Using CLI (Recommended)
-
-```bash
-npx assistant-ui@latest create my-app --example with-langgraph
-cd my-app
-```
-
-### Environment Variables
-
-Create `.env.local`:
-
-```
-LANGGRAPH_API_URL=http://localhost:2024
-LANGCHAIN_API_KEY=
-NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
-```
-
-`LANGGRAPH_API_URL` is the LangGraph deployment URL the bundled `/api/[..._path]` proxy fetches from. `LANGCHAIN_API_KEY` is forwarded as `x-api-key` and can be blank for an unauthenticated dev server. `NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID` is the graph id (a key under `graphs` in your `langgraph.json`).
-
-### Run
-
-```bash
-npm install
-npm run dev
-```
-
-## Features
-
-- LangGraph agent integration via `@assistant-ui/react-langchain`
-- Thread list for conversation management
-- Custom tool UI for stock price snapshots
-- Custom tool UI for stock purchases
-
-## Related Documentation
-
-- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
-- [LangGraph Integration Guide](https://www.assistant-ui.com/docs/runtimes/langgraph)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"],
-      "@/components/assistant-ui/*": [
-        "../../packages/ui/src/components/assistant-ui/*"
-      ],
-      "@/hooks/*": ["../../packages/ui/src/hooks/*"],
-      "@/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/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-