@datalayer/agent-runtimes 0.0.2 → 0.0.3

package/lib/components/chat/components/AgentDetails.js

@@ -5,9 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, GlobeIcon, CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, } from '@primer/octicons-react';
-import { Box, Button, Heading, IconButton, Text, Label, ProgressBar, } from '@primer/react';
+import { ArrowLeftIcon, GlobeIcon, CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, CheckCircleIcon, XCircleIcon, } from '@primer/octicons-react';
+import { Box, Button, Heading, IconButton, Text, Label, ProgressBar, Spinner, } from '@primer/react';
 import { AiAgentIcon } from '@datalayer/icons-react';
+import { useQuery } from '@tanstack/react-query';
 // Mock context data for display
 const MOCK_CONTEXT_DATA = {
     name: 'Context',
@@ -51,6 +52,15 @@ const MOCK_CONTEXT_DATA = {
         },
     ],
 };
+function getLocalApiBase() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
 /**
  * Format token count for display
  */
@@ -85,6 +95,19 @@ function getCategoryIcon(name) {
  */
 export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, onBack, }) {
     const contextUsagePercent = (MOCK_CONTEXT_DATA.usedTokens / MOCK_CONTEXT_DATA.totalTokens) * 100;
+    // Fetch MCP toolsets status
+    const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
+        queryKey: ['mcp-toolsets-status'],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/mcp-toolsets-status`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch MCP status');
+            }
+            return response.json();
+        },
+        refetchInterval: 5000, // Refresh every 5 seconds
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -145,6 +168,46 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
+                                }, children: "MCP Toolsets" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        color: 'fg.muted',
+                                                    }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 2,
+                                                        pl: 2,
+                                                    }, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        color: 'fg.muted',
+                                                    }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 1,
+                                                        pl: 2,
+                                                    }, children: [_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: 2,
+                                                            }, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'danger.fg',
+                                                                fontFamily: 'mono',
+                                                                pl: 4,
+                                                                whiteSpace: 'pre-wrap',
+                                                                wordBreak: 'break-word',
+                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
                                 }, children: "Context Usage" }), _jsxs(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',

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

@@ -12,9 +12,9 @@
  * @module components/chat/components/ChatFloating
  */
 import React from 'react';
-import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion } from './base/ChatBase';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool } from './base/ChatBase';
 import type { PoweredByTagProps } from './elements/PoweredByTag';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, };
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, RemoteConfig, ModelConfig, BuiltinTool, MCPServerConfig, MCPServerTool, };
 /**
  * ChatFloating props
  */
@@ -135,6 +135,16 @@ export interface ChatFloatingProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
+    /**
+     * Show model selector in footer.
+     * @default false
+     */
+    showModelSelector?: boolean;
+    /**
+     * Show tools menu in footer.
+     * @default false
+     */
+    showToolsMenu?: boolean;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -142,5 +152,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, showModelSelector = false, showToolsMenu = false, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -63,13 +63,24 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [focusTrigger, setFocusTrigger] = useState(0);
     // Build protocol config from endpoint if not provided directly
     // Memoize to avoid creating new object on every render (which would trigger useEffect re-runs)
-    const protocol = useMemo(() => protocolProp ||
-        (endpoint
-            ? {
-                type: 'ag-ui',
-                endpoint,
-            }
-            : undefined), [protocolProp, endpoint]);
+    const protocol = useMemo(() => {
+        if (protocolProp)
+            return protocolProp;
+        if (!endpoint)
+            return undefined;
+        // Extract base URL from endpoint (e.g., http://localhost:8765/api/v1/ag-ui/agent/ -> http://localhost:8765)
+        const baseUrl = endpoint.match(/^(https?:\/\/[^/]+)/)?.[1] || '';
+        return {
+            type: 'ag-ui',
+            endpoint,
+            // Enable config query for model/tools selector when showModelSelector or showToolsMenu is true
+            enableConfigQuery: showModelSelector || showToolsMenu,
+            // Config endpoint is at /api/v1/configure (global, not per-agent)
+            configEndpoint: showModelSelector || showToolsMenu
+                ? `${baseUrl}/api/v1/configure`
+                : undefined,
+        };
+    }, [protocolProp, endpoint, showModelSelector, showToolsMenu]);
     // Clear messages when endpoint/protocol changes (e.g., switching examples)
     useEffect(() => {
         clearStoreMessages();
@@ -376,6 +387,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

package/lib/components/chat/components/base/ChatBase.d.ts

@@ -124,6 +124,7 @@ export interface ModelConfig {
     id: string;
     name: string;
     builtinTools?: string[];
+    isAvailable?: boolean;
 }
 /**
  * Builtin tool configuration
@@ -132,12 +133,36 @@ export interface BuiltinTool {
     name: string;
     id: string;
 }
+/**
+ * MCP Server Tool configuration
+ */
+export interface MCPServerTool {
+    name: string;
+    description: string;
+    enabled: boolean;
+    inputSchema?: Record<string, unknown>;
+}
+/**
+ * MCP Server configuration from backend
+ */
+export interface MCPServerConfig {
+    id: string;
+    name: string;
+    url?: string;
+    enabled: boolean;
+    tools: MCPServerTool[];
+    command?: string;
+    args?: string[];
+    isAvailable?: boolean;
+    transport?: string;
+}
 /**
  * Remote configuration from server
  */
 export interface RemoteConfig {
     models: ModelConfig[];
     builtinTools: BuiltinTool[];
+    mcpServers?: MCPServerConfig[];
 }
 /**
  * Protocol configuration for ChatBase

package/lib/components/chat/components/base/ChatBase.js

@@ -17,11 +17,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useContext } from 'react';
 import { useCallback, useEffect, useRef, useState, } from 'react';
-import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, } from '@primer/react';
+import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, PaperAirplaneIcon, SquareCircleIcon, ToolsIcon, AiModelIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { useQuery, QueryClientContext } from '@tanstack/react-query';
+import { useQuery, QueryClient, QueryClientProvider, QueryClientContext, } from '@tanstack/react-query';
 import { Streamdown } from 'streamdown';
 import { PoweredByTag } from '../elements/PoweredByTag';
 import { requestAPI } from '../../handler';
@@ -29,6 +29,51 @@ import { useChatStore } from '../../store/chatStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/message';
 import { AGUIAdapter, A2AAdapter, VercelAIAdapter, ACPAdapter, } from '../../protocols';
 import { ToolCallDisplay } from '../display/ToolCallDisplay';
+// Singleton QueryClient for ChatBase instances without external QueryClientProvider
+const internalQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+// Primer's default portal root ID
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Hook to ensure Primer's default portal root has a high z-index.
+ * This ensures dropdown menus appear above floating chat panels.
+ */
+function useHighZIndexPortal() {
+    useEffect(() => {
+        // Set up a MutationObserver to watch for the portal root being added
+        const setPortalZIndex = () => {
+            const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+            if (portalRoot) {
+                portalRoot.style.zIndex = '9999';
+                return true;
+            }
+            return false;
+        };
+        // Try immediately
+        if (setPortalZIndex()) {
+            return;
+        }
+        // If not found yet, observe for it
+        const observer = new MutationObserver(() => {
+            if (setPortalZIndex()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+}
 /**
  * Check if an item is a tool call message
  */
@@ -120,8 +165,29 @@ export function ChatBase({ title, showHeader = false, showLoadingIndicator = tru
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
 brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+    // Check if QueryClientProvider is already available
+    const existingQueryClient = useContext(QueryClientContext);
+    // If no QueryClient is available, wrap with our internal provider
+    if (!existingQueryClient) {
+        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }) }));
+    }
+    // QueryClient already available, render inner component directly
+    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }));
+}
+/**
+ * Inner ChatBase component - contains all the actual logic
+ */
+function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+// Mode selection
+useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
+// Extended props
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+    // Ensure Primer's default portal has high z-index for ActionMenu overlays
+    useHighZIndexPortal();
     // Store (optional for message persistence)
     const clearStoreMessages = useChatStore(state => state.clearMessages);
+    // Check if protocol is A2A (doesn't support per-request model override)
+    const isA2AProtocol = protocol?.type === 'a2a';
     // Component state
     const [displayItems, setDisplayItems] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -130,10 +196,12 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     const [input, setInput] = useState('');
     // Model and tools state
     const [selectedModel, setSelectedModel] = useState('');
-    // Note: enabledTools is used for backend-defined tools from config query
+    // enabledTools tracks which MCP server tools are enabled
+    // Format: Map<serverId, Set<toolName>>
+    const [enabledMcpTools, setEnabledMcpTools] = useState(new Map());
+    // Note: legacy _enabledTools for backend-defined tools from config query
     // Frontend tools are passed via frontendTools prop
-    const [enabledTools, setEnabledTools] = useState([]);
-    void enabledTools; // Suppress unused warning - may be used in future
+    const [_enabledTools, setEnabledTools] = useState([]);
     // Config query (for protocols that support it)
     // Safely handles missing QueryClientProvider
     const configQuery = useConfigQuery(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken);
@@ -201,14 +269,63 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     // Initialize model and tools when config is available
     useEffect(() => {
         if (configQuery.data && !selectedModel) {
-            const firstModel = configQuery.data.models[0];
+            // Select first available model, or fallback to first model if none available
+            const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+            const firstModel = firstAvailableModel || configQuery.data.models[0];
             if (firstModel) {
                 setSelectedModel(firstModel.id);
                 const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
                 setEnabledTools(allToolIds);
             }
+            // Initialize MCP server tools - all enabled by default
+            if (configQuery.data.mcpServers) {
+                const newEnabledMcpTools = new Map();
+                for (const server of configQuery.data.mcpServers) {
+                    if (server.isAvailable && server.enabled) {
+                        const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                        newEnabledMcpTools.set(server.id, enabledToolNames);
+                    }
+                }
+                setEnabledMcpTools(newEnabledMcpTools);
+            }
         }
     }, [configQuery.data, selectedModel]);
+    // Helper to toggle MCP tool enabled state
+    const toggleMcpTool = useCallback((serverId, toolName) => {
+        setEnabledMcpTools(prev => {
+            const newMap = new Map(prev);
+            const serverTools = new Set(prev.get(serverId) || []);
+            if (serverTools.has(toolName)) {
+                serverTools.delete(toolName);
+            }
+            else {
+                serverTools.add(toolName);
+            }
+            newMap.set(serverId, serverTools);
+            return newMap;
+        });
+    }, []);
+    // Helper to toggle all tools for a MCP server
+    const toggleAllMcpServerTools = useCallback((serverId, allToolNames, enable) => {
+        setEnabledMcpTools(prev => {
+            const newMap = new Map(prev);
+            if (enable) {
+                newMap.set(serverId, new Set(allToolNames));
+            }
+            else {
+                newMap.set(serverId, new Set());
+            }
+            return newMap;
+        });
+    }, []);
+    // Get all enabled MCP tool names (for sending with requests)
+    const getEnabledMcpToolNames = useCallback(() => {
+        const toolNames = [];
+        enabledMcpTools.forEach(tools => {
+            tools.forEach(toolName => toolNames.push(toolName));
+        });
+        return toolNames;
+    }, [enabledMcpTools]);
     // Load messages from store on mount when useStoreMode is enabled
     useEffect(() => {
         if (useStoreMode) {
@@ -499,6 +616,8 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
             unsubscribeRef.current?.();
             adapterRef.current?.disconnect();
         };
+        // Note: frontendTools is accessed via ref-like closure, not as reactive dependency
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [protocol, renderToolResult, onStateUpdate, useStoreMode]);
     // Auto-scroll to bottom
     useEffect(() => {
@@ -605,14 +724,15 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                     description: tool.description,
                     parameters: tool.parameters || { type: 'object', properties: {} },
                 }));
-                if (toolsForRequest.length > 0) {
-                    console.log('[ChatBase] Sending tools to AG-UI:', toolsForRequest.map(t => t.name));
-                }
+                // Get enabled MCP tool names
+                const enabledMcpToolNames = getEnabledMcpToolNames();
                 await adapterRef.current.sendMessage(userMessage, {
                     threadId: threadIdRef.current,
                     messages: allMessages,
                     ...(selectedModel && { model: selectedModel }),
                     tools: toolsForRequest,
+                    // Include enabled MCP tools as builtin_tools for backend
+                    builtinTools: enabledMcpToolNames,
                 });
             }
         }
@@ -639,6 +759,7 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
         useStoreMode,
         onSendMessage,
         enableStreaming,
+        getEnabledMcpToolNames,
     ]);
     // Handle stop
     const handleStop = useCallback(() => {
@@ -1049,8 +1170,20 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                                             fontSize: 1,
                                             whiteSpace: 'pre-wrap',
                                             wordBreak: 'break-word',
-                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
-                }), (isLoading || isStreaming) && (_jsx(Box, { sx: {
+                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: {
+                                            fontSize: 1,
+                                            lineHeight: 1.5,
+                                            '& ul, & ol': {
+                                                marginTop: '0.5em',
+                                                marginBottom: '0.5em',
+                                                paddingInlineStart: '1.25em',
+                                                listStylePosition: 'inside',
+                                            },
+                                            '& li': {
+                                                paddingInlineStart: '0.25em',
+                                            },
+                                        }, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+                }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                         display: 'flex',
                         alignItems: 'flex-start',
                         px: padding,
@@ -1157,13 +1290,70 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                         borderColor: 'border.default',
                         alignItems: 'center',
                         bg: 'canvas.subtle',
-                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", children: _jsx(ActionList, { children: _jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
-                                                                width: 8,
-                                                                height: 8,
-                                                                borderRadius: '50%',
-                                                                backgroundColor: 'success.emphasis',
-                                                            } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.find(m => m.id === selectedModel)?.name ||
-                                                'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsx(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => setSelectedModel(modelItem.id), children: modelItem.name }, modelItem.id))) }) })] }))] }))] }));
+                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
+                                            maxHeight: '60vh',
+                                            overflowY: 'auto',
+                                        }, children: _jsx(ActionList, { children: configQuery.data?.mcpServers &&
+                                                configQuery.data.mcpServers.length > 0 ? (configQuery.data.mcpServers.map(server => {
+                                                const serverTools = enabledMcpTools.get(server.id);
+                                                const allToolNames = server.tools.map(t => t.name);
+                                                const enabledCount = serverTools?.size ?? 0;
+                                                const allEnabled = enabledCount === allToolNames.length &&
+                                                    allToolNames.length > 0;
+                                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable &&
+                                                            server.tools.length > 0 && (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'space-between',
+                                                                px: 3,
+                                                                py: 2,
+                                                                borderBottom: '1px solid',
+                                                                borderColor: 'border.muted',
+                                                            }, children: [_jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
+                                                                        fontSize: 0,
+                                                                        fontWeight: 'semibold',
+                                                                        color: 'fg.muted',
+                                                                    }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => toggleAllMcpServerTools(server.id, allToolNames, !allEnabled), "aria-labelledby": `toggle-all-${server.id}` })] })), server.isAvailable && server.tools.length > 0 ? (server.tools.map(tool => {
+                                                            const isEnabled = serverTools?.has(tool.name) ?? false;
+                                                            return (_jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'space-between',
+                                                                    px: 3,
+                                                                    py: 2,
+                                                                    '&:hover': {
+                                                                        backgroundColor: 'canvas.subtle',
+                                                                    },
+                                                                }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
+                                                                                    display: 'block',
+                                                                                    fontSize: 0,
+                                                                                    color: 'fg.muted',
+                                                                                    overflow: 'hidden',
+                                                                                    textOverflow: 'ellipsis',
+                                                                                    whiteSpace: 'nowrap',
+                                                                                }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => toggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
+                                                        })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                    color: 'fg.muted',
+                                                                    fontStyle: 'italic',
+                                                                }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                    color: 'fg.muted',
+                                                                    fontStyle: 'italic',
+                                                                }, children: "Server unavailable" }) }))] }, server.id));
+                                            })) : (_jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
+                                                                    width: 8,
+                                                                    height: 8,
+                                                                    borderRadius: '50%',
+                                                                    backgroundColor: 'success.emphasis',
+                                                                } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'flex-end',
+                            }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
+                                                    ? { opacity: 0.5, cursor: 'not-allowed' }
+                                                    : undefined, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.find(m => m.id === selectedModel)?.name ||
+                                                        'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsxs(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => setSelectedModel(modelItem.id), disabled: modelItem.isAvailable === false || isA2AProtocol, sx: modelItem.isAvailable === false
+                                                        ? { color: 'fg.muted' }
+                                                        : undefined, children: [modelItem.name, modelItem.isAvailable === false && (_jsx(ActionList.Description, { variant: "block", children: "Missing API key" }))] }, modelItem.id))) }) })] }), isA2AProtocol && (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg', mt: 1 }, children: "A2A: Model set by agent config" }))] }))] }))] }));
     };
     return (_jsxs(Box, { className: className, sx: {
             display: 'flex',

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

@@ -17,5 +17,5 @@ export { MessagePart, type MessagePartProps } from './elements/MessagePart';
 export { TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
 export { ToolCallDisplay, type ToolCallDisplayProps } from './display';
 export { Chat, type ChatProps, type Transport, type Extension } from './Chat';
-export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, } from './ChatFloating';
+export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, } from './ChatFloating';
 export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';

package/lib/components/chat/components/parts/TextPart.js

@@ -47,7 +47,11 @@ export function TextPart({ text, message, isLastPart, onRegenerate, }) {
                     '& ul, & ol': {
                         marginTop: '0.5em',
                         marginBottom: '0.5em',
-                        paddingLeft: '1.5em',
+                        paddingLeft: '1.2em',
+                        marginLeft: '0.3em',
+                    },
+                    '& li': {
+                        listStylePosition: 'inside',
                     },
                     '& code': {
                         backgroundColor: 'neutral.muted',

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, } from './extensions';
-export { ChatMessages, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, type ChatMessagesProps, type ChatInputPromptProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, type ToolApprovalDialogProps, type PoweredByTagProps, type FloatingBrandButtonProps, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, 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, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, type ChatMessagesProps, type ChatInputPromptProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, 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 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/protocols/A2AAdapter.d.ts

@@ -51,6 +51,8 @@ export declare class A2AAdapter extends BaseProtocolAdapter {
         tools?: ToolDefinition[];
         threadId?: string;
         metadata?: Record<string, unknown>;
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool result back

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

@@ -137,10 +137,19 @@ export class A2AAdapter extends BaseProtocolAdapter {
                 configuration: {
                     acceptedOutputModes: ['text', 'text/plain'],
                     requestedExtensions: this.a2aConfig.enableA2UI ? ['a2ui'] : [],
+                    // Model override for per-request model selection
+                    // Note: fasta2a/pydantic-ai A2A doesn't currently support per-request model override
+                    // The model is configured at agent creation time
+                    ...(options?.model && { model: options.model }),
                 },
+                // Also send model in metadata for potential future support
+                ...(options?.model && { metadata: { model: options.model } }),
             },
             id: taskId,
         };
+        if (options?.model) {
+            console.log('[A2AAdapter] Sending with model:', options.model, '(Note: A2A uses agent-level model, not per-request)');
+        }
         try {
             const response = await fetch(this.a2aConfig.baseUrl, {
                 method: 'POST',

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

@@ -113,6 +113,8 @@ export declare class ACPAdapter extends BaseProtocolAdapter {
         tools?: ToolDefinition[];
         threadId?: string;
         metadata?: Record<string, unknown>;
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool result back through ACP

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

@@ -221,9 +221,14 @@ export class ACPAdapter extends BaseProtocolAdapter {
                     .filter(c => c.type === 'text')
                     .map(c => c.text || '')
                     .join('');
+            if (_options?.model) {
+                console.log('[ACPAdapter] Sending with model:', _options.model);
+            }
             await this.sendRequest(AGENT_METHODS.session_prompt, {
                 sessionId: this.session.sessionId,
                 content: [{ type: 'text', text: content }],
+                // Include model for per-request model override
+                ...(_options?.model && { metadata: { model: _options.model } }),
             });
         }
         catch (error) {
@@ -450,6 +455,14 @@ export class ACPAdapter extends BaseProtocolAdapter {
                 timestamp: new Date(),
             });
         }
+        // Handle error events - emit as error, not as message
+        if (params.error) {
+            this.emit({
+                type: 'error',
+                error: new Error(params.error),
+                timestamp: new Date(),
+            });
+        }
     }
     /**
      * Handle permission request from agent

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

@@ -52,6 +52,8 @@ export declare class AGUIAdapter extends BaseProtocolAdapter {
         metadata?: Record<string, unknown>;
         /** Full conversation history to send with the message */
         messages?: ChatMessage[];
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool result back through AG-UI and continue the conversation

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

@@ -135,7 +135,12 @@ export class AGUIAdapter extends BaseProtocolAdapter {
             tools: options?.tools || [],
             context: [],
             forwardedProps: null,
+            // Include model for per-request model override
+            ...(options?.model && { model: options.model }),
         };
+        if (options?.model) {
+            console.log('[AGUIAdapter] Sending with model:', options.model);
+        }
         try {
             const response = await fetch(this.aguiConfig.baseUrl, {
                 method: 'POST',

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

@@ -35,6 +35,8 @@ export declare abstract class BaseProtocolAdapter implements ProtocolAdapter {
         metadata?: Record<string, unknown>;
         /** Full conversation history to send with the message */
         messages?: ChatMessage[];
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool execution result back

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

@@ -57,6 +57,10 @@ export declare class VercelAIAdapter extends BaseProtocolAdapter {
         tools?: ToolDefinition[];
         threadId?: string;
         metadata?: Record<string, unknown>;
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
+        /** Full conversation history to send with the message */
+        messages?: ChatMessage[];
     }): Promise<void>;
     /**
      * Parse SSE stream from Vercel AI

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

@@ -105,7 +105,12 @@ export class VercelAIAdapter extends BaseProtocolAdapter {
                 trigger: 'submit-message',
                 // Optional fields based on Pydantic AI's Vercel adapter
                 ...(options?.tools && { tools: options.tools }),
+                // Model override for per-request model selection
+                ...(options?.model && { model: options.model }),
             };
+            if (options?.model) {
+                console.log('[VercelAIAdapter] Sending with model:', options.model);
+            }
             // Merge custom headers with defaults
             const headers = {
                 'Content-Type': 'application/json',

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

@@ -115,6 +115,8 @@ export interface ProtocolAdapter {
         metadata?: Record<string, unknown>;
         /** Full conversation history to send with the message */
         messages?: ChatMessage[];
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool execution result back
@@ -161,6 +163,8 @@ export declare namespace AGUI {
             content: string;
         }>;
         forwardedProps: Record<string, unknown> | null;
+        /** Optional model override for per-request model selection */
+        model?: string;
     }
     interface Event {
         type: string;

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -239,7 +239,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/components/AgentConfiguration.d.ts

@@ -1,6 +1,28 @@
 import React from 'react';
 import type { Agent } from '../stores/examplesStore';
 import type { Transport, Extension } from '../../components/chat';
+/**
+ * MCP Server Tool type
+ */
+export interface MCPServerTool {
+    name: string;
+    description?: string;
+    enabled: boolean;
+}
+/**
+ * MCP Server configuration from backend
+ */
+export interface MCPServerConfig {
+    id: string;
+    name: string;
+    url?: string;
+    enabled: boolean;
+    tools: MCPServerTool[];
+    command?: string;
+    args?: string[];
+    isAvailable?: boolean;
+    transport?: string;
+}
 type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
 export type { AgentLibrary };
 export type { Transport };

package/lib/examples/components/AgentConfiguration.js

@@ -1,5 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text, TextInput, Button, FormControl, Select, CheckboxGroup, Checkbox, Spinner, Flash, } from '@primer/react';
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash, Label, ActionList, } from '@primer/react';
+import { CheckIcon, XIcon, ToolsIcon } from '@primer/octicons-react';
+import { useQuery } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 const AGENT_LIBRARIES = [
     {
@@ -65,6 +72,21 @@ const EXTENSIONS = [
  * Form for configuring agent connection settings.
  */
 export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, agents, selectedAgentId, isCreatingAgent = false, createError = null, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onAgentSelect, onConnect, }) => {
+    // Fetch MCP servers configuration from the backend
+    const configQuery = useQuery({
+        queryKey: ['agent-config', baseUrl],
+        queryFn: async () => {
+            const response = await fetch(`${baseUrl}/api/v1/configure`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch configuration');
+            }
+            return response.json();
+        },
+        enabled: !!baseUrl,
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        retry: 1,
+    });
+    const mcpServers = configQuery.data?.mcpServers || [];
     // Determine which extensions are enabled based on transport
     const isExtensionEnabled = (ext) => {
         if (selectedAgentId !== 'new-agent')
@@ -95,7 +117,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     fontWeight: 'bold',
                     display: 'block',
                     marginBottom: 3,
-                }, children: "Connection Settings" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
+                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: selectedAgentId === 'new-agent'
                             ? 'Configure a new custom agent'
                             : 'Selected agent - form fields below are disabled' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: selectedAgentId !== 'new-agent', sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
                             ? onWsUrlChange(e.target.value)
@@ -103,7 +125,21 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                             ? 'ws://localhost:8000/api/v1/acp/ws'
                             : 'http://localhost:8000', sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: transport === 'acp'
                             ? 'The WebSocket endpoint of your agent-runtimes server'
-                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(CheckboxGroup, { sx: { marginBottom: 3 }, disabled: true, children: [_jsx(CheckboxGroup.Label, { children: "MCP Servers (Coming Soon)" }), _jsx(CheckboxGroup.Caption, { children: "Select MCP servers to connect to" }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "github", defaultChecked: true, disabled: true }), _jsx(FormControl.Label, { children: "GitHub" })] }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "anaconda", disabled: true }), _jsx(FormControl.Label, { children: "Anaconda" })] }), _jsxs(FormControl, { disabled: true, children: [_jsx(Checkbox, { value: "tavily", disabled: true }), _jsx(FormControl.Label, { children: "Tavily" })] })] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: selectedAgentId !== 'new-agent', placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(Box, { sx: {
+                    marginBottom: 3,
+                    padding: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            marginBottom: 2,
+                        }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "MCP Servers" }), configQuery.isLoading && _jsx(Spinner, { size: "small" })] }), configQuery.isError && (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch MCP servers. Check that the server is running." }) })), mcpServers.length === 0 &&
+                        !configQuery.isLoading &&
+                        !configQuery.isError && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP servers configured." })), mcpServers.length > 0 && (_jsx(ActionList, { children: mcpServers.map((server, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: server.isAvailable ? (_jsx(CheckIcon, { size: 16 })) : (_jsx(XIcon, { size: 16 })) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), _jsx(Label, { variant: server.isAvailable ? 'success' : 'secondary', size: "small", children: server.isAvailable ? 'Available' : 'Not Available' })] }), server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] })] }, server.id))) }))] }), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
                     !agentName ||
                     (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { sx: {
                         display: 'flex',

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

@@ -8,4 +8,4 @@ export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
 export { Rating } from './Rating';
 export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension } from './AgentConfiguration';
+export type { AgentLibrary, Transport, Extension, MCPServerConfig, MCPServerTool, } from './AgentConfiguration';

package/lib/stubs/keytar.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Stub for keytar module in browser environments.
+ * keytar is a native Node.js module for system keychain access
+ * and cannot run in the browser.
+ */
+export declare const getPassword: (_service: string, _account: string) => Promise<string | null>;
+export declare const setPassword: (_service: string, _account: string, _password: string) => Promise<void>;
+export declare const deletePassword: (_service: string, _account: string) => Promise<boolean>;
+export declare const findPassword: (_service: string) => Promise<string | null>;
+export declare const findCredentials: (_service: string) => Promise<Array<{
+    account: string;
+    password: string;
+}>>;
+export declare const getPasswordSync: (_service: string, _account: string) => string | null;
+export declare const setPasswordSync: (_service: string, _account: string, _password: string) => void;
+export declare const deletePasswordSync: (_service: string, _account: string) => boolean;
+declare const _default: {
+    getPassword: (_service: string, _account: string) => Promise<string | null>;
+    setPassword: (_service: string, _account: string, _password: string) => Promise<void>;
+    deletePassword: (_service: string, _account: string) => Promise<boolean>;
+    findPassword: (_service: string) => Promise<string | null>;
+    findCredentials: (_service: string) => Promise<Array<{
+        account: string;
+        password: string;
+    }>>;
+    getPasswordSync: (_service: string, _account: string) => string | null;
+    setPasswordSync: (_service: string, _account: string, _password: string) => void;
+    deletePasswordSync: (_service: string, _account: string) => boolean;
+};
+export default _default;

package/lib/stubs/keytar.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Stub for keytar module in browser environments.
+ * keytar is a native Node.js module for system keychain access
+ * and cannot run in the browser.
+ */
+export const getPassword = async (_service, _account) => null;
+export const setPassword = async (_service, _account, _password) => { };
+export const deletePassword = async (_service, _account) => false;
+export const findPassword = async (_service) => null;
+export const findCredentials = async (_service) => [];
+// Sync versions (if any code tries to use them)
+export const getPasswordSync = (_service, _account) => null;
+export const setPasswordSync = (_service, _account, _password) => { };
+export const deletePasswordSync = (_service, _account) => false;
+export default {
+    getPassword,
+    setPassword,
+    deletePassword,
+    findPassword,
+    findCredentials,
+    getPasswordSync,
+    setPasswordSync,
+    deletePasswordSync,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "workspaces": [
     ".",
@@ -65,7 +65,7 @@
     "clean:dist": "rimraf dist",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "create:patches": "bash scripts/create-patches.sh",
-    "examples": "run-p jupyter:start server:start examples:vite",
+    "examples": "run-p server:start examples:vite",
     "examples:fresh": "npm run clean:cache && npm run examples",
     "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
     "examples:vite": "VITE_APP_TARGET=examples VITE_DATALAYER_RUN_URL=http://localhost:8888 vite",
@@ -118,9 +118,9 @@
     "@ag-ui/encoder": "^0.0.42",
     "@ag-ui/proto": "^0.0.42",
     "@agentclientprotocol/sdk": "^0.8.0",
-    "@ai-sdk/react": "^3.0.5",
+    "@ai-sdk/react": "3.0.0-beta.172",
     "@anthropic-ai/sdk": "^0.52.0",
-    "@datalayer/core": "^0.0.20",
+    "@datalayer/core": "^0.0.24",
     "@datalayer/icons-react": "^1.0.6",
     "@datalayer/jupyter-lexical": "^1.0.6",
     "@datalayer/jupyter-react": "^2.0.0",
@@ -281,6 +281,7 @@
     "vitest": "^3.2.4"
   },
   "resolutions": {
+    "@ai-sdk/react": "3.0.0-beta.172",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",
@@ -297,6 +298,7 @@
     "typescript": "^5.8.3"
   },
   "overrides": {
+    "@ai-sdk/react": "3.0.0-beta.172",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",

package/style/base.css

@@ -2,6 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+
 /*
  ---break---
  */
@@ -64,49 +65,6 @@ body {
 /*  --jp-ui-font-size1: 12px; */
 }
 
-.Primer_Brand__Hero-module__Hero___EM3jf {
-  padding-top: 88px;
-}
-
-#dla-hero .Primer_Brand__Heading-module__Heading--1___Ufc7G {
-  font-size: 62px;
-}
-
-#dla-hero .Primer_Brand__Grid-module__Grid___q48mT {
-  grid-column-gap: 12px !important;
-}
-
-#dla-hero .Primer_Brand__Text-module__Text___pecHN {
-  max-width: 1000px;
-  padding-right: 15px;
-}
-
-#dla-hero .Primer_Brand__Text-module__Text___pecHN {
-  line-height: 16px;
-}
-
-/* TODO Check the specificity of this rule */
-.jp-ThemedContainer a {
-  color: var(--jp-brand-color1, #1976d2) !important;
-  text-decoration: none !important
-}
-
-.jp-Shout-button {
-  height: 30px;
-  width: 150px;
-  margin: 8px;
-  padding-top: 9px;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: 2px;
-  background-color: #2296f3;
-  color: #212121;
-}
-
-.jp-Shout-summary {
-  margin: 4px;
-}
-
 /*
  ---break---
  */