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

package/.docs/raw/docs/runtimes/langgraph/threads.mdx

@@ -1,113 +0,0 @@
----
-title: Threads
-description: Basic thread support, AssistantCloud, and custom thread list adapter.
----
-
-`useLangGraphRuntime` supports the same three-path thread model documented in [threads](/docs/runtimes/concepts/threads), tailored for LangGraph thread ids. This page covers the LangGraph-specific wiring.
-
-## Basic thread support
-
-`useLangGraphRuntime` includes built-in thread management:
-
-```ts
-const runtime = useLangGraphRuntime({
-  stream: async (messages, { initialize, ...config }) => {
-    // initialize() creates or loads a thread and returns its IDs
-    const { remoteId, externalId } = await initialize();
-    // Use externalId (your backend's thread ID) for API calls
-    return sendMessage({ threadId: externalId, messages, config });
-  },
-  create: async () => {
-    // Called when creating a new thread
-    const { thread_id } = await createThread();
-    return { externalId: thread_id };
-  },
-  load: async (externalId) => {
-    // Called when loading an existing thread
-    const state = await getThreadState(externalId);
-    return {
-      messages: state.values.messages,
-      interrupts: state.tasks[0]?.interrupts,
-    };
-  },
-});
-```
-
-## Cloud persistence
-
-For managed multi-thread support, persistence, sync, and titles, pass an `AssistantCloud` instance:
-
-```ts
-const runtime = useLangGraphRuntime({
-  cloud, // see "AssistantCloud" in /docs/runtimes/concepts/threads
-  // ... stream, create, load functions
-});
-```
-
-See the [cloud persistence guide](/docs/cloud/langgraph) for setup details.
-
-## Custom thread list
-
-To surface pre-existing LangGraph `thread_id`s in the thread picker without running assistant-cloud, pass a `RemoteThreadListAdapter` via `unstable_threadListAdapter`. A common implementation backs `list()` with `client.threads.search()` and `initialize()` with `client.threads.create()`.
-
-```ts
-import type { RemoteThreadListAdapter } from "@assistant-ui/react";
-import { Client } from "@langchain/langgraph-sdk";
-
-const client = new Client({
-  apiUrl: process.env.NEXT_PUBLIC_LANGGRAPH_API_URL,
-});
-
-const threadListAdapter: RemoteThreadListAdapter = {
-  async list() {
-    const threads = await client.threads.search({ limit: 50 });
-    return {
-      threads: threads.map((t) => ({
-        status: "regular",
-        remoteId: t.thread_id,
-        externalId: t.thread_id,
-        title: (t.metadata as { title?: string } | undefined)?.title,
-      })),
-    };
-  },
-  async initialize() {
-    const t = await client.threads.create();
-    return { remoteId: t.thread_id, externalId: t.thread_id };
-  },
-  async delete(remoteId) {
-    await client.threads.delete(remoteId);
-  },
-  // rename, archive, unarchive, fetch, generateTitle — see the threads concept page
-};
-
-const runtime = useLangGraphRuntime({
-  stream: async function* (messages, { initialize }) {
-    /* ... */
-  },
-  load: async (externalId) => {
-    /* ... */
-  },
-  unstable_threadListAdapter: threadListAdapter,
-});
-```
-
-Setting `remoteId === externalId` keeps the ids assistant-ui stores aligned with the LangGraph thread ids your `load` and `stream` callbacks receive. See [threads](/docs/runtimes/concepts/threads) for the full adapter contract.
-
-<Callout type="info">
-When `unstable_threadListAdapter` is provided, the `cloud`, `create`, and `delete` options are ignored; the adapter owns the full thread-list lifecycle.
-</Callout>
-
-## Next
-
-<Cards>
-  <Card
-    title="Streaming"
-    description="Event handlers, message metadata, generative UI."
-    href="/docs/runtimes/langgraph/streaming"
-  />
-  <Card
-    title="Threads (concept)"
-    description="General multi-thread model across runtimes."
-    href="/docs/runtimes/concepts/threads"
-  />
-</Cards>

package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx

@@ -1,29 +0,0 @@
----
-title: Introduction
-description: Build a stockbroker assistant with LangGraph and assistant-ui.
----
-
-In this tutorial, we will build a stockbroker assistant using LangChain.js, LangGraph.js and assistant-ui.
-
-We will go through the necessary steps to integrate assistant-ui with a LangGraph Cloud endpoint.
-Code snippets focus on the setup of the frontend, but we will highlight relevant sections of the backend code as well.
-
-This agent leverages the following features:
-
-- 🚄 Streaming of messages from LangGraph state to assistant-ui
-- 💅 Rich text rendering using Markdown
-- 🛠️ Generative UI: Mapping tool calls to tool UIs
-- 🔁 Approval UI: Confirming tool calls before execution (human-in-the-loop)
-
-## Prerequisites
-
-- Node.js 24 or higher
-
-## Final result
-
-- Demo: https://assistant-ui-stockbroker.vercel.app/
-- Source Code: https://github.com/assistant-ui/assistant-ui-stockbroker
-
-## Get started
-
-Begin Part 1 of the tutorial by [setting up the frontend](/docs/runtimes/langgraph/tutorial/part-1).

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx

@@ -1,93 +0,0 @@
----
-title: "Part 1: Setup frontend"
-description: Create a Next.js project with the LangGraph assistant-ui template.
----
-
-## Create a new project
-
-Run the following command to create a new Next.js project with the LangGraph assistant-ui template:
-
-```sh
-npx create-assistant-ui@latest -t langchain my-app
-cd my-app
-```
-
-You should see the following files in your project:
-
-import { File, Folder, Files } from "fumadocs-ui/components/files";
-
-<Files>
-  <Folder name="my-app" defaultOpen>
-    <Folder name="app" defaultOpen>
-      <Folder name="api" defaultOpen>
-        <Folder name="[..._path]" defaultOpen>
-          <File name="route.ts" />
-        </Folder>
-      </Folder>
-      <File name="assistant.tsx" />
-      <File name="globals.css" />
-      <File name="layout.tsx" />
-      <File name="page.tsx" />
-    </Folder>
-    <Folder name="components" defaultOpen>
-      <Folder name="assistant-ui">
-        <File name="thread.tsx" />
-      </Folder>
-      <Folder name="ui">
-        <File name="button.tsx" />
-        <File name="tooltip.tsx" />
-      </Folder>
-    </Folder>
-    <Folder name="lib">
-      <File name="chatApi.ts" />
-      <File name="utils.ts" />
-    </Folder>
-    <File name="components.json" />
-    <File name="next.config.ts" />
-    <File name="package.json" />
-    <File name="postcss.config.mjs" />
-    <File name="tsconfig.json" />
-  </Folder>
-</Files>
-
-### Setup environment variables
-
-Create a `.env.local` file in your project with the following variables:
-
-```sh title="@/.env.local"
-LANGGRAPH_API_URL=https://assistant-ui-stockbroker.vercel.app/api
-NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
-```
-
-This connects the frontend to a LangGraph Cloud endpoint running under  
-`https://assistant-ui-stockbroker.vercel.app/api`.  
-This endpoint is running the LangGraph agent defined [in this repository](https://github.com/assistant-ui/assistant-ui-stockbroker/blob/main/backend).
-
-### Start the server
-
-You can start the server by running the following command:
-
-```sh
-npm run dev
-```
-
-The server will start and you can view the frontend by opening a browser tab to http://localhost:3000.
-
-You should be able to chat with the assistant and see LLM responses streaming in real-time.
-
-## Explore features
-
-### Streaming
-
-Streaming message support is enabled by default. The LangGraph integration includes sophisticated message handling that efficiently manages streaming responses:
-
-- Messages are accumulated and updated in real-time using `LangGraphMessageAccumulator`
-- Partial message chunks are automatically merged using `appendLangChainChunk`
-- The runtime handles all the complexity of managing streaming state
-
-This means you'll see tokens appear smoothly as they're generated by the LLM, with proper handling of both text content and tool calls.
-
-### Markdown support
-
-Rich text rendering using Markdown is enabled by default.
-

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx

@@ -1,347 +0,0 @@
----
-title: "Part 2: Generative UI"
-description: Display stock ticker information with generative UI components.
----
-
-In the previous step, we set up the frontend to connect to a LangGraph Cloud endpoint.
-
-In this step, we will set up a component to display stock ticker information.
-
-import Image from "next/image";
-import price from "./images/acme-price.png";
-
-<Image
-  src={price}
-  alt="Price snapshot"
-  width={600}
-  className="mx-auto rounded-lg border shadow"
-/>
-
-For reference, this is the corresponding code in the backend:
-
-https://github.com/assistant-ui/assistant-ui-stockbroker/blob/main/backend/src/tools.ts#L193C1-L216C3
-
-```ts title="assistant-ui-stockbroker/backend/tools/PriceSnapshotTool.ts"
-export const priceSnapshotTool = tool(
-  async (input) => {
-    const data = await callFinancialDatasetAPI<SnapshotResponse>({
-      endpoint: "/prices/snapshot",
-      params: {
-        ticker: input.ticker,
-      },
-    });
-    return JSON.stringify(data, null);
-  },
-  {
-    name: "price_snapshot",
-    description:
-      "Retrieves the current stock price and related market data for a given company.",
-    schema: z.object({
-      ticker: z.string().describe("The ticker of the company. Example: 'AAPL'"),
-    }),
-  },
-);
-```
-
-## PriceSnapshotTool
-
-We create a new file under `/components/tools/price-snapshot/PriceSnapshotTool.tsx` to define the tool.
-
-First, we define the tool arguments and result types:
-
-```ts title="@/components/tools/price-snapshot/PriceSnapshotTool.tsx"
-type PriceSnapshotToolArgs = {
-  ticker: string;
-};
-
-type PriceSnapshotToolResult = {
-  snapshot: {
-    price: number;
-    day_change: number;
-    day_change_percent: number;
-    time: string;
-  };
-};
-```
-
-Then, we define a tool UI renderer:
-
-```tsx title="@/components/tools/price-snapshot/PriceSnapshotTool.tsx"
-"use client";
-
-import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
-
-export const PriceSnapshotToolUI: ToolCallMessagePartComponent<
-  PriceSnapshotToolArgs,
-  string
-> = function PriceSnapshotUI({ args, result }) {
-  return (
-    <div className="mb-4 flex flex-col items-center">
-      <pre className="whitespace-pre-wrap break-all text-center">
-        price_snapshot({JSON.stringify(args)})
-      </pre>
-    </div>
-  );
-};
-```
-
-This simply displays the tool name and arguments passed to it, but not the result.
-
-### Bind tool UI
-
-```tsx title="@/app/page.tsx" {1-3,10}
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import { PriceSnapshotToolUI } from "@/components/tools/price-snapshot/PriceSnapshotTool";
-import { AuiConfig, AuiProvider, defineToolkit, Tools, useAui } from "@assistant-ui/react";
-
-const toolkit = defineToolkit({
-  price_snapshot: {
-    type: "backend",
-    render: PriceSnapshotToolUI,
-  },
-});
-
-export default function Home() {
-  const aui = useAui();
-  const config = AuiConfig({ tools: Tools({ toolkit }) });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-```
-
-### Try it out!
-
-Ask the assistant for the current stock price of Tesla. You should see the following text appear:
-
-```
-price_snapshot({ticker: "TSLA"})
-```
-
-Next, we will visualize the function's result.
-
-## Visualizing tool results
-
-### Install dependencies
-
-The tool result component relies on shadcn/ui's `Card` component. We will install it as a dependency.
-
-```sh
-npx shadcn@latest add card
-```
-
-You will be prompted to setup a `components.json` file, after this step, a `card` UI component will be installed in your project.
-
-### Add `PriceSnapshot`
-
-We create a new file under `/components/tools/price-snapshot/price-snapshot.tsx` to define the new tool result UI.
-
-```tsx title="@/components/tools/price-snapshot/price-snapshot.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>
-  );
-}
-```
-
-### Update `PriceSnapshotTool`
-
-We will import the new `<PriceSnapshot />` component and use it in the `render` function whenever a tool result is available.
-
-```tsx title="@/components/tools/price-snapshot/PriceSnapshotTool.tsx" {3,25-30,37-42}
-"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, result }) {
-  let resultObj: PriceSnapshotToolResult | { error: string };
-  try {
-    resultObj = result ? JSON.parse(result) : {};
-  } catch (e) {
-    resultObj = { error: result! };
-  }
-
-  return (
-    <div className="mb-4 flex flex-col items-center gap-2">
-      <pre className="whitespace-pre-wrap break-all text-center">
-        price_snapshot({JSON.stringify(args)})
-      </pre>
-      {"snapshot" in resultObj && (
-        <PriceSnapshot ticker={args.ticker} {...resultObj.snapshot} />
-      )}
-      {"error" in resultObj && (
-        <p className="text-red-500">{resultObj.error}</p>
-      )}
-    </div>
-  );
-};
-```
-
-### Try it out!
-
-Ask the assistant for the current stock price of Tesla. You should see the tool result appear:
-
-import price2 from "./images/tsla-price.png";
-
-<Image
-  src={price2}
-  alt="Price snapshot result"
-  width={600}
-  className="mx-auto rounded-lg border shadow"
-/>
-
-## Fallback tool UI
-
-Instead of defining a custom tool UI for every tool, we can also define a fallback UI for all tools that are not explicitly defined.
-
-This requires shadcn/ui's `Button` component. We will install it as a dependency.
-
-```sh
-npx shadcn@latest add button
-```
-
-Then create a new file under `/components/tools/ToolFallback.tsx` to define the fallback UI.
-
-```tsx title="@/components/tools/ToolFallback.tsx"
-import { 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>
-  );
-};
-```
-
-### Bind fallback UI
-
-```tsx title="@/app/page.tsx"
-const toolkit = defineToolkit({
-  price_snapshot: {
-    type: "backend",
-    render: PriceSnapshotToolUI,
-  },
-});
-
-export default function Home() {
-  const aui = useAui();
-  const config = AuiConfig({ tools: Tools({ toolkit }) });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-```
-
-The `Thread` component from `@assistant-ui/ui` already includes a built-in `ToolFallback` and `MarkdownText`, so no additional configuration is needed.