@datalayer/agent-runtimes 0.0.11 → 0.0.12

package/lib/components/chat/index.d.ts

@@ -56,6 +56,6 @@ export { BaseProtocolAdapter, AGUIAdapter, A2AAdapter, ACPAdapter, type AGUIAdap
 export { ToolExecutor, type ToolExecutionContext } from './tools';
 export { MiddlewarePipeline, createMiddleware, loggingMiddleware, createHITLMiddleware, type RequestContext, type ResponseContext, } from './middleware';
 export { ExtensionRegistry, createMessageRenderer, createActivityRenderer, createA2UIRenderer, A2UIExtensionImpl, type A2UIMessage, type InternalExtensionType, } from './extensions';
-export { ChatMessages, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, AgentDetails, AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, type ChatMessagesProps, type ChatInputPromptProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, type AgentRuntimeConfig, type AvatarConfig, type EmptyStateConfig, type HeaderButtonsConfig, type StreamingMessageOptions, type ToolApprovalDialogProps, type PoweredByTagProps, type FloatingBrandButtonProps, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, type AgentDetailsProps, type AgentIdentityProps, type IdentityCardProps, type TokenStatus, type ChatHeaderProps, type ConnectionState, type MessagePartProps, type TextPartProps, type ReasoningPartProps, type ToolPartProps, type DynamicToolPartProps, type ToolCallDisplayProps, type ChatProps, type Transport, type Extension, } from './components';
+export { ChatMessages, ChatSidebar, ChatStandalone, ChatBase, InputPrompt, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, AgentDetails, AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, type ChatMessagesProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, type AgentRuntimeConfig, type AvatarConfig, type EmptyStateConfig, type HeaderButtonsConfig, type StreamingMessageOptions, type ChatViewMode, type InputPromptProps, type ToolApprovalDialogProps, type PoweredByTagProps, type FloatingBrandButtonProps, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, type AgentDetailsProps, type AgentIdentityProps, type IdentityCardProps, type TokenStatus, type ChatHeaderProps, type ConnectionState, type MessagePartProps, type TextPartProps, type ReasoningPartProps, type ToolPartProps, type DynamicToolPartProps, type ToolCallDisplayProps, type ChatProps, type Transport, type Extension, } from './components';
 export { requestAPI } from './handler';
 export { useKeyboardShortcuts, useChatKeyboardShortcuts, getShortcutDisplay, type KeyboardShortcut, type UseKeyboardShortcutsOptions, } from '../../hooks';

package/lib/components/chat/index.js

@@ -69,7 +69,7 @@ export { MiddlewarePipeline, createMiddleware, loggingMiddleware, createHITLMidd
 // Extensions
 export { ExtensionRegistry, createMessageRenderer, createActivityRenderer, createA2UIRenderer, A2UIExtensionImpl, } from './extensions';
 // Components
-export { ChatMessages, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, AgentDetails, AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, } from './components';
+export { ChatMessages, ChatSidebar, ChatStandalone, ChatBase, InputPrompt, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, AgentDetails, AgentIdentity, IdentityCard, getTokenStatus, formatDuration, formatExpirationStatus, } from './components';
 // Simple API request handler (merged from chat)
 export { requestAPI } from './handler';
 // Keyboard shortcuts (re-exported from main hooks folder)

package/lib/components/chat/inference/DatalayerInferenceProvider.js

@@ -260,18 +260,22 @@ export class DatalayerInferenceProvider extends BaseInferenceProvider {
             function: {
                 name: tool.name,
                 description: tool.description,
-                parameters: {
-                    type: 'object',
-                    properties: Object.fromEntries(tool.parameters.map(p => [
-                        p.name,
-                        {
-                            type: p.type || 'string',
-                            description: p.description,
-                            enum: p.enum,
-                        },
-                    ])),
-                    required: tool.parameters.filter(p => p.required).map(p => p.name),
-                },
+                parameters: Array.isArray(tool.parameters)
+                    ? {
+                        type: 'object',
+                        properties: Object.fromEntries(tool.parameters.map(p => [
+                            p.name,
+                            {
+                                type: p.type || 'string',
+                                description: p.description,
+                                enum: p.enum,
+                            },
+                        ])),
+                        required: tool.parameters
+                            .filter(p => p.required)
+                            .map(p => p.name),
+                    }
+                    : tool.parameters,
             },
         }));
     }

package/lib/components/chat/inference/SelfHostedInferenceProvider.js

@@ -201,18 +201,22 @@ export class SelfHostedInferenceProvider extends BaseInferenceProvider {
             function: {
                 name: tool.name,
                 description: tool.description,
-                parameters: {
-                    type: 'object',
-                    properties: Object.fromEntries(tool.parameters.map(p => [
-                        p.name,
-                        {
-                            type: p.type || 'string',
-                            description: p.description,
-                            enum: p.enum,
-                        },
-                    ])),
-                    required: tool.parameters.filter(p => p.required).map(p => p.name),
-                },
+                parameters: Array.isArray(tool.parameters)
+                    ? {
+                        type: 'object',
+                        properties: Object.fromEntries(tool.parameters.map(p => [
+                            p.name,
+                            {
+                                type: p.type || 'string',
+                                description: p.description,
+                                enum: p.enum,
+                            },
+                        ])),
+                        required: tool.parameters
+                            .filter(p => p.required)
+                            .map(p => p.name),
+                    }
+                    : tool.parameters,
             },
         }));
     }

package/lib/components/chat/protocols/AGUIAdapter.d.ts

@@ -25,9 +25,12 @@ export declare class AGUIAdapter extends BaseProtocolAdapter {
     private abortController;
     private currentThreadId;
     private pendingToolCalls;
+    private collectedToolResults;
     private messageHistory;
     private lastAssistantContent;
+    private lastTurnContent;
     private lastTools;
+    private isContinuation;
     constructor(config: AGUIAdapterConfig);
     /**
      * Connect to AG-UI endpoint (SSE doesn't require persistent connection)
@@ -65,10 +68,14 @@ export declare class AGUIAdapter extends BaseProtocolAdapter {
         }>;
     }): Promise<void>;
     /**
-     * Send tool result back through AG-UI and continue the conversation
+     * Send tool result back through AG-UI and continue the conversation.
      *
-     * AG-UI requires tool results to be sent as a new request with the full
-     * message history including the tool result as a message with role: "tool"
+     * When the agent makes multiple tool calls in a single run, each call
+     * triggers an independent async execution in ChatBase.  This method
+     * **batches** the results: it stores each result as it arrives and only
+     * sends ONE continuation request once ALL pending tool calls have been
+     * resolved.  This prevents duplicate/concurrent SSE streams, corrupted
+     * shared state, and duplicate agent responses.
      */
     sendToolResult(toolCallId: string, result: ToolExecutionResult): Promise<void>;
     /**

package/lib/components/chat/protocols/AGUIAdapter.js

@@ -16,10 +16,24 @@ export class AGUIAdapter extends BaseProtocolAdapter {
     currentThreadId = null;
     // Track in-progress tool calls to accumulate args and emit results
     pendingToolCalls = new Map();
+    // Collect tool results for batching — when the agent makes multiple tool
+    // calls in a single run, we must wait for ALL results before sending one
+    // combined continuation request.  Without this, each sendToolResult would
+    // fire its own sendMessage → SSE stream, causing duplicate/concurrent
+    // continuation runs, corrupted shared state, and duplicate agent responses.
+    collectedToolResults = new Map();
     // Store conversation history for tool result continuation
     messageHistory = [];
     lastAssistantContent = '';
+    // Text from the current turn only (not accumulated across continuations).
+    // Used for the message history sent to the LLM so each assistant message
+    // contains only its own text, preventing the LLM from seeing duplicated
+    // context that confuses it into making extra tool calls.
+    lastTurnContent = '';
     lastTools = [];
+    // Continuation tracking — each continuation creates a new message bubble
+    // that appears after the tool calls in the chat display.
+    isContinuation = false;
     constructor(config) {
         super(config);
         // Ensure baseUrl ends with trailing slash (required for mounted Starlette apps)
@@ -98,7 +112,13 @@ export class AGUIAdapter extends BaseProtocolAdapter {
         // Store message history and tools for potential tool result continuation
         this.messageHistory = [...allMessages];
         this.lastTools = options?.tools || [];
-        this.lastAssistantContent = '';
+        // Only clear assistant content for fresh user messages, not continuations.
+        // For continuations, lastTurnContent is used in sendToolResult to build
+        // the assistant message content in the LLM history.
+        if (!this.isContinuation) {
+            this.lastAssistantContent = '';
+            this.lastTurnContent = '';
+        }
         // Convert ChatMessages to AG-UI message format
         // AG-UI expects:
         // - Assistant messages with tool_calls array for tool invocations
@@ -184,26 +204,28 @@ export class AGUIAdapter extends BaseProtocolAdapter {
         }
     }
     /**
-     * Send tool result back through AG-UI and continue the conversation
+     * Send tool result back through AG-UI and continue the conversation.
      *
-     * AG-UI requires tool results to be sent as a new request with the full
-     * message history including the tool result as a message with role: "tool"
+     * When the agent makes multiple tool calls in a single run, each call
+     * triggers an independent async execution in ChatBase.  This method
+     * **batches** the results: it stores each result as it arrives and only
+     * sends ONE continuation request once ALL pending tool calls have been
+     * resolved.  This prevents duplicate/concurrent SSE streams, corrupted
+     * shared state, and duplicate agent responses.
      */
     async sendToolResult(toolCallId, result) {
-        // First emit local event for UI updates
+        // 1. Emit local event for UI updates
         this.emit({
             type: 'tool-result',
             toolResult: result,
             timestamp: new Date(),
         });
-        // Get the tool name and args from pending tool calls
+        // 2. Retrieve tool metadata from pending map
         const pendingToolCall = this.pendingToolCalls.get(toolCallId);
         if (!pendingToolCall) {
             console.warn('[AGUIAdapter] No pending tool call found for ID:', toolCallId);
-            console.log('[AGUIAdapter] Pending tool calls:', Array.from(this.pendingToolCalls.keys()));
         }
         const toolName = pendingToolCall?.toolName || 'unknown';
-        // Parse the args safely
         let parsedArgs = {};
         if (pendingToolCall?.argsJson) {
             try {
@@ -213,54 +235,87 @@ export class AGUIAdapter extends BaseProtocolAdapter {
                 console.warn('[AGUIAdapter] Failed to parse tool args:', e);
             }
         }
-        // Build the assistant message that contained the tool call
-        // AG-UI expects assistant messages with tool_calls to potentially have empty content
-        const assistantMessageWithToolCall = {
+        // 3. Collect this result (batching)
+        this.collectedToolResults.set(toolCallId, {
+            toolCallId,
+            toolName,
+            parsedArgs,
+            result,
+        });
+        // 4. Check whether ALL pending tool calls now have results
+        const allResolved = Array.from(this.pendingToolCalls.keys()).every(id => this.collectedToolResults.has(id));
+        if (!allResolved) {
+            // Other tool calls are still executing — wait for them
+            return;
+        }
+        // ── All tool results collected — build ONE combined continuation ──
+        // 5. Build a single assistant message containing ALL tool calls
+        const toolCalls = Array.from(this.collectedToolResults.values()).map(tr => ({
+            type: 'tool-call',
+            toolCallId: tr.toolCallId,
+            toolName: tr.toolName,
+            args: tr.parsedArgs,
+            status: 'completed',
+        }));
+        const assistantMessageWithToolCalls = {
             id: generateMessageId(),
             role: 'assistant',
-            content: this.lastAssistantContent || '',
+            // Use turn-only content for the history so the LLM doesn't see
+            // accumulated text from previous turns (which causes duplicate context
+            // and spurious extra tool calls).
+            content: this.lastTurnContent || this.lastAssistantContent || '',
             createdAt: new Date(),
-            toolCalls: [
-                {
-                    type: 'tool-call',
-                    toolCallId,
-                    toolName,
-                    args: parsedArgs,
-                    status: 'completed',
-                },
-            ],
+            toolCalls,
         };
-        // Build the tool result message
-        const toolResultMessage = {
+        // 6. Build individual tool-result messages (one per tool call)
+        const toolResultMessages = Array.from(this.collectedToolResults.values()).map(tr => ({
             id: generateMessageId(),
             role: 'tool',
-            content: typeof result.result === 'string'
-                ? result.result
-                : JSON.stringify(result.result),
+            content: typeof tr.result.result === 'string'
+                ? tr.result.result
+                : JSON.stringify(tr.result.result),
             createdAt: new Date(),
             metadata: {
-                toolCallId,
-                toolName,
-                isError: !result.success,
+                toolCallId: tr.toolCallId,
+                toolName: tr.toolName,
+                isError: !tr.result.success,
             },
-        };
-        // Build full message history for continuation
+        }));
+        // 7. Assemble full continuation history
         const continuationMessages = [
             ...this.messageHistory,
-            assistantMessageWithToolCall,
-            toolResultMessage,
+            assistantMessageWithToolCalls,
+            ...toolResultMessages,
         ];
-        // Update stored message history
+        // 8. Clear batching state BEFORE the async sendMessage call
+        //    (pendingToolCalls will be repopulated by the next stream if needed)
+        this.pendingToolCalls.clear();
+        this.collectedToolResults.clear();
+        // 9. Update stored message history
         this.messageHistory = continuationMessages;
-        // Send continuation request to get agent's response to the tool result
-        // This will trigger a new SSE stream with the agent's response
-        await this.sendMessage(toolResultMessage, {
+        // DEBUG: Log continuation messages to inspect what the LLM sees
+        console.log('[AGUIAdapter] === CONTINUATION MESSAGES ===');
+        continuationMessages.forEach((msg, i) => {
+            const toolCallInfo = msg.toolCalls
+                ? ` [${msg.toolCalls.length} tool_calls: ${msg.toolCalls.map(tc => tc.toolName).join(', ')}]`
+                : '';
+            const metaInfo = msg.metadata?.toolCallId
+                ? ` [tool_call_id=${msg.metadata.toolCallId}]`
+                : '';
+            const contentPreview = typeof msg.content === 'string' ? msg.content.slice(0, 80) : '';
+            console.log(`[AGUIAdapter]   [${i}] role=${msg.role}${toolCallInfo}${metaInfo} content="${contentPreview}"`);
+        });
+        console.log('[AGUIAdapter] === END CONTINUATION MESSAGES ===');
+        // 10. Mark as continuation (for internal tracking; the continuation
+        //     will create a new message bubble that appears after the tool calls).
+        this.isContinuation = true;
+        // 11. Send ONE continuation request with all tool results
+        const lastToolResultMsg = toolResultMessages[toolResultMessages.length - 1];
+        await this.sendMessage(lastToolResultMsg, {
             messages: continuationMessages,
             tools: this.lastTools,
             threadId: this.currentThreadId || undefined,
         });
-        // Clear the pending tool call
-        this.pendingToolCalls.delete(toolCallId);
     }
     /**
      * Check feature support
@@ -285,8 +340,17 @@ export class AGUIAdapter extends BaseProtocolAdapter {
         }
         const decoder = new TextDecoder();
         let buffer = '';
+        // Always start fresh — each turn gets its own message bubble.
+        // Continuations will naturally appear AFTER the tool calls in the
+        // display because they create a new message that is appended at the
+        // end of displayItems.
         let currentMessageId = null;
         let currentContent = '';
+        // Track just the current turn's text (not accumulated) for the message
+        // history sent to the LLM on the next continuation.
+        let currentTurnContent = '';
+        // Consume the flag — it was set by sendToolResult for this call only
+        this.isContinuation = false;
         try {
             while (true) {
                 const { done, value } = await reader.read();
@@ -317,6 +381,10 @@ export class AGUIAdapter extends BaseProtocolAdapter {
                                 resetContent: () => {
                                     currentContent = '';
                                 },
+                                appendTurnContent: content => {
+                                    currentTurnContent += content;
+                                },
+                                getCurrentTurnContent: () => currentTurnContent,
                             });
                         }
                         catch (e) {
@@ -345,13 +413,21 @@ export class AGUIAdapter extends BaseProtocolAdapter {
         const eventType = event.type;
         switch (eventType) {
             case 'RUN_STARTED':
-                context.setCurrentMessageId(generateMessageId());
-                context.resetContent();
+                if (!context.getCurrentMessageId()) {
+                    context.setCurrentMessageId(generateMessageId());
+                }
+                if (!context.getCurrentContent()) {
+                    context.resetContent();
+                }
                 break;
             case 'TEXT_MESSAGE_START': {
                 const messageId = event.messageId;
-                context.setCurrentMessageId(messageId || generateMessageId());
-                context.resetContent();
+                if (!context.getCurrentMessageId()) {
+                    context.setCurrentMessageId(messageId || generateMessageId());
+                }
+                if (!context.getCurrentContent()) {
+                    context.resetContent();
+                }
                 break;
             }
             case 'TEXT_MESSAGE_CONTENT': {
@@ -359,6 +435,7 @@ export class AGUIAdapter extends BaseProtocolAdapter {
                 const delta = event.delta;
                 if (delta) {
                     context.appendContent(delta);
+                    context.appendTurnContent(delta);
                     const message = createAssistantMessage(context.getCurrentContent());
                     message.id = context.getCurrentMessageId() || generateMessageId();
                     this.emit({
@@ -372,8 +449,10 @@ export class AGUIAdapter extends BaseProtocolAdapter {
             case 'TEXT_MESSAGE_END': {
                 const finalMessage = createAssistantMessage(context.getCurrentContent());
                 finalMessage.id = context.getCurrentMessageId() || generateMessageId();
-                // Store the assistant content for tool result continuation
+                // Store assistant content and message ID for continuations
                 this.lastAssistantContent = context.getCurrentContent();
+                // Store just this turn's text for the message history
+                this.lastTurnContent = context.getCurrentTurnContent();
                 this.emit({
                     type: 'message',
                     message: finalMessage,

package/lib/components/chat/types/tool.d.ts

@@ -55,8 +55,11 @@ export interface FrontendToolDefinition<TArgs = Record<string, unknown>, TResult
     name: string;
     /** Description for the LLM */
     description: string;
-    /** Parameter definitions */
-    parameters: ToolParameter[];
+    /**
+     * Parameter definitions.
+     * Accepts either CopilotKit-style ToolParameter[] or JSON Schema format.
+     */
+    parameters: ToolParameter[] | Record<string, unknown>;
     /**
      * Execution location
      * @default 'frontend'

package/lib/components/index.d.ts

@@ -1,24 +1,7 @@
 export * from './chat';
 export type { ToolCallStatus } from './chat/types/message';
 export type { ToolCallStatus as DisplayToolCallStatus } from './chat/components/base/ChatBase';
-export { MockFileBrowser } from './MockFileBrowser';
-export type { MockFileBrowserProps } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export type { MainContentProps } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export type { SessionTabsProps, Session } from './SessionTabs';
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export { HeaderControls } from './HeaderControls';
-export type { HeaderControlsProps } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export type { FooterMetricsProps } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export type { TimeTravelProps } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
-export type { LexicalEditorProps } from './LexicalEditor';
 export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension, AgentConfigurationProps, SkillOption, MCPServerConfig, MCPServerTool, LibraryAgentSpec, } from './AgentConfiguration';
+export type { AgentLibrary, Transport, Extension, AgentConfigurationProps, SkillOption, MCPServerTool, LibraryAgentSpec, } from './AgentConfiguration';
 export { McpServerManager } from './McpServerManager';
 export type { McpServerSelection, McpServerManagerProps, } from './McpServerManager';
-export type { Agent as ExampleAgent, AgentStatus as ExampleAgentStatus, AgentsState, Transport as ExampleTransport, } from '../examples/stores/examplesStore';

package/lib/components/index.js

@@ -4,14 +4,5 @@
  */
 // Primary exports from chat (next-gen chat component)
 export * from './chat';
-// Example/layout components
-export { MockFileBrowser } from './MockFileBrowser';
-export { MainContent } from './MainContent';
-export { SessionTabs } from './SessionTabs';
-export { Header } from './Header';
-export { HeaderControls } from './HeaderControls';
-export { FooterMetrics } from './FooterMetrics';
-export { TimeTravel } from './TimeTravel';
-export { LexicalEditor } from './LexicalEditor';
 export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
 export { McpServerManager } from './McpServerManager';

package/lib/config/index.d.ts

@@ -1,5 +1 @@
-export * from './envvars';
-export * from './mcpServers';
-export * from './agents';
-export * from './skills';
 export * from './utils';

package/lib/config/index.js

@@ -2,8 +2,4 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './envvars';
-export * from './mcpServers';
-export * from './agents';
-export * from './skills';
 export * from './utils';

package/lib/examples/A2UiRestaurantExample.js

@@ -278,7 +278,7 @@ const A2UiRestaurantExample = () => {
         console.log('A2UI Action:', action);
         // Actions are handled in the content component
     }, []);
-    return (_jsx(DatalayerThemeProvider, { colorMode: "day", children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
+    return (_jsx(DatalayerThemeProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     minHeight: '100vh',

package/lib/examples/AgentRuntimeChatExample.d.ts

@@ -0,0 +1,15 @@
+/**
+ * AgentRuntimeChatExample
+ *
+ * Demonstrates the unified Chat component with automatic agent creation.
+ * On mount, it creates an agent from the codeai/simple spec via the
+ * REST API, then renders a full-page Chat interface.
+ *
+ * This mirrors how agent.html works but inside the examples runner,
+ * without requiring a CLI `--agent-id` flag at server startup.
+ *
+ * Backend: POST /api/v1/agents  →  /api/v1/ag-ui/{agentId}/
+ */
+import React from 'react';
+declare const AgentRuntimeChatExample: React.FC;
+export default AgentRuntimeChatExample;

package/lib/examples/AgentRuntimeChatExample.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * AgentRuntimeChatExample
+ *
+ * Demonstrates the unified Chat component with automatic agent creation.
+ * On mount, it creates an agent from the codeai/simple spec via the
+ * REST API, then renders a full-page Chat interface.
+ *
+ * This mirrors how agent.html works but inside the examples runner,
+ * without requiring a CLI `--agent-id` flag at server startup.
+ *
+ * Backend: POST /api/v1/agents  →  /api/v1/ag-ui/{agentId}/
+ */
+import { useEffect, useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { AlertIcon } from '@primer/octicons-react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider } from '@datalayer/core';
+import { Chat } from '../components/chat';
+setupPrimerPortals();
+const BASE_URL = 'http://localhost:8765';
+const AGENT_SPEC_ID = 'codeai/simple';
+const AGENT_NAME = 'simple';
+const AgentRuntimeChatExample = () => {
+    const [agentId, setAgentId] = useState(null);
+    const [error, setError] = useState(null);
+    const [isCreating, setIsCreating] = useState(true);
+    // Create the agent on mount
+    useEffect(() => {
+        let cancelled = false;
+        const ensureAgent = async () => {
+            try {
+                // First, check if the agent already exists
+                const checkResponse = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(AGENT_NAME)}`);
+                if (checkResponse.ok) {
+                    // Agent exists — reuse it (preserves conversation history)
+                    if (!cancelled) {
+                        setAgentId(AGENT_NAME);
+                        setIsCreating(false);
+                    }
+                    return;
+                }
+                // Agent doesn't exist — create it from the library spec
+                const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name: AGENT_NAME,
+                        agent_spec_id: AGENT_SPEC_ID,
+                        transport: 'ag-ui',
+                    }),
+                });
+                if (!response.ok) {
+                    const data = await response
+                        .json()
+                        .catch(() => ({ detail: 'Unknown error' }));
+                    // Race condition: agent was created between our check and POST
+                    if (response.status === 400 &&
+                        data.detail?.includes('already exists')) {
+                        if (!cancelled) {
+                            setAgentId(AGENT_NAME);
+                            setIsCreating(false);
+                        }
+                        return;
+                    }
+                    throw new Error(data.detail || `Failed to create agent: ${response.status}`);
+                }
+                const data = await response.json();
+                if (!cancelled) {
+                    setAgentId(data.id);
+                    setIsCreating(false);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to create agent');
+                    setIsCreating(false);
+                }
+            }
+        };
+        ensureAgent();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // Loading state while agent is being created
+    if (isCreating) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENT_SPEC_ID, "..."] })] }) }));
+    }
+    // Error state
+    if (error || !agentId) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to start agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error || 'No agent ID returned' })] }) }));
+    }
+    // Agent is ready — render the Chat component
+    return (_jsx(Chat, { transport: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+            {
+                title: 'Hello',
+                message: 'Hello, what can you do?',
+            },
+            {
+                title: 'Help',
+                message: 'What tools do you have available?',
+            },
+        ], submitOnSuggestionClick: true }));
+};
+export default AgentRuntimeChatExample;

package/lib/examples/{AgentSpaceFormExample.d.ts → AgentRuntimeFormExample.d.ts}

@@ -54,7 +54,7 @@ type IdentityProviderInput = OAuthProviderInput | TokenProviderInput;
 type IdentityProvidersInput = {
     [provider: string]: IdentityProviderInput;
 };
-type AgentSpaceFormExampleProps = {
+type AgentRuntimeFormExampleProps = {
     initialWsUrl?: string;
     initialBaseUrl?: string;
     initialAgentName?: string;
@@ -86,5 +86,5 @@ type AgentSpaceFormExampleProps = {
     /** @deprecated Use identityProviders instead */
     kaggleToken?: string;
 };
-declare const AgentSpaceFormExample: React.FC<AgentSpaceFormExampleProps>;
-export default AgentSpaceFormExample;
+declare const AgentRuntimeFormExample: React.FC<AgentRuntimeFormExampleProps>;
+export default AgentRuntimeFormExample;