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

package/.docs/organized/code-examples/with-google-adk.md

@@ -1,367 +0,0 @@
-# Example: with-google-adk
-
-## app/api/chat/route.ts
-
-```typescript
-import { createAdkApiRoute } from "@assistant-ui/react-google-adk/server";
-import { InMemoryRunner, LlmAgent, FunctionTool } from "@google/adk";
-import { z } from "zod";
-
-const weatherTool = new FunctionTool({
-  name: "get_weather",
-  description: "Get the current weather for a city.",
-  parameters: z.object({
-    city: z.string().describe("The city name"),
-  }),
-  execute: async ({ city }) => {
-    return {
-      city,
-      temperature: Math.round(15 + Math.random() * 20),
-      condition: ["sunny", "cloudy", "rainy", "snowy"][
-        Math.floor(Math.random() * 4)
-      ],
-    };
-  },
-});
-
-const agent = new LlmAgent({
-  name: "assistant",
-  model: "gemini-2.5-flash",
-  instruction:
-    "You are a helpful assistant. You can check the weather for any city using the get_weather tool.",
-  tools: [weatherTool],
-});
-
-const runner = new InMemoryRunner({ agent, appName: "adk-example" });
-
-const sessions = new Map<string, string>();
-
-export const POST = createAdkApiRoute({
-  runner,
-  userId: "user_1",
-  sessionId: async () => {
-    const userId = "user_1";
-    let sessionId = sessions.get(userId);
-    if (!sessionId) {
-      const session = await runner.sessionService.createSession({
-        appName: "adk-example",
-        userId,
-      });
-      sessionId = session.id;
-      sessions.set(userId, sessionId);
-    }
-    return sessionId;
-  },
-});
-
-```
-
-## 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 { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
-import "./globals.css";
-
-export const metadata: Metadata = {
-  title: "Google ADK Example",
-  description: "Example using @assistant-ui/react with Google ADK",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className="h-dvh">
-        <MyRuntimeProvider>{children}</MyRuntimeProvider>
-      </body>
-    </html>
-  );
-}
-
-```
-
-## app/MyRuntimeProvider.tsx
-
-```tsx
-"use client";
-
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useAdkRuntime, createAdkStream } from "@assistant-ui/react-google-adk";
-
-export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
-  const runtime = useAdkRuntime({
-    stream: createAdkStream({ api: "/api/chat" }),
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-"use client";
-
-import { Thread } from "@/components/assistant-ui/thread";
-import {
-  useAui,
-  AuiProvider,
-  AuiConfig,
-  Suggestions,
-} from "@assistant-ui/react";
-
-function ThreadWithSuggestions() {
-  const aui = useAui();
-  const config = AuiConfig({
-    suggestions: Suggestions([
-      {
-        title: "What can you do",
-        label: "as a Gemini-powered agent?",
-        prompt: "What can you do?",
-      },
-      {
-        title: "Tell me about",
-        label: "the Google ADK framework",
-        prompt: "Tell me about Google ADK and what it enables.",
-      },
-    ]),
-  });
-  return (
-    <AuiProvider extends={aui} config={config}>
-      <Thread />
-    </AuiProvider>
-  );
-}
-
-export default function Home() {
-  return (
-    <div className="h-dvh">
-      <ThreadWithSuggestions />
-    </div>
-  );
-}
-
-```
-
-## next.config.js
-
-```javascript
-import { withAui } from "@assistant-ui/next";
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-google-adk"],
-};
-
-export default withAui(nextConfig);
-
-```
-
-## package.json
-
-```json
-{
-  "name": "with-google-adk",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@assistant-ui/react": "workspace:*",
-    "@assistant-ui/react-google-adk": "workspace:*",
-    "@assistant-ui/react-markdown": "workspace:*",
-    "@assistant-ui/ui": "workspace:*",
-    "@google/adk": "^1.6.0",
-    "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"]
-}
-
-```
-

package/.docs/organized/code-examples/with-heat-graph.md

@@ -1,304 +0,0 @@
-# Example: with-heat-graph
-
-## app/globals.css
-
-```css
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-```
-
-## app/layout.tsx
-
-```tsx
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Heat Graph Example",
-  description: "Activity heatmap graph built with heat-graph",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
-
-```
-
-## app/page.tsx
-
-```tsx
-import { ActivityGraph } from "@/lib/activity-graph";
-import { generateSampleData } from "@/lib/generate-data";
-
-const data = generateSampleData(new Date("2026-03-11"), 365);
-
-export default function Home() {
-  return (
-    <div className="min-h-screen bg-white p-8">
-      <div className="mx-auto max-w-4xl">
-        <h1 className="mb-6 text-3xl font-bold text-gray-900">
-          Activity Graph
-        </h1>
-        <div className="rounded-xl border border-gray-200 bg-white p-6">
-          <ActivityGraph data={data} />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-```
-
-## lib/activity-graph.tsx
-
-```tsx
-"use client";
-
-import * as HeatGraph from "heat-graph";
-
-const COLORS = ["#ebedf0", "#c6d7f9", "#8fb0f3", "#5888e8", "#2563eb"];
-
-export function ActivityGraph({ data }: { data: HeatGraph.DataPoint[] }) {
-  return (
-    <HeatGraph.Root
-      data={data}
-      weekStart="monday"
-      colorScale={COLORS}
-      className="flex flex-col gap-2"
-    >
-      <MonthLabels />
-      <div className="flex gap-2">
-        <DayLabels />
-        <CellGrid />
-      </div>
-      <GraphLegend />
-      <CellTooltip />
-    </HeatGraph.Root>
-  );
-}
-
-function MonthLabels() {
-  return (
-    <div className="relative ml-10 h-5">
-      <HeatGraph.MonthLabels>
-        {({ label, totalWeeks }) => (
-          <span
-            className="absolute text-xs text-gray-500"
-            style={{ left: `${(label.column / totalWeeks) * 100}%` }}
-          >
-            {HeatGraph.MONTH_SHORT[label.month]}
-          </span>
-        )}
-      </HeatGraph.MonthLabels>
-    </div>
-  );
-}
-
-function DayLabels() {
-  return (
-    <div className="flex w-8 shrink-0 flex-col justify-between py-[2px]">
-      <HeatGraph.DayLabels>
-        {({ label }) => (
-          <span className="flex h-[13px] items-center text-xs text-gray-500">
-            {label.row % 2 === 0 ? HeatGraph.DAY_SHORT[label.dayOfWeek] : ""}
-          </span>
-        )}
-      </HeatGraph.DayLabels>
-    </div>
-  );
-}
-
-function CellGrid() {
-  return (
-    <HeatGraph.Grid className="flex-1 gap-[3px]">
-      {() => <HeatGraph.Cell className="aspect-square w-full rounded-sm" />}
-    </HeatGraph.Grid>
-  );
-}
-
-function CellTooltip() {
-  return (
-    <HeatGraph.Tooltip className="pointer-events-none rounded-md bg-gray-900 px-3 py-1.5 text-xs whitespace-nowrap text-white shadow-lg">
-      {({ cell }) => (
-        <>
-          <strong>{cell.count} contributions</strong> on{" "}
-          {cell.date.toLocaleDateString("en-US", {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-          })}
-        </>
-      )}
-    </HeatGraph.Tooltip>
-  );
-}
-
-function GraphLegend() {
-  return (
-    <div className="ml-auto flex items-center gap-1 text-xs text-gray-500">
-      <span>Less</span>
-      <HeatGraph.Legend>
-        {() => (
-          <HeatGraph.LegendLevel className="h-[13px] w-[13px] rounded-sm" />
-        )}
-      </HeatGraph.Legend>
-      <span>More</span>
-    </div>
-  );
-}
-
-```
-
-## lib/generate-data.ts
-
-```typescript
-import type { DataPoint } from "heat-graph";
-
-function seededRandom(seed: number) {
-  let s = seed;
-  return () => {
-    s = (s * 16807 + 0) % 2147483647;
-    return s / 2147483647;
-  };
-}
-
-export function generateSampleData(
-  end: Date = new Date(),
-  days = 365,
-): DataPoint[] {
-  const data: DataPoint[] = [];
-  const rand = seededRandom(42);
-
-  for (let i = 0; i < days; i++) {
-    const date = new Date(end);
-    date.setDate(date.getDate() - (days - 1 - i));
-
-    const dayOfWeek = date.getDay();
-    const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
-
-    // Base activity: higher on weekdays
-    const base = isWeekend ? 2 : 8;
-    const noise = rand();
-
-    // Create some streaks and gaps
-    const monthProgress = date.getDate() / 31;
-    const monthBoost = Math.sin(monthProgress * Math.PI) * 5;
-
-    // Some days have no activity
-    if (noise < 0.15) {
-      continue;
-    }
-
-    const count = Math.max(0, Math.round(base + monthBoost + noise * 12 - 3));
-
-    if (count > 0) {
-      data.push({ date, count });
-    }
-  }
-
-  return data;
-}
-
-```
-
-## 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-heat-graph",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "heat-graph": "workspace:*",
-    "next": "^16.3.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8"
-  },
-  "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",
-    "typescript": "^7.0.2"
-  }
-}
-
-```
-
-## tsconfig.json
-
-```json
-{
-  "extends": "@assistant-ui/x-buildutils/ts/next",
-  "compilerOptions": {
-    "paths": { "@/*": ["./*"] }
-  },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
-
-```
-