Agent Interface SDK

docs/components/docs-navbar.tsx

@@ -12,16 +12,19 @@ import styles from "./docs-navbar.module.css";
 import { SiteHeaderFrame } from "./site-header";
 import { ThemeToggle } from "./theme-toggle";
 
-const tabs = [
+const tabs: { title: string; url: string; match?: string }[] = [
   { title: "OpenUI", url: "/docs/openui-lang" },
-  { title: "Chat", url: "/docs/chat" },
+  { title: "Agent Interface", url: "/docs/agent/getting-started/introduction", match: "/docs/agent" },
   { title: "API Reference", url: "/docs/api-reference" },
-] as const;
+];
 
 function activeTabUrl(pathname: string): string {
-  const sorted = [...tabs].sort((a, b) => b.url.length - a.url.length);
+  const sorted = [...tabs].sort((a, b) => (b.match ?? b.url).length - (a.match ?? a.url).length);
   return (
-    sorted.find((t) => pathname === t.url || pathname.startsWith(`${t.url}/`))?.url ?? tabs[0].url
+    sorted.find((t) => {
+      const prefix = t.match ?? t.url;
+      return pathname === prefix || pathname.startsWith(`${prefix}/`);
+    })?.url ?? tabs[0].url
   );
 }
 

docs/components/overview-components/chat-modal.css

@@ -69,14 +69,14 @@
   height: 100%;
 }
 
-/* Override Shell container sizing to fit within the modal */
-.chat-modal-body .openui-shell-container {
+/* Override AgentInterface container sizing to fit within the modal */
+.chat-modal-body .openui-agent-container {
   height: 100% !important;
   width: 100% !important;
 }
 
 /* Hide the sidebar in the modal */
-.chat-modal-body .openui-shell-sidebar-container {
+.chat-modal-body .openui-agent-sidebar-container {
   display: none !important;
 }
 

docs/components/overview-components/chat-modal.tsx

@@ -8,12 +8,16 @@ import "./chat-modal.css";
 
 import { DemoCreditsDialog } from "@/components/DemoCreditsDialog";
 import { isDemoCreditsErrorPayload } from "@/lib/demo-credits";
-import { openAIAdapter, openAIMessageFormat } from "@openuidev/react-headless";
-import { FullScreen } from "@openuidev/react-ui";
+import {
+  AgentInterface,
+  openAIAdapter,
+  openAIMessageFormat,
+  type ChatLLM,
+} from "@openuidev/react-ui";
 import { openuiChatLibrary } from "@openuidev/react-ui/genui-lib";
 import { X } from "lucide-react";
 import { useTheme } from "next-themes";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 
 interface ChatModalProps {
@@ -40,70 +44,79 @@ export function ChatModal({ onClose }: ChatModalProps) {
     };
   }, [handleKey]);
 
+  // The backend call — including the demo-credits error handling — is unchanged;
+  // only the chat surface moved from FullScreen to AgentInterface. AgentInterface
+  // uses its built-in in-memory thread storage (wiped on reload).
+  const llm = useMemo<ChatLLM>(
+    () => ({
+      send: async ({ messages, signal }) => {
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: openAIMessageFormat.toApi(messages),
+          }),
+          signal,
+        });
+
+        if (!response.ok) {
+          const err = await response
+            .clone()
+            .json()
+            .catch(() => ({}));
+          if (isDemoCreditsErrorPayload((err as { error?: unknown }).error)) {
+            setShowOverviewCreditsDialog(true);
+            return new Response("data: [DONE]\n\n", {
+              headers: { "Content-Type": "text/event-stream" },
+            });
+          }
+        }
+
+        return response;
+      },
+      streamProtocol: openAIAdapter(),
+    }),
+    [],
+  );
+
   return createPortal(
     <div className="chat-modal-overlay" onClick={onClose}>
       <div className="chat-modal-container" onClick={(e) => e.stopPropagation()}>
         <button className="chat-modal-close" onClick={onClose} aria-label="Close chat">
           <X size={20} />
         </button>
         <div className="chat-modal-body">
-          <FullScreen
-            welcomeMessage={{ title: "Hello, how can I help you today?" }}
-            processMessage={async ({ messages, abortController }) => {
-              const response = await fetch("/api/chat", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  messages: openAIMessageFormat.toApi(messages),
-                }),
-                signal: abortController.signal,
-              });
-
-              if (!response.ok) {
-                const err = await response
-                  .clone()
-                  .json()
-                  .catch(() => ({}));
-                if (isDemoCreditsErrorPayload((err as { error?: unknown }).error)) {
-                  setShowOverviewCreditsDialog(true);
-                  return new Response("data: [DONE]\n\n", {
-                    headers: { "Content-Type": "text/event-stream" },
-                  });
-                }
-              }
-
-              return response;
-            }}
-            streamProtocol={openAIAdapter()}
+          <AgentInterface
+            llm={llm}
             componentLibrary={openuiChatLibrary}
             agentName="OpenUI Chat"
             theme={{ mode: (resolvedTheme as "light" | "dark") ?? "light" }}
-            conversationStarters={{
-              variant: "short",
-              options: [
-                {
-                  displayText: "Revenue dashboard",
-                  prompt:
-                    "Build a revenue dashboard with a bar chart showing monthly revenue for Q4, key metrics, and a summary table.",
-                },
-                {
-                  displayText: "Signup form",
-                  prompt:
-                    "Create a user registration form with name, email, password, and country fields with validation.",
-                },
-                {
-                  displayText: "Compare React vs Vue",
-                  prompt:
-                    "Show me a comparison of React and Vue frameworks using tabs with pros, cons, and a feature comparison table.",
-                },
-                {
-                  displayText: "Travel destinations",
-                  prompt:
-                    "Show me a carousel of 3 popular travel destinations with images, descriptions, and best time to visit.",
-                },
-              ],
-            }}
-          />
+            starterVariant="short"
+            starters={[
+              {
+                displayText: "Revenue dashboard",
+                prompt:
+                  "Build a revenue dashboard with a bar chart showing monthly revenue for Q4, key metrics, and a summary table.",
+              },
+              {
+                displayText: "Signup form",
+                prompt:
+                  "Create a user registration form with name, email, password, and country fields with validation.",
+              },
+              {
+                displayText: "Compare React vs Vue",
+                prompt:
+                  "Show me a comparison of React and Vue frameworks using tabs with pros, cons, and a feature comparison table.",
+              },
+              {
+                displayText: "Travel destinations",
+                prompt:
+                  "Show me a carousel of 3 popular travel destinations with images, descriptions, and best time to visit.",
+              },
+            ]}
+          >
+            <AgentInterface.Welcome title="Hello, how can I help you today?" />
+          </AgentInterface>
         </div>
         <DemoCreditsDialog
           open={showOverviewCreditsDialog}