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

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

@@ -1,814 +0,0 @@
-# Example: with-artifacts
-
-## app/api/chat/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import { convertToModelMessages, stepCountIs, streamText } from "ai";
-import type { UIMessage } from "ai";
-import {
-  AISDKToolkit,
-  unstable_injectInteractableContext,
-  type AISDKToolkitToolsOptions,
-} from "@assistant-ui/react-ai-sdk";
-import toolkit from "../../toolkit";
-
-export const maxDuration = 30;
-
-const aiToolkit = new AISDKToolkit({ toolkit });
-
-type FrontendToolDefs = NonNullable<AISDKToolkitToolsOptions["frontend"]>;
-
-export async function POST(req: Request) {
-  const {
-    messages,
-    tools: clientTools,
-  }: {
-    messages: UIMessage[];
-    tools?: FrontendToolDefs;
-  } = await req.json();
-
-  const tools = await aiToolkit.tools({
-    ...(clientTools && { frontend: clientTools }),
-  });
-
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    system:
-      "You create functional HTML artifacts. When the user requests a webpage, interface, visualization, or other visual content, call the artifact tool with a short title and a complete HTML document. When an artifact already exists and the user requests a change, call update_artifact with its id and only the fields that changed. Do not put artifact HTML in a code block.",
-    messages: await convertToModelMessages(
-      unstable_injectInteractableContext(messages),
-    ),
-    stopWhen: stepCountIs(10),
-    tools,
-  });
-
-  return result.toUIMessageStreamResponse();
-}
-
-```
-
-## app/artifact-state.ts
-
-```typescript
-import { z } from "zod";
-
-export const artifactSchema = z.object({
-  title: z.string().describe("A short title for the artifact."),
-  code: z
-    .string()
-    .describe(
-      "A complete HTML document with inline CSS and JavaScript when needed.",
-    ),
-});
-
-export type ArtifactState = z.infer<typeof artifactSchema>;
-
-export const emptyArtifact: ArtifactState = {
-  title: "Untitled artifact",
-  code: "",
-};
-
-export const artifactDescription =
-  "Create an interactive HTML artifact when the user asks for a webpage, interface, visualization, or other visual content. Provide a short title and a complete HTML document.";
-
-```
-
-## app/artifact-surface.tsx
-
-```tsx
-"use client";
-
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
-import {
-  unstable_useInteractable,
-  unstable_useInteractableVersions,
-  useAuiState,
-  type Unstable_InteractableToolRenderProps,
-} from "@assistant-ui/react";
-import {
-  ArrowLeftIcon,
-  CheckIcon,
-  Code2Icon,
-  EyeIcon,
-  FileCode2Icon,
-  HistoryIcon,
-  Loader2Icon,
-  PanelRightOpenIcon,
-  SparklesIcon,
-  XIcon,
-} from "lucide-react";
-import {
-  artifactDescription,
-  artifactSchema,
-  emptyArtifact,
-  type ArtifactState,
-} from "./artifact-state";
-
-type ArtifactSurfaceTarget = {
-  id: string;
-  name: "artifact";
-  messageId: string;
-};
-
-type ArtifactSurfaceContextValue = {
-  active: ArtifactSurfaceTarget | null;
-  open: (target: ArtifactSurfaceTarget) => void;
-  close: () => void;
-  returnToOrigin: () => void;
-};
-
-const ArtifactSurfaceContext =
-  createContext<ArtifactSurfaceContextValue | null>(null);
-
-export function ArtifactSurfaceProvider({ children }: { children: ReactNode }) {
-  const [active, setActive] = useState<ArtifactSurfaceTarget | null>(null);
-
-  const value = useMemo<ArtifactSurfaceContextValue>(
-    () => ({
-      active,
-      open: setActive,
-      close: () => setActive(null),
-      returnToOrigin: () => {
-        const messageId = active?.messageId;
-        setActive(null);
-        if (!messageId) return;
-        requestAnimationFrame(() => {
-          const message = Array.from(
-            document.querySelectorAll<HTMLElement>("[data-message-id]"),
-          ).find((element) => element.dataset.messageId === messageId);
-          message?.scrollIntoView({ behavior: "smooth", block: "center" });
-        });
-      },
-    }),
-    [active],
-  );
-
-  return (
-    <ArtifactSurfaceContext.Provider value={value}>
-      {children}
-    </ArtifactSurfaceContext.Provider>
-  );
-}
-
-export function useArtifactSurface() {
-  const value = useContext(ArtifactSurfaceContext);
-  if (!value) {
-    throw new Error(
-      "useArtifactSurface must be used within ArtifactSurfaceProvider",
-    );
-  }
-  return value;
-}
-
-export function ArtifactTrigger({
-  state,
-  version,
-  id,
-  streaming,
-}: Unstable_InteractableToolRenderProps<ArtifactState>) {
-  const messageId = useAuiState((s) => s.message.id);
-  const { active, open } = useArtifactSurface();
-  const displayState = version && !version.isLatest ? version.state : state;
-  const title = displayState.title || "Untitled artifact";
-  const lineCount = displayState.code
-    ? displayState.code.split(/\r?\n/).length
-    : 0;
-  const isOpen = active?.id === id;
-
-  return (
-    <div className="bg-card my-3 overflow-hidden rounded-xl border shadow-[0_10px_30px_-22px_rgba(24,24,27,0.5)]">
-      <div className="bg-muted text-muted-foreground flex items-center gap-2 border-b px-3 py-2 font-mono text-[10px] tracking-[0.16em] uppercase">
-        <FileCode2Icon className="size-3.5" />
-        HTML artifact
-        {streaming ? (
-          <span className="ml-auto inline-flex items-center gap-1.5 text-amber-700">
-            <Loader2Icon className="size-3 animate-spin" />
-            Writing
-          </span>
-        ) : (
-          <span className="ml-auto inline-flex items-center gap-1.5 text-emerald-700">
-            <CheckIcon className="size-3" />
-            Ready
-          </span>
-        )}
-      </div>
-      <div className="flex items-center gap-4 p-3">
-        <div className="min-w-0 flex-1">
-          <p className="truncate text-sm font-semibold">{title}</p>
-          <p className="text-muted-foreground mt-0.5 text-xs">
-            {lineCount > 0 ? `${lineCount} lines` : "Preparing document"}
-            {version && !version.isLatest ? " · historical version" : ""}
-          </p>
-        </div>
-        <button
-          type="button"
-          data-testid="artifact-trigger"
-          disabled={streaming}
-          onClick={() =>
-            open({
-              id,
-              name: "artifact",
-              messageId,
-            })
-          }
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-9 shrink-0 items-center gap-2 rounded-lg px-3 text-xs font-medium transition-colors disabled:cursor-wait disabled:opacity-50"
-        >
-          <PanelRightOpenIcon className="size-3.5" />
-          {isOpen ? "In workbench" : "Open workbench"}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export function ArtifactSurface() {
-  const { active } = useArtifactSurface();
-  if (!active) return null;
-  return <ArtifactWorkbench key={active.id} target={active} />;
-}
-
-function ArtifactWorkbench({ target }: { target: ArtifactSurfaceTarget }) {
-  const [state, { setState }] = unstable_useInteractable("artifact", {
-    id: target.id,
-    description: artifactDescription,
-    stateSchema: artifactSchema,
-    initialState: emptyArtifact,
-  });
-  const versions = unstable_useInteractableVersions<ArtifactState>(
-    target.id,
-    target.name,
-  );
-  const { close, returnToOrigin } = useArtifactSurface();
-  const [view, setView] = useState<"preview" | "code">("preview");
-  const [historyOpen, setHistoryOpen] = useState(false);
-  const historyRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!historyOpen) return;
-    const dismissPointer = (event: PointerEvent) => {
-      if (!historyRef.current?.contains(event.target as Node)) {
-        setHistoryOpen(false);
-      }
-    };
-    const dismissKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setHistoryOpen(false);
-    };
-    const dismissBlur = () => setHistoryOpen(false);
-    document.addEventListener("pointerdown", dismissPointer);
-    document.addEventListener("keydown", dismissKey);
-    window.addEventListener("blur", dismissBlur);
-    return () => {
-      document.removeEventListener("pointerdown", dismissPointer);
-      document.removeEventListener("keydown", dismissKey);
-      window.removeEventListener("blur", dismissBlur);
-    };
-  }, [historyOpen]);
-
-  return (
-    <aside
-      data-testid="artifact-surface"
-      className="bg-muted fixed inset-0 z-30 flex min-w-0 flex-1 flex-col md:static md:z-0 md:border-l"
-    >
-      <header className="border-border bg-background/90 flex h-14 shrink-0 items-center gap-3 border-b px-3 backdrop-blur md:px-5">
-        <div className="flex min-w-0 items-center gap-2">
-          <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-amber-300 text-zinc-950 shadow-[inset_0_0_0_1px_rgba(24,24,27,0.12)]">
-            <SparklesIcon className="size-3.5" />
-          </span>
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold">
-              {state.title || "Untitled artifact"}
-            </p>
-            <p className="text-muted-foreground font-mono text-[9px] tracking-[0.14em] uppercase">
-              Opened from conversation
-            </p>
-          </div>
-        </div>
-
-        <div className="ml-auto flex items-center gap-1.5">
-          <div className="relative" ref={historyRef}>
-            <button
-              type="button"
-              data-testid="artifact-version-select"
-              aria-label="Artifact version history"
-              aria-expanded={historyOpen}
-              onClick={() => setHistoryOpen((open) => !open)}
-              className="border-border bg-card text-foreground hover:bg-muted inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium"
-            >
-              <HistoryIcon className="size-3.5" />
-              {versions.length} {versions.length === 1 ? "version" : "versions"}
-            </button>
-            {historyOpen && (
-              <div className="border-border bg-card absolute top-9 right-0 z-10 flex w-44 flex-col overflow-hidden rounded-md border py-1 shadow-lg">
-                {versions.map((version, index) => (
-                  <button
-                    key={`${version.origin}-${index}`}
-                    type="button"
-                    onClick={() => {
-                      version.restore();
-                      setHistoryOpen(false);
-                    }}
-                    className="text-foreground hover:bg-muted flex items-center justify-between px-3 py-1.5 text-left text-xs"
-                  >
-                    <span>
-                      v{index + 1} ·{" "}
-                      {version.origin === "user-edit" ? "you" : "assistant"}
-                    </span>
-                    {index === versions.length - 1 && (
-                      <span className="text-muted-foreground font-mono text-[9px] uppercase">
-                        latest
-                      </span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <button
-            type="button"
-            data-testid="artifact-return"
-            aria-label="Return to conversation"
-            onClick={returnToOrigin}
-            className="border-border bg-card text-foreground hover:bg-muted inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium"
-          >
-            <ArrowLeftIcon className="size-3.5" />
-            <span className="hidden sm:inline">Conversation</span>
-          </button>
-          <button
-            type="button"
-            data-testid="artifact-close"
-            onClick={close}
-            className="text-muted-foreground hover:bg-muted hover:text-foreground grid size-8 place-items-center rounded-md"
-            aria-label="Close artifact"
-          >
-            <XIcon className="size-4" />
-          </button>
-        </div>
-      </header>
-
-      <div className="flex min-h-0 flex-1 flex-col p-2 md:p-4">
-        <div className="border-border bg-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border shadow-[0_24px_70px_-44px_rgba(24,24,27,0.55)]">
-          <div className="bg-muted/80 flex shrink-0 items-center gap-1 border-b p-1.5">
-            <button
-              type="button"
-              aria-pressed={view === "preview"}
-              onClick={() => setView("preview")}
-              className={`inline-flex h-8 items-center gap-2 rounded-md px-3 text-xs font-medium transition-colors ${
-                view === "preview"
-                  ? "bg-card text-foreground ring-border shadow-sm ring-1"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <EyeIcon className="size-3.5" />
-              Preview
-            </button>
-            <button
-              type="button"
-              aria-pressed={view === "code"}
-              onClick={() => setView("code")}
-              className={`inline-flex h-8 items-center gap-2 rounded-md px-3 text-xs font-medium transition-colors ${
-                view === "code"
-                  ? "bg-card text-foreground ring-border shadow-sm ring-1"
-                  : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <Code2Icon className="size-3.5" />
-              Source
-            </button>
-            <span className="text-muted-foreground ml-auto pr-2 font-mono text-[9px] tracking-[0.14em] uppercase">
-              Live document
-            </span>
-          </div>
-
-          {view === "preview" ? (
-            <iframe
-              data-testid="artifact-preview"
-              title={`Preview of ${state.title || "artifact"}`}
-              srcDoc={state.code}
-              sandbox="allow-scripts allow-forms"
-              className="min-h-0 flex-1 bg-white"
-            />
-          ) : (
-            <div className="flex min-h-0 flex-1 flex-col">
-              <input
-                aria-label="Artifact title"
-                value={state.title}
-                onChange={(event) =>
-                  setState((previous) => ({
-                    ...previous,
-                    title: event.target.value,
-                  }))
-                }
-                className="placeholder:text-muted-foreground h-11 shrink-0 border-b px-4 text-sm font-semibold outline-none"
-                placeholder="Artifact title"
-              />
-              <textarea
-                data-testid="artifact-code-editor"
-                aria-label="Artifact HTML source"
-                value={state.code}
-                onChange={(event) =>
-                  setState((previous) => ({
-                    ...previous,
-                    code: event.target.value,
-                  }))
-                }
-                spellCheck={false}
-                className="min-h-0 flex-1 resize-none bg-zinc-950 p-4 font-mono text-[13px] leading-6 text-zinc-100 outline-none selection:bg-amber-300 selection:text-zinc-950"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </aside>
-  );
-}
-
-```
-
-## 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: "assistant-ui Artifacts Example",
-  description: "Example using assistant-ui with HTML artifact rendering",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className="h-dvh">{children}</body>
-    </html>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  AssistantRuntimeProvider,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-  Tools,
-  unstable_Interactables,
-  useAui,
-} from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
-import { lastAssistantMessageIsCompleteWithToolCalls } from "ai";
-import {
-  ArtifactSurface,
-  ArtifactSurfaceProvider,
-  useArtifactSurface,
-} from "./artifact-surface";
-import toolkit from "./toolkit";
-
-function ArtifactExperience() {
-  const { active } = useArtifactSurface();
-
-  return (
-    <main className="bg-background flex h-full min-h-0 overflow-hidden">
-      <section
-        className={
-          active
-            ? "bg-background hidden min-w-0 md:block md:w-[min(44vw,42rem)] md:shrink-0"
-            : "bg-background min-w-0 flex-1"
-        }
-      >
-        <Thread />
-      </section>
-      <ArtifactSurface />
-    </main>
-  );
-}
-
-function ArtifactScopes() {
-  const aui = useAui();
-  const config = AuiConfig({
-    tools: Tools({ toolkit }),
-    unstable_interactables: unstable_Interactables(),
-    suggestions: Suggestions([
-      {
-        title: "Build a landing page",
-        label: "with modern styling",
-        prompt:
-          "Build a beautiful landing page for a coffee shop with modern CSS.",
-      },
-      {
-        title: "Create a calculator",
-        label: "with HTML and JavaScript",
-        prompt:
-          "Create a calculator app with HTML, CSS, and JavaScript that supports basic arithmetic.",
-      },
-    ]),
-  });
-
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <ArtifactSurfaceProvider>
-        <ArtifactExperience />
-      </ArtifactSurfaceProvider>
-    </AuiProvider>
-  );
-}
-
-export default function Home() {
-  const runtime = useChatRuntime({
-    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      <ArtifactScopes />
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/toolkit.tsx
-
-```tsx
-"use generative";
-
-import { defineToolkit, unstable_interactableTool } from "@assistant-ui/react";
-import { ArtifactTrigger } from "./artifact-surface";
-import { artifactDescription, artifactSchema } from "./artifact-state";
-
-export default defineToolkit({
-  artifact: unstable_interactableTool({
-    description: artifactDescription,
-    stateSchema: artifactSchema,
-    render: (props) => <ArtifactTrigger {...props} />,
-  }),
-});
-
-```
-
-## 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",
-    "@assistant-ui/react-markdown",
-  ],
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-artifacts",
-  "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"
-  }
-}
-
-```
-
-## 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/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-