@assistant-ui/mcp-docs-server 0.1.31 → 0.1.32

package/.docs/organized/code-examples/with-generative-ui.md

@@ -44,7 +44,7 @@ export async function POST(req: Request) {
     : {};
 
   const result = streamText({
-    model: openai("gpt-4o"),
+    model: openai("gpt-5.4-nano"),
     messages: await convertToModelMessages(messages),
     stopWhen: stepCountIs(10),
     ...(system ? { system } : {}),
@@ -355,6 +355,106 @@ export default function Home() {
 
 ```
 
+## app/primitive/page.tsx
+
+```tsx
+"use client";
+
+import { GenerativeUIRender, type GenerativeUISpec } from "@assistant-ui/react";
+import { componentsAllowlist } from "@/components/gui";
+
+const UnknownComponentFallback = ({ component }: { component: string }) => (
+  <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+    unknown component: {component}
+  </span>
+);
+
+/**
+ * Self-contained demo of the GenerativeUI primitive.
+ *
+ * Renders a hand-written `GenerativeUISpec` directly via `GenerativeUIRender`,
+ * the same renderer that backs `MessagePrimitive.GenerativeUI` when a
+ * `generative-ui` part flows through `MessagePrimitive.Parts`.
+ *
+ * In a real integration the spec arrives as a `generative-ui` message part
+ * from the agent; the consumer-provided allowlist is the security boundary.
+ */
+const exampleSpec: GenerativeUISpec = {
+  root: [
+    {
+      component: "Card",
+      props: {
+        title: "Welcome",
+        description: "An agent-described card with a primary CTA.",
+      },
+      children: [
+        {
+          component: "Stack",
+          props: { gap: "sm" },
+          children: [
+            {
+              component: "Text",
+              children: [
+                "This card was rendered from a JSON spec emitted by the agent.",
+              ],
+            },
+            {
+              component: "Button",
+              props: {
+                label: "Get started",
+                variant: "primary",
+                onClickPrompt: "open onboarding",
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      component: "Card",
+      props: { title: "Stats" },
+      children: [
+        {
+          component: "Stack",
+          props: { direction: "row", gap: "md" },
+          children: [
+            { component: "Stat", props: { label: "Revenue", value: "$124k" } },
+            {
+              component: "Stat",
+              props: { label: "Active Users", value: "8.2k" },
+            },
+            { component: "Stat", props: { label: "Latency", value: "42ms" } },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default function GenerativeUIPrimitivePage() {
+  return (
+    <main className="mx-auto flex h-full max-w-2xl flex-col gap-6 p-8">
+      <header>
+        <h1 className="font-bold text-2xl">MessagePrimitive.GenerativeUI</h1>
+        <p className="mt-1 text-muted-foreground text-sm">
+          Agent-described React UI rendered from a JSON spec via a
+          consumer-provided component allowlist.
+        </p>
+      </header>
+
+      <section className="flex flex-col gap-4">
+        <GenerativeUIRender
+          spec={exampleSpec}
+          components={componentsAllowlist}
+          Fallback={UnknownComponentFallback}
+        />
+      </section>
+    </main>
+  );
+}
+
+```
+
 ## components.json
 
 ```json
@@ -697,6 +797,103 @@ export const DatePickerToolUI = makeAssistantToolUI<
 
 ```
 
+## components/gui/index.tsx
+
+```tsx
+"use client";
+
+import type { ComponentType, PropsWithChildren } from "react";
+
+/**
+ * The component allowlist passed to `<MessagePrimitive.GenerativeUI />`.
+ * The agent's JSON spec can reference any of these by name.
+ */
+
+const Card: ComponentType<
+  PropsWithChildren<{ title?: string; description?: string }>
+> = ({ title, description, children }) => (
+  <div className="rounded-xl border bg-card p-4 shadow-sm">
+    {title ? <div className="font-semibold text-base">{title}</div> : null}
+    {description ? (
+      <div className="mt-1 text-muted-foreground text-sm">{description}</div>
+    ) : null}
+    {children ? <div className="mt-3">{children}</div> : null}
+  </div>
+);
+
+const Button: ComponentType<
+  PropsWithChildren<{
+    label?: string;
+    variant?: "primary" | "secondary";
+    onClickPrompt?: string;
+  }>
+> = ({ label, variant = "primary", onClickPrompt, children }) => {
+  const cls =
+    variant === "primary"
+      ? "bg-primary text-primary-foreground hover:bg-primary/90"
+      : "bg-secondary text-secondary-foreground hover:bg-secondary/80";
+  return (
+    <button
+      type="button"
+      className={`mt-2 inline-flex items-center rounded-md px-3 py-1.5 font-medium text-sm ${cls}`}
+      onClick={() => {
+        if (onClickPrompt) {
+          // In a richer integration this would call composer.setText / send.
+          alert(`button -> ${onClickPrompt}`);
+        }
+      }}
+    >
+      {children ?? label ?? "Click"}
+    </button>
+  );
+};
+
+const Stack: ComponentType<
+  PropsWithChildren<{ gap?: "sm" | "md" | "lg"; direction?: "row" | "column" }>
+> = ({ gap = "md", direction = "column", children }) => {
+  const gapClass = gap === "sm" ? "gap-2" : gap === "lg" ? "gap-6" : "gap-4";
+  const dirClass = direction === "row" ? "flex-row" : "flex-col";
+  return <div className={`flex ${dirClass} ${gapClass}`}>{children}</div>;
+};
+
+const Heading: ComponentType<
+  PropsWithChildren<{ level?: 1 | 2 | 3; children?: React.ReactNode }>
+> = ({ level = 2, children }) => {
+  const cls =
+    level === 1
+      ? "text-2xl font-bold"
+      : level === 2
+        ? "text-lg font-semibold"
+        : "text-base font-semibold";
+  const Tag = `h${level}` as keyof React.JSX.IntrinsicElements;
+  return <Tag className={cls}>{children}</Tag>;
+};
+
+const Text: ComponentType<PropsWithChildren> = ({ children }) => (
+  <p className="text-foreground text-sm leading-6">{children}</p>
+);
+
+const Stat: ComponentType<{ label: string; value: string | number }> = ({
+  label,
+  value,
+}) => (
+  <div className="flex flex-col rounded-lg border bg-muted/40 p-3">
+    <span className="text-muted-foreground text-xs">{label}</span>
+    <span className="font-semibold text-xl">{value}</span>
+  </div>
+);
+
+export const componentsAllowlist = {
+  Card,
+  Button,
+  Stack,
+  Heading,
+  Text,
+  Stat,
+} as const;
+
+```
+
 ## components/location-tool-ui.tsx
 
 ```tsx
@@ -787,29 +984,29 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.61",
+    "@ai-sdk/openai": "^3.0.64",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^6.0.175",
+    "ai": "^6.0.188",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.14.0",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "lucide-react": "^1.16.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "recharts": "^3.8.1",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }

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

@@ -307,21 +307,21 @@ export default nextConfig;
     "@google/adk": "^1.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.14.0",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "tailwind-merge": "^3.5.0",
+    "lucide-react": "^1.16.0",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }

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

@@ -270,18 +270,18 @@ export default nextConfig;
   },
   "dependencies": {
     "heat-graph": "workspace:*",
-    "next": "^16.2.4",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.14",
-    "tailwindcss": "^4.2.4",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^4.3.0",
     "typescript": "^6.0.3"
   }
 }