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

package/.docs/organized/code-examples/with-react-hook-form.md

@@ -1,727 +0,0 @@
-# Example: with-react-hook-form
-
-## app/api/chat/route.ts
-
-```typescript
-import { createOpenAI } from "@ai-sdk/openai";
-import { frontendTools } from "@assistant-ui/ai-sdk";
-import { convertToModelMessages, streamText } from "ai";
-
-export const maxDuration = 30;
-
-const openai = createOpenAI({
-  ...(process.env.OPENAI_BASE_URL && { baseURL: process.env.OPENAI_BASE_URL }),
-  ...(process.env.OPENAI_API_KEY && { apiKey: process.env.OPENAI_API_KEY }),
-});
-
-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/globals.css
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../../../packages/ui/src";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
-  --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 "./globals.css";
-
-import { Geist, Geist_Mono } from "next/font/google";
-import { MyRuntimeProvider } from "./MyRuntimeProvider";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <MyRuntimeProvider>
-      <html lang="en" suppressHydrationWarning>
-        <head>
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `(function(){try{var t=new URLSearchParams(location.search).get("theme");var dark=t?t==="dark":matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.classList.toggle("dark",dark);}catch(e){}})();`,
-            }}
-          />
-        </head>
-        <body
-          className={`${geistSans.variable} ${geistMono.variable} h-dvh font-sans antialiased`}
-        >
-          {children}
-        </body>
-      </html>
-    </MyRuntimeProvider>
-  );
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-"use client";
-
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/ai-sdk";
-
-export function MyRuntimeProvider({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  const runtime = useChatRuntime();
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { SignupForm } from "@/components/SignupForm";
-import { Thread } from "@/components/assistant-ui/thread";
-import { Form } from "@/components/ui/form";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import { useAssistantForm } from "@assistant-ui/react-hook-form";
-import {
-  useAssistantInstructions,
-  useAui,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-} from "@assistant-ui/react";
-
-const SetFormFieldTool = () => {
-  return (
-    <p className="text-center font-mono text-sm font-bold text-blue-500">
-      set_form_field(...)
-    </p>
-  );
-};
-
-const SubmitFormTool = () => {
-  return (
-    <p className="text-center font-mono text-sm font-bold text-blue-500">
-      submit_form(...)
-    </p>
-  );
-};
-
-const panelStyle = { overflow: "hidden" } as const;
-
-export default function Home() {
-  useAssistantInstructions("Help users sign up for Simon's hackathon.");
-  const form = useAssistantForm({
-    defaultValues: {
-      firstName: "",
-      lastName: "",
-      email: "",
-      cityAndCountry: "",
-      projectIdea: "",
-      proficientTechnologies: "",
-    },
-    assistant: {
-      tools: {
-        set_form_field: {
-          render: SetFormFieldTool,
-        },
-        submit_form: {
-          render: SubmitFormTool,
-        },
-      },
-    },
-  });
-
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "Fill out the form",
-        label: "with sample data",
-        prompt: "Please fill out the signup form with sample data for me.",
-      },
-      {
-        title: "Help me register",
-        label: "for the hackathon",
-        prompt:
-          "I'd like to sign up for the hackathon. My name is Jane Doe and my email is jane@example.com.",
-      },
-    ]),
-  });
-
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <ResizablePanelGroup orientation="horizontal">
-        <ResizablePanel defaultSize={60} minSize={40} style={panelStyle}>
-          <div className="bg-muted/30 h-full overflow-y-auto">
-            <main className="mx-auto w-full max-w-2xl px-4 py-10 sm:px-6 sm:py-12">
-              <header className="mb-8 space-y-2">
-                <p className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
-                  Simon&apos;s Hackathon
-                </p>
-                <h1 className="text-3xl font-semibold tracking-tight">
-                  Apply to join
-                </h1>
-                <p className="text-muted-foreground">
-                  A weekend hackathon on AI UX. Be the first to get an invite.
-                </p>
-              </header>
-
-              <Form {...form}>
-                <SignupForm />
-              </Form>
-            </main>
-          </div>
-        </ResizablePanel>
-        <ResizableHandle />
-        <ResizablePanel defaultSize={40} minSize={30} style={panelStyle}>
-          <Thread />
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </AuiProvider>
-  );
-}
-
-```
-
-## 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"
-  }
-}
-
-```
-
-## components/SignupForm.tsx
-
-```tsx
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import { type FC, useState } from "react";
-import { useFormContext } from "react-hook-form";
-import { submitSignup } from "../lib/submitSignup";
-
-export const SignupForm: FC = () => {
-  const form = useFormContext();
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-
-  const onSubmit = async (values: object) => {
-    try {
-      setIsSubmitting(true);
-      await submitSignup(values);
-      setIsSubmitted(true);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  if (isSubmitted) {
-    return (
-      <Card>
-        <CardContent className="flex flex-col items-center gap-3 py-10 text-center">
-          <CheckCircle2 className="size-10 text-green-600" />
-          <p className="text-lg font-semibold">You&apos;re signed up!</p>
-          <p className="text-muted-foreground text-sm">
-            Thanks for registering. You&apos;ll hear from us soon.
-          </p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
-      <input type="hidden" {...form.register("hidden")} />
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Personal information</CardTitle>
-          <CardDescription>Tell us a bit about yourself.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2">
-            <FormField
-              control={form.control}
-              name="firstName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>First name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Jane" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="lastName"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Last name</FormLabel>
-                  <FormControl>
-                    <Input placeholder="Doe" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="jane@example.com"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="cityAndCountry"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>City and country</FormLabel>
-                <FormControl>
-                  <Input placeholder="San Francisco, USA" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </CardContent>
-
-        <Separator />
-
-        <CardHeader>
-          <CardTitle>Your project</CardTitle>
-          <CardDescription>
-            Share what you&apos;d like to build at the hackathon.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <FormField
-            control={form.control}
-            name="projectIdea"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Project idea</FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder="A multiplayer drawing game powered by AI..."
-                    className="min-h-24"
-                    {...field}
-                  />
-                </FormControl>
-                <FormDescription>
-                  A short pitch is fine. Leave blank if you&apos;re still
-                  brainstorming.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name="proficientTechnologies"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Technologies</FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder="Next.js, Tailwind CSS, Postgres"
-                    {...field}
-                  />
-                </FormControl>
-                <FormDescription>
-                  Comma-separated list of what you&apos;re comfortable with.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </CardContent>
-
-        <CardFooter className="bg-card/95 supports-[backdrop-filter]:bg-card/75 sticky bottom-0 justify-end gap-3 border-t backdrop-blur">
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting && <Loader2 className="size-4 animate-spin" />}
-            {isSubmitting ? "Submitting..." : "Submit"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </form>
-  );
-};
-
-```
-
-## lib/submitSignup.tsx
-
-```tsx
-"use server";
-
-export const submitSignup = async (data: object) => {
-  const res = await fetch(process.env.ASSISTANT_UI_SUBMIT_SIGNUP_ENDPOINT!, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  });
-  return res.json();
-};
-
-```
-
-## next.config.ts
-
-```typescript
-import { withAui } from "@assistant-ui/next";
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {/* config options here */};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-react-hook-form",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@ai-sdk/openai": "^4.0.46",
-    "@assistant-ui/ai-sdk": "workspace:*",
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-hook-form": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "@hookform/resolvers": "^5.9.1",
-    "ai": "^7.0.77",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "next": "^16.3.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-hook-form": "^7.86.0",
-    "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.5",
-    "postcss": "^8.5.26",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# React Hook Form Integration
-
-This example demonstrates how to integrate assistant-ui with React Hook Form, allowing the AI assistant to fill out and submit forms.
-
-## Quick Start
-
-### Using CLI (Recommended)
-
-```bash
-npx assistant-ui@latest create my-app --example with-react-hook-form
-cd my-app
-```
-
-### Environment Variables
-
-Create `.env.local`:
-
-```
-OPENAI_API_KEY=sk-...
-```
-
-### Run
-
-```bash
-npm run dev
-```
-
-## Features
-
-- React Hook Form integration via `@assistant-ui/react-hook-form`
-- AI-powered form filling with `useAssistantForm`
-- Custom tool rendering for form actions
-- Sidebar assistant layout
-- Form validation with Zod
-
-## Related Documentation
-
-- [assistant-ui Documentation](https://www.assistant-ui.com/docs)
-- [Form-Filling AI Copilot Example](https://www.assistant-ui.com/examples/form-demo)
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "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": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-