OPENAI_API_KEY=sk-...

"use client";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import {
  useChatRuntime,
  AssistantChatTransport,
} from "@assistant-ui/react-ai-sdk";

function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* Your chat UI */}
    </AssistantRuntimeProvider>
  );
}

import { streamText, tool, convertToModelMessages, jsonSchema } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    messages: convertToModelMessages(messages),
    tools: {
      previewLink: tool({
        description: "Show a preview card for a URL",
        inputSchema: jsonSchema<{ url: string }>({
          type: "object",
          properties: { url: { type: "string", format: "uri" } },
          required: ["url"],
          additionalProperties: false,
        }),
        async execute({ url }) {
          // In production, you'd fetch real metadata here
          return {
            id: "link-preview-1",
            href: url,
            title: "Example Site",
            description: "A description of the linked content",
            image: "https://example.com/image.jpg",
          };
        },
      }),
    },
  });

  return result.toUIMessageStreamResponse();
}

npx assistant-ui@latest init

pnpm add @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai zod

import { openai } from "@ai-sdk/openai";
import {
  streamText,
  convertToModelMessages,
  jsonSchema,
  type UIMessage,
  type JSONSchema7,
} from "ai";

type ForwardedTools = Record<
  string,
  { description?: string; parameters: JSONSchema7 }
>;

function toStreamTextTools(tools?: ForwardedTools) {
  if (!tools) return undefined;
  return Object.fromEntries(
    Object.entries(tools).map(([name, tool]) => [
      name,
      {
        ...(tool.description ? { description: tool.description } : {}),
        inputSchema: jsonSchema(tool.parameters),
      },
    ]),
  );
}

export async function POST(req: Request) {
  const body = (await req.json()) as {
    messages: UIMessage[];
    system?: string;
    tools?: ForwardedTools;
  };

  const result = streamText({
    model: openai("gpt-4o"),
    messages: convertToModelMessages(body.messages),
    system: body.system,
    tools: toStreamTextTools(body.tools),
  });

  return result.toUIMessageStreamResponse();
}

"use client";

import { makeAssistantTool } from "@assistant-ui/react";
import {
  OptionList,
  parseSerializableOptionList,
  SerializableOptionListSchema,
  type SerializableOptionList,
  type OptionListSelection,
} from "@/components/tool-ui/option-list";

export const SelectFormatTool = makeAssistantTool<
  SerializableOptionList,
  OptionListSelection
>({
  toolName: "selectFormat",
  description: "Ask the user to choose an output format.",
  parameters: SerializableOptionListSchema,
  render: ({ args, result, addResult, toolCallId }) => {
    // Tool args can be incomplete while streaming; wait until required fields exist.
    if (!Array.isArray((args as any)?.options)) return null;

    const optionList = parseSerializableOptionList({
      ...args,
      // `id` is required and should be stable/meaningful; fall back for DX.
      id: (args as any)?.id ?? `format-selection-${toolCallId}`,
    });

    // Receipt state
    if (result !== undefined) {
      return (
        <OptionList {...optionList} value={undefined} confirmed={result} />
      );
    }

    return (
      <OptionList
        {...optionList}
        // Avoid controlled selection in LLM-driven payloads.
        value={undefined}
        onConfirm={(selection) => addResult(selection)}
      />
    );
  },
});

import {
  useChatRuntime,
  AssistantChatTransport,
} from "@assistant-ui/react-ai-sdk";
import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";

const runtime = useChatRuntime({
  transport: new AssistantChatTransport({ api: "/api/chat" }),
  sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
});

import { makeAssistantToolUI } from "@assistant-ui/react";
import {
  LinkPreview,
  LinkPreviewErrorBoundary,
  parseSerializableLinkPreview,
} from "@/components/tool-ui/link-preview";

export const PreviewLinkUI = makeAssistantToolUI({
  toolName: "previewLink", // Must match backend tool name
  render: ({ result }) => {
    // Tool outputs stream in; `result` will be `undefined` until the tool resolves.
    if (result === undefined) {
      return (
        <div className="bg-card/60 text-muted-foreground w-full max-w-md rounded-2xl border px-5 py-4 text-sm shadow-xs">
          Loading preview…
        </div>
      );
    }

    const preview = parseSerializableLinkPreview(result);
    return (
      <LinkPreviewErrorBoundary>
        <LinkPreview {...preview} maxWidth="420px" />
      </LinkPreviewErrorBoundary>
    );
  },
});

// Register in your app
function App() {
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <PreviewLinkUI />
      <Thread />
    </AssistantRuntimeProvider>
  );
}