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

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

@@ -1,812 +0,0 @@
-# Example: with-tanstack
-
-## .cta.json
-
-```json
-{
-  "projectName": "with-tanstack",
-  "mode": "file-router",
-  "typescript": true,
-  "tailwind": true,
-  "packageManager": "pnpm",
-  "addOnOptions": {},
-  "git": true,
-  "version": 1,
-  "framework": "react-cra",
-  "chosenAddOns": ["nitro", "start"]
-}
-
-```
-
-## components.json
-
-```json
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/styles.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-tanstack",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev --port 3000",
-    "build": "vite build",
-    "serve": "vite preview"
-  },
-  "dependencies": {
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-router": "^1.170.32",
-    "@tanstack/react-start": "^1.168.49",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "nitro": "^3.0.260311-beta",
-    "openai": "^7.5.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.3",
-    "vite-tsconfig-paths": "^6.1.1"
-  },
-  "devDependencies": {
-    "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "@vitejs/plugin-react": "^6.1.0",
-    "typescript": "^7.0.2",
-    "vite": "^8.2.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# TanStack Start Integration
-
-This example demonstrates how to use assistant-ui with TanStack Start (TanStack Router + Vite).
-
-## Quick Start
-
-### Using CLI (Recommended)
-
-```bash
-npx assistant-ui@latest create my-app --example with-tanstack
-cd my-app
-```
-
-### Environment Variables
-
-Create `.env`:
-
-```
-OPENAI_API_KEY=sk-...
-```
-
-### Run
-
-```bash
-npm install
-npm run dev
-```
-
-## Features
-
-- TanStack Start (TanStack Router + Vite)
-- Full-stack React with server functions
-- OpenAI streaming chat
-- Markdown message rendering
-
-## Related Documentation
-
-- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
-- [TanStack Start Documentation](https://tanstack.com/start)
-
-```
-
-## src/components/MyRuntimeProvider.tsx
-
-```tsx
-import { useState, type ReactNode } from "react";
-import {
-  useExternalStoreRuntime,
-  type ThreadMessageLike,
-  type AppendMessage,
-  AssistantRuntimeProvider,
-} from "@assistant-ui/react";
-import { chatStream } from "@/server/chat";
-
-type MyMessage = {
-  id: string;
-  role: "user" | "assistant";
-  content: string;
-};
-
-const generateId = () => Math.random().toString(36).substring(2, 9);
-
-const convertMessage = (message: MyMessage): ThreadMessageLike => {
-  return {
-    id: message.id,
-    role: message.role,
-    content: [{ type: "text", text: message.content }],
-  };
-};
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: ReactNode;
-}>) {
-  const [isRunning, setIsRunning] = useState(false);
-  const [messages, setMessages] = useState<MyMessage[]>([]);
-
-  const onNew = async (message: AppendMessage) => {
-    if (message.content[0]?.type !== "text")
-      throw new Error("Only text messages are supported");
-
-    const input = message.content[0].text;
-    const userMessage: MyMessage = {
-      id: generateId(),
-      role: "user",
-      content: input,
-    };
-
-    // Add user message
-    const updatedMessages = [...messages, userMessage];
-    setMessages(updatedMessages);
-
-    // Create placeholder for assistant message
-    setIsRunning(true);
-    const assistantId = generateId();
-    const assistantMessage: MyMessage = {
-      id: assistantId,
-      role: "assistant",
-      content: "",
-    };
-    setMessages((prev) => [...prev, assistantMessage]);
-
-    try {
-      // Stream response using async generator
-      const stream = await chatStream({
-        data: {
-          messages: updatedMessages.map((m) => ({
-            role: m.role,
-            content: m.content,
-          })),
-        },
-      });
-
-      // Handle streaming chunks
-      for await (const chunk of stream) {
-        setMessages((prev) =>
-          prev.map((m) =>
-            m.id === assistantId ? { ...m, content: m.content + chunk } : m,
-          ),
-        );
-      }
-    } catch (error) {
-      console.error("Chat error:", error);
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === assistantId
-            ? { ...m, content: "Sorry, an error occurred. Please try again." }
-            : m,
-        ),
-      );
-    } finally {
-      setIsRunning(false);
-    }
-  };
-
-  const runtime = useExternalStoreRuntime({
-    isRunning,
-    messages,
-    convertMessage,
-    onNew,
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## src/router.tsx
-
-```tsx
-import { createRouter } from "@tanstack/react-router";
-
-// Import the generated route tree
-import { routeTree } from "./routeTree.gen";
-
-// Create a new router instance
-export const getRouter = () => {
-  const router = createRouter({
-    routeTree,
-    scrollRestoration: true,
-    defaultPreloadStaleTime: 0,
-  });
-
-  return router;
-};
-
-```
-
-## src/routes/__root.tsx
-
-```tsx
-import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
-
-import appCss from "../styles.css?url";
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: "utf-8",
-      },
-      {
-        name: "viewport",
-        content: "width=device-width, initial-scale=1",
-      },
-      {
-        title: "assistant-ui + TanStack Start",
-      },
-    ],
-    links: [
-      {
-        rel: "stylesheet",
-        href: appCss,
-      },
-    ],
-  }),
-
-  shellComponent: RootDocument,
-});
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body className="bg-background text-foreground">
-        {children}
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-```
-
-## src/routes/index.tsx
-
-```tsx
-import { createFileRoute } from "@tanstack/react-router";
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  useAui,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-} from "@assistant-ui/react";
-import { MyRuntimeProvider } from "@/components/MyRuntimeProvider";
-
-export const Route = createFileRoute("/")({ component: App });
-
-function ThreadWithSuggestions() {
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Hello!",
-        label: "start a conversation",
-        prompt: "Hello! What can you help me with?",
-      },
-      {
-        title: "What can you do?",
-        label: "tell me your capabilities",
-        prompt: "What kinds of things can you help me with?",
-      },
-    ]),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-
-function App() {
-  return (
-    <MyRuntimeProvider>
-      <main className="h-dvh">
-        <ThreadWithSuggestions />
-      </main>
-    </MyRuntimeProvider>
-  );
-}
-
-```
-
-## src/routeTree.gen.ts
-
-```typescript
-/* eslint-disable */
-
-// @ts-nocheck
-
-// noinspection JSUnusedGlobalSymbols
-
-// This file was automatically generated by TanStack Router.
-// You should NOT make any changes in this file as it will be overwritten.
-// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
-
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as IndexRouteImport } from './routes/index'
-
-const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
-  getParentRoute: () => rootRouteImport,
-} as any)
-
-export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
-}
-export interface FileRoutesByTo {
-  '/': typeof IndexRoute
-}
-export interface FileRoutesById {
-  __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
-}
-export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
-  fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
-  fileRoutesById: FileRoutesById
-}
-export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute
-}
-
-declare module '@tanstack/react-router' {
-  interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
-      preLoaderRoute: typeof IndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-  }
-}
-
-const rootRouteChildren: RootRouteChildren = {
-  IndexRoute: IndexRoute,
-}
-export const routeTree = rootRouteImport
-  ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>()
-
-import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
-  interface Register {
-    ssr: true
-    router: Awaited<ReturnType<typeof getRouter>>
-  }
-}
-
-```
-
-## src/server/chat.ts
-
-```typescript
-import { createServerFn } from "@tanstack/react-start";
-import OpenAI from "openai";
-
-type ChatMessage = {
-  role: "user" | "assistant" | "system";
-  content: string;
-};
-
-type ChatInput = {
-  messages: ChatMessage[];
-};
-
-export const chatStream = createServerFn({ method: "POST" })
-  .inputValidator((data: ChatInput) => data)
-  .handler(async function* ({ data }) {
-    const openai = new OpenAI({
-      apiKey: process.env.OPENAI_API_KEY,
-    });
-
-    const stream = await openai.chat.completions.create({
-      model: "gpt-5.6-luna",
-      messages: data.messages,
-      stream: true,
-    });
-
-    for await (const chunk of stream) {
-      const content = chunk.choices[0]?.delta?.content;
-      if (content) {
-        yield content;
-      }
-    }
-  });
-
-```
-
-## src/styles.css
-
-```css
-@import "tailwindcss";
-
-@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);
-}
-
-: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);
-}
-
-.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);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground m-0;
-    font-family:
-      -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-      sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  code {
-    font-family:
-      source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  }
-}
-
-/* Animation utilities for assistant-ui */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slide-in-from-bottom-1 {
-  from {
-    transform: translateY(0.25rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-from-bottom-2 {
-  from {
-    transform: translateY(0.5rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-from-bottom-4 {
-  from {
-    transform: translateY(1rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes zoom-in-95 {
-  from {
-    transform: scale(0.95);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes zoom-out-95 {
-  to {
-    transform: scale(0.95);
-  }
-}
-
-@keyframes fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slide-in-from-top-2 {
-  from {
-    transform: translateY(-0.5rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slide-in-from-left-2 {
-  from {
-    transform: translateX(-0.5rem);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-in-from-right-2 {
-  from {
-    transform: translateX(0.5rem);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.animate-in {
-  animation-duration: 150ms;
-  animation-timing-function: ease-out;
-  animation-fill-mode: both;
-}
-
-.fade-in {
-  animation-name: fade-in;
-}
-
-.fade-in-0 {
-  animation-name: fade-in;
-}
-
-.zoom-in-95 {
-  animation-name: zoom-in-95;
-}
-
-.slide-in-from-bottom-1 {
-  animation-name: fade-in, slide-in-from-bottom-1;
-}
-
-.slide-in-from-bottom-2 {
-  animation-name: fade-in, slide-in-from-bottom-2;
-}
-
-.slide-in-from-bottom-4 {
-  animation-name: fade-in, slide-in-from-bottom-4;
-}
-
-.slide-in-from-top-2 {
-  animation-name: fade-in, slide-in-from-top-2;
-}
-
-.slide-in-from-left-2 {
-  animation-name: fade-in, slide-in-from-left-2;
-}
-
-.slide-in-from-right-2 {
-  animation-name: fade-in, slide-in-from-right-2;
-}
-
-[data-state="closed"].animate-out {
-  animation-duration: 150ms;
-  animation-timing-function: ease-in;
-  animation-fill-mode: both;
-}
-
-[data-state="closed"].fade-out-0 {
-  animation-name: fade-out;
-}
-
-[data-state="closed"].zoom-out-95 {
-  animation-name: zoom-out-95;
-}
-
-.delay-100 {
-  animation-delay: 100ms;
-}
-
-.fill-mode-both {
-  animation-fill-mode: both;
-}
-
-.duration-150 {
-  animation-duration: 150ms;
-}
-
-.duration-300 {
-  animation-duration: 300ms;
-}
-
-.ease-out {
-  animation-timing-function: ease-out;
-}
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/base",
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/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"],
-  "exclude": ["node_modules"]
-}
-
-```
-
-## vite.config.ts
-
-```typescript
-import { defineConfig } from "vite";
-import { tanstackStart } from "@tanstack/react-start/plugin/vite";
-import viteReact from "@vitejs/plugin-react";
-import viteTsConfigPaths from "vite-tsconfig-paths";
-import tailwindcss from "@tailwindcss/vite";
-import { nitro } from "nitro/vite";
-
-const config = defineConfig({
-  build: {
-    rolldownOptions: {
-      external: ["shiki/wasm"],
-    },
-  },
-  ssr: {
-    external: ["shiki/wasm"],
-  },
-  plugins: [
-    nitro({
-      output: {
-        dir: "dist",
-      },
-      // Nitro enables wasm by default, which adds the "unwasm" export
-      // condition. That routes `shiki/wasm` to its raw `onig.wasm` file, which
-      // Vite/Rolldown cannot load during the SSR build ([UNLOADABLE_DEPENDENCY]).
-      // Disabling it resolves `shiki/wasm` to its base64-inlined default — same
-      // Oniguruma engine, no separate .wasm asset.
-      wasm: false,
-    }),
-    viteTsConfigPaths({
-      projects: ["./tsconfig.json", "../../packages/ui/tsconfig.json"],
-    }),
-    tailwindcss(),
-    tanstackStart(),
-    viteReact(),
-  ],
-});
-
-export default config;
-
-```
-