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

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

@@ -1,782 +0,0 @@
-# Example: with-mcp
-
-## app/app/api/chat/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import { frontendTools } from "@assistant-ui/ai-sdk";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { messages, system, tools } = await req.json();
-  const result = streamText({
-    model: openai("gpt-5.6-luna"),
-    messages: await convertToModelMessages(messages),
-    system,
-    tools: { ...frontendTools(tools) },
-  });
-  return result.toUIMessageStreamResponse();
-}
-
-```
-
-## app/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/app/layout.tsx
-
-```tsx
-import type { ReactNode } from "react";
-import "./globals.css";
-
-export const metadata = {
-  title: "react-mcp",
-};
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en" className="h-full">
-      <body className="bg-background text-foreground min-h-full antialiased">
-        {children}
-      </body>
-    </html>
-  );
-}
-
-```
-
-## app/app/mcp/callback/page.tsx
-
-```tsx
-"use client";
-
-import { useRouter } from "next/navigation";
-import { McpOAuthCallback } from "@assistant-ui/react-mcp";
-import { Providers } from "../../providers";
-
-export default function CallbackPage() {
-  const router = useRouter();
-  return (
-    <Providers>
-      <h1>Completing OAuth…</h1>
-      <McpOAuthCallback
-        onComplete={() => router.replace("/")}
-        onError={(err) => {
-          console.error("OAuth callback failed:", err);
-        }}
-      >
-        {(result) => (
-          <pre>
-            {JSON.stringify(
-              {
-                status: result.status,
-                serverId: result.serverId,
-                error: result.error?.message ?? null,
-              },
-              null,
-              2,
-            )}
-          </pre>
-        )}
-      </McpOAuthCallback>
-    </Providers>
-  );
-}
-
-```
-
-## app/app/page.tsx
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import { McpConfigDialog } from "@/components/assistant-ui/mcp-config";
-import { Providers } from "./providers";
-
-export default function Home() {
-  return (
-    <Providers>
-      <main className="grid h-dvh grid-rows-[auto_1fr]">
-        <header className="flex items-center justify-between gap-3 border-b px-4 py-3">
-          <div className="flex flex-col">
-            <h1 className="text-base font-semibold tracking-tight">
-              react-mcp
-            </h1>
-            <p className="text-muted-foreground text-xs">
-              Connect MCP servers, then chat — connected tools are exposed to
-              the model automatically.
-            </p>
-          </div>
-          <McpConfigDialog />
-        </header>
-        <Thread />
-      </main>
-    </Providers>
-  );
-}
-
-```
-
-## app/app/providers.tsx
-
-```tsx
-"use client";
-
-import type { ReactNode } from "react";
-import { AssistantRuntimeProvider, AuiConfig } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/ai-sdk";
-import { McpManagerResource, defineConnector } from "@assistant-ui/react-mcp";
-
-const connectors = [
-  defineConnector({
-    id: "local-test",
-    name: "Local test MCP",
-    url: "http://localhost:8787/mcp",
-    auth: { type: "oauth", scopes: ["mcp"] },
-  }),
-];
-
-export function Providers({ children }: { children: ReactNode }) {
-  const config = AuiConfig({ mcp: McpManagerResource({ connectors }) });
-  const runtime = useChatRuntime();
-  return (
-    <AssistantRuntimeProvider runtime={runtime} config={config}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/next.config.ts
-
-```typescript
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  transpilePackages: [
-    "@assistant-ui/react-mcp",
-    "@assistant-ui/store",
-    "@assistant-ui/tap",
-    "@assistant-ui/ui",
-  ],
-  allowedDevOrigins: ["*"],
-};
-
-export default nextConfig;
-
-```
-
-## app/tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "typeRoots": [
-      "./node_modules/@types",
-      "../node_modules/@types",
-      "../../../node_modules/@types",
-      "../node_modules/@assistant-ui/x-buildutils/types"
-    ],
-    "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": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": ["node_modules"]
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/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"
-  }
-}
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-mcp",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "concurrently -n server,app -c blue,magenta \"pnpm dev:server\" \"pnpm dev:app\"",
-    "dev:server": "tsx watch server/server.ts",
-    "dev:app": "next dev app --port 3010",
-    "build": "next build app",
-    "start:server": "tsx server/server.ts"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.46",
-    "@assistant-ui/ai-sdk": "workspace:*",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/react-mcp": "workspace:*",
-    "@assistant-ui/store": "workspace:*",
-    "@assistant-ui/tap": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "@modelcontextprotocol/express": "^2.0.0",
-    "@modelcontextprotocol/node": "^2.0.0",
-    "@modelcontextprotocol/server": "^2.0.0",
-    "@modelcontextprotocol/server-legacy": "^2.0.0",
-    "ai": "^7.0.77",
-    "assistant-stream": "workspace:*",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cors": "^2.8.6",
-    "express": "^5.2.1",
-    "lucide-react": "^1.33.0",
-    "next": "^16.3.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "tailwind-merge": "^3.6.0",
-    "zod": "^4.4.3"
-  },
-  "devDependencies": {
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.3",
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "concurrently": "^10.0.5",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tsx": "^4.23.12",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# with-mcp
-
-Minimal harness for `@assistant-ui/react-mcp`. Runs a local MCP server with
-OAuth (PKCE + DCR) under `server/`, and a Next.js client under `app/` that
-uses the package's primitives.
-
-## Run
-
-```sh
-cd examples/with-mcp
-pnpm dev
-```
-
-This starts both the server (`http://localhost:8787`) and the Next.js app
-(`http://localhost:3010`).
-
-Open the app, click **Connect** on the "Local test MCP" connector, then
-**Authorize ↗** to walk through the OAuth flow. After redirect the server
-transitions to `connected` and the `echo` / `fingerprint` tools appear.
-
-## Notes
-
-- The test server is in-memory: tokens, clients, and codes don't persist
-  across restarts.
-- OAuth auto-approves (no consent screen). PKCE verification, DCR, and
-  refresh-token rotation still run end-to-end.
-- This example is intentionally unstyled; primitives are unstyled. See
-  `app/app/McpUI.tsx` for raw composition.
-
-```
-
-## server/server.ts
-
-```typescript
-/**
- * Standalone test MCP server with OAuth.
- *
- * - OAuth 2.1 authorization server (PKCE + DCR) via @modelcontextprotocol/server-legacy's auth router.
- * - One MCP tool, `echo`, that returns its input.
- * - All state in memory; for local development / E2E only.
- *
- * Run: `pnpm dev:server` (defaults to http://localhost:8787)
- */
-import express from "express";
-import cors from "cors";
-import { randomBytes, randomUUID, createHash } from "node:crypto";
-import { McpServer } from "@modelcontextprotocol/server";
-import type {
-  AuthInfo,
-  OAuthClientInformationFull,
-  OAuthTokens,
-} from "@modelcontextprotocol/server";
-import { NodeStreamableHTTPServerTransport } from "@modelcontextprotocol/node";
-import { mcpAuthRouter } from "@modelcontextprotocol/server-legacy/auth";
-import type {
-  OAuthServerProvider,
-  OAuthRegisteredClientsStore,
-} from "@modelcontextprotocol/server-legacy/auth";
-import { requireBearerAuth } from "@modelcontextprotocol/express";
-import { z } from "zod";
-
-const PORT = Number(process.env.PORT ?? 8787);
-const ISSUER = process.env.ISSUER ?? `http://localhost:${PORT}`;
-
-// ───────────────────────────────────────────────────────────────────────────
-// In-memory OAuth provider
-// ───────────────────────────────────────────────────────────────────────────
-
-type AuthorizationGrant = {
-  clientId: string;
-  redirectUri: string;
-  codeChallenge: string;
-  scopes: string[];
-  state?: string;
-};
-
-const clients = new Map<string, OAuthClientInformationFull>();
-const authCodes = new Map<string, AuthorizationGrant>();
-const tokens = new Map<string, AuthInfo>();
-const refreshTokens = new Map<string, { clientId: string; scopes: string[] }>();
-
-const clientsStore: OAuthRegisteredClientsStore = {
-  async getClient(clientId) {
-    return clients.get(clientId);
-  },
-  async registerClient(client) {
-    const clientId = `client_${randomUUID()}`;
-    const full: OAuthClientInformationFull = {
-      ...client,
-      client_id: clientId,
-      client_id_issued_at: Math.floor(Date.now() / 1000),
-    };
-    clients.set(clientId, full);
-    return full;
-  },
-};
-
-const provider: OAuthServerProvider = {
-  get clientsStore() {
-    return clientsStore;
-  },
-
-  async authorize(client, params, res) {
-    // Auto-approve for the test server.
-    const code = randomBytes(24).toString("base64url");
-    authCodes.set(code, {
-      clientId: client.client_id,
-      redirectUri: params.redirectUri,
-      codeChallenge: params.codeChallenge,
-      scopes: params.scopes ?? [],
-      ...(params.state !== undefined ? { state: params.state } : {}),
-    });
-
-    const target = new URL(params.redirectUri);
-    target.searchParams.set("code", code);
-    if (params.state) target.searchParams.set("state", params.state);
-    res.redirect(target.toString());
-  },
-
-  async challengeForAuthorizationCode(_client, authorizationCode) {
-    const grant = authCodes.get(authorizationCode);
-    if (!grant) throw new Error("invalid authorization code");
-    return grant.codeChallenge;
-  },
-
-  async exchangeAuthorizationCode(
-    client,
-    authorizationCode,
-  ): Promise<OAuthTokens> {
-    const grant = authCodes.get(authorizationCode);
-    if (!grant) throw new Error("invalid authorization code");
-    if (grant.clientId !== client.client_id) {
-      throw new Error("authorization code/client mismatch");
-    }
-    authCodes.delete(authorizationCode);
-
-    const accessToken = randomBytes(32).toString("base64url");
-    const refreshToken = randomBytes(32).toString("base64url");
-    tokens.set(accessToken, {
-      token: accessToken,
-      clientId: client.client_id,
-      scopes: grant.scopes,
-      expiresAt: Math.floor(Date.now() / 1000) + 60 * 60,
-    });
-    refreshTokens.set(refreshToken, {
-      clientId: client.client_id,
-      scopes: grant.scopes,
-    });
-    return {
-      access_token: accessToken,
-      refresh_token: refreshToken,
-      token_type: "Bearer",
-      expires_in: 60 * 60,
-      scope: grant.scopes.join(" "),
-    };
-  },
-
-  async exchangeRefreshToken(
-    client,
-    refreshToken,
-    scopes,
-  ): Promise<OAuthTokens> {
-    const grant = refreshTokens.get(refreshToken);
-    if (!grant) throw new Error("invalid refresh token");
-    if (grant.clientId !== client.client_id) {
-      throw new Error("refresh token/client mismatch");
-    }
-    const newAccess = randomBytes(32).toString("base64url");
-    const newRefresh = randomBytes(32).toString("base64url");
-    const effectiveScopes = scopes ?? grant.scopes;
-    refreshTokens.delete(refreshToken);
-    tokens.set(newAccess, {
-      token: newAccess,
-      clientId: client.client_id,
-      scopes: effectiveScopes,
-      expiresAt: Math.floor(Date.now() / 1000) + 60 * 60,
-    });
-    refreshTokens.set(newRefresh, {
-      clientId: client.client_id,
-      scopes: effectiveScopes,
-    });
-    return {
-      access_token: newAccess,
-      refresh_token: newRefresh,
-      token_type: "Bearer",
-      expires_in: 60 * 60,
-      scope: effectiveScopes.join(" "),
-    };
-  },
-
-  async verifyAccessToken(token): Promise<AuthInfo> {
-    const info = tokens.get(token);
-    if (!info) throw new Error("invalid access token");
-    return info;
-  },
-};
-
-// ───────────────────────────────────────────────────────────────────────────
-// MCP server
-// ───────────────────────────────────────────────────────────────────────────
-
-function buildMcpServer(): McpServer {
-  const server = new McpServer({ name: "aui-mcp-test", version: "0.0.1" });
-  server.registerTool(
-    "echo",
-    {
-      title: "Echo",
-      description: "Echo back the provided text.",
-      inputSchema: z.object({ text: z.string().describe("Text to echo back") }),
-      annotations: { readOnlyHint: true, openWorldHint: false },
-    },
-    async ({ text }) => ({
-      content: [{ type: "text" as const, text: `echo: ${text}` }],
-    }),
-  );
-  server.registerTool(
-    "fingerprint",
-    {
-      title: "Fingerprint",
-      description:
-        "Return a deterministic fingerprint of a string (sha256 hex).",
-      inputSchema: z.object({ input: z.string() }),
-      annotations: { readOnlyHint: true, openWorldHint: false },
-    },
-    async ({ input }) => ({
-      content: [
-        {
-          type: "text" as const,
-          text: createHash("sha256").update(input).digest("hex"),
-        },
-      ],
-    }),
-  );
-  return server;
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-// Express wiring
-// ───────────────────────────────────────────────────────────────────────────
-
-async function main() {
-  const app = express();
-
-  app.use(
-    cors({
-      origin: true,
-      credentials: false,
-      // Without these the browser won't expose MCP session/auth headers.
-      exposedHeaders: ["Mcp-Session-Id", "WWW-Authenticate"],
-      allowedHeaders: [
-        "Authorization",
-        "Content-Type",
-        "Mcp-Session-Id",
-        "Accept",
-        "mcp-protocol-version",
-      ],
-    }),
-  );
-
-  app.use(
-    mcpAuthRouter({
-      provider,
-      issuerUrl: new URL(ISSUER),
-      scopesSupported: ["mcp"],
-      resourceName: "aui-mcp-test",
-    }),
-  );
-
-  const bearer = requireBearerAuth({ verifier: provider });
-
-  app.post("/mcp", bearer, async (req, res) => {
-    try {
-      const transport = new NodeStreamableHTTPServerTransport({
-        sessionIdGenerator: undefined,
-      });
-      res.on("close", () => transport.close());
-      const server = buildMcpServer();
-      await server.connect(transport);
-      await transport.handleRequest(req, res);
-    } catch (err) {
-      console.error("MCP request error:", err);
-      if (!res.headersSent) res.status(500).end();
-    }
-  });
-
-  app.get("/health", (_req, res) => res.json({ ok: true }));
-
-  app.listen(PORT, () => {
-    console.log(`MCP test server listening on ${ISSUER}`);
-    console.log(
-      `  - OAuth metadata: ${ISSUER}/.well-known/oauth-authorization-server`,
-    );
-    console.log(`  - MCP endpoint:   ${ISSUER}/mcp`);
-  });
-}
-
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "types": ["node"],
-    "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/*"],
-      "@/*": ["./app/*"]
-    }
-  },
-  "include": [
-    "app/next-env.d.ts",
-    "app/**/*.ts",
-    "app/**/*.tsx",
-    "server/**/*.ts",
-    "app/.next/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
-}
-
-```
-