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

package/.docs/organized/code-examples/with-image-generation.md

@@ -1,462 +0,0 @@
-# Example: with-image-generation
-
-## app/api/image/route.ts
-
-```typescript
-import { openai } from "@ai-sdk/openai";
-import { generateImage } from "ai";
-
-export const maxDuration = 60;
-
-// 1x1 transparent PNG, returned as a stand-in when no OPENAI_API_KEY is set so
-// the example runs without credentials.
-const MOCK_IMAGE =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
-
-export async function POST(req: Request) {
-  const { prompt, size, seed } = (await req.json()) as {
-    prompt?: string;
-    size?: `${number}x${number}`;
-    seed?: number;
-  };
-  if (!prompt) {
-    return Response.json({ error: "Missing prompt" }, { status: 400 });
-  }
-
-  if (!process.env.OPENAI_API_KEY) {
-    await new Promise((r) => setTimeout(r, 400));
-    return Response.json({
-      image: MOCK_IMAGE,
-      mimeType: "image/png",
-      metadata: { revisedPrompt: `${prompt} (mock)` },
-    });
-  }
-
-  const result = await generateImage({
-    model: openai.image("gpt-image-1"),
-    prompt,
-    ...(size && { size }),
-    ...(seed !== undefined && { seed }),
-  });
-  const openaiMeta = (
-    result.providerMetadata as
-      | Record<string, Record<string, unknown>>
-      | undefined
-  )?.openai;
-  const revisedPrompt = openaiMeta?.revisedPrompt;
-  return Response.json({
-    image: `data:${result.image.mediaType};base64,${result.image.base64}`,
-    mimeType: result.image.mediaType,
-    metadata: {
-      ...(typeof revisedPrompt === "string" && { revisedPrompt }),
-    },
-  });
-}
-
-```
-
-## 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: "Image Generation Example",
-  description: "Example using @assistant-ui/react image generation primitives",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode }>) {
-  return (
-    <html lang="en">
-      <body className="bg-background text-foreground h-dvh">{children}</body>
-    </html>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { useCallback, useState } from "react";
-import type { ImageMessagePart, MessagePartStatus } from "@assistant-ui/react";
-import { Image } from "@/components/assistant-ui/image";
-
-type ImageView = ImageMessagePart & { status: MessagePartStatus };
-
-export default function Home() {
-  const [prompt, setPrompt] = useState("A golden retriever wearing a top hat");
-  const [activePrompt, setActivePrompt] = useState("");
-  const [view, setView] = useState<ImageView | null>(null);
-  const [revisedPrompt, setRevisedPrompt] = useState<string | null>(null);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const generate = useCallback(async (p: string) => {
-    setIsGenerating(true);
-    setActivePrompt(p);
-    setError(null);
-    setRevisedPrompt(null);
-    setView({ type: "image", image: "", status: { type: "running" } });
-    try {
-      const res = await fetch("/api/image", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ prompt: p }),
-      });
-      if (!res.ok) throw new Error(await res.text());
-      const result = (await res.json()) as {
-        image: string;
-        metadata?: { revisedPrompt?: string };
-      };
-      setView({
-        type: "image",
-        image: result.image,
-        status: { type: "complete" },
-      });
-      if (typeof result.metadata?.revisedPrompt === "string") {
-        setRevisedPrompt(result.metadata.revisedPrompt);
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-      setView({
-        type: "image",
-        image: "",
-        status: { type: "incomplete", reason: "error" },
-      });
-    } finally {
-      setIsGenerating(false);
-    }
-  }, []);
-
-  return (
-    <main className="mx-auto flex h-full max-w-xl flex-col gap-4 p-6">
-      <header>
-        <h1 className="text-xl font-semibold">Image Generation</h1>
-        <p className="text-muted-foreground text-sm">
-          Calls a server route that runs <code>ai.generateImage</code> and
-          renders the result with the <code>@assistant-ui/ui</code> Image
-          component.
-        </p>
-      </header>
-
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          void generate(prompt);
-        }}
-        className="flex gap-2"
-      >
-        <input
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          placeholder="Describe an image…"
-          className="flex-1 rounded border px-3 py-2"
-        />
-        <button
-          type="submit"
-          disabled={isGenerating || !prompt.trim()}
-          className="bg-primary text-primary-foreground rounded px-3 py-2 disabled:opacity-50"
-        >
-          {isGenerating ? "Generating…" : "Generate"}
-        </button>
-      </form>
-
-      {error && (
-        <p className="text-destructive text-sm" role="alert">
-          {error}
-        </p>
-      )}
-
-      {view && (
-        <div className="space-y-2">
-          <Image {...view} />
-          {revisedPrompt && (
-            <p className="text-muted-foreground text-xs">
-              <strong>Revised prompt:</strong> {revisedPrompt}
-            </p>
-          )}
-          {view.status.type === "complete" && view.image && (
-            <Image.Actions
-              part={view}
-              onRegenerate={() => generate(activePrompt)}
-            />
-          )}
-        </div>
-      )}
-    </main>
-  );
-}
-
-```
-
-## 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"],
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-image-generation",
-  "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/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"
-  },
-  "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"
-  }
-}
-
-```
-
-## README.md
-
-```markdown
-# with-image-generation
-
-Minimal Next.js example that generates an image through a server route and renders it with the `@assistant-ui/ui` `Image` component (loading, content-filter, zoom, and download / copy / regenerate actions). It runs without credentials by falling back to a mock image when `OPENAI_API_KEY` is unset.
-
-## Run locally
-
-```bash
-export OPENAI_API_KEY=sk-...
-pnpm --filter with-image-generation dev
-```
-
-Then open `http://localhost:3000`.
-
-## How it works
-
-- `app/api/image/route.ts` exposes a server endpoint that calls AI SDK's `generateImage` with `openai.image("gpt-image-1")` and returns an `ImageMessagePart`-shaped payload. Without `OPENAI_API_KEY` it returns a mock image so the example still runs.
-- `app/page.tsx` POSTs the prompt to that endpoint, stores the result as an `ImageMessagePart`, and renders it with the `@assistant-ui/ui` `Image` component.
-- `Image.Actions` provides download and copy buttons plus a regenerate button wired through its `onRegenerate` callback.
-
-```
-
-## 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"]
-}
-
-```
-