@datalayer/agent-runtimes 0.0.10 → 0.0.12

package/lib/examples/{AgentSpaceFormExample.js → AgentRuntimeFormExample.js}

@@ -13,9 +13,12 @@ import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-que
 import { Box } from '@datalayer/primer-addons';
 import { DatalayerThemeProvider } from '@datalayer/core';
 import { Chat, useChatStore } from '../components/chat';
+import { DEFAULT_MODEL } from '../specs';
 import { useAgentsStore } from './stores/examplesStore';
 import { useIdentity } from '../identity';
-import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from '../components';
+import { MockFileBrowser, MainContent, Header, FooterMetrics, } from './components';
+import { AgentConfiguration, } from '../components';
+import { isSpecSelection, getSpecId } from '../components/AgentConfiguration';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -106,7 +109,7 @@ const DEFAULT_IDENTITY_PROVIDERS = {
         }
         : {}),
 };
-const AgentSpaceFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'ag-ui', initialModel = 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0', initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
+const AgentRuntimeFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'ag-ui', initialModel = DEFAULT_MODEL, initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
 // Deprecated props - merged into identityProviders for backward compat
 githubClientId, kaggleToken, }) => {
     const [wsUrl, setWsUrl] = useState(initialWsUrl);
@@ -258,10 +261,10 @@ githubClientId, kaggleToken, }) => {
             connectedTokenProvidersRef.current.add(provider);
             connectWithToken(provider, token, { displayName, iconUrl })
                 .then(() => {
-                console.log(`[AgentSpaceFormExample] ${provider} connected with token`);
+                console.log(`[AgentRuntimeFormExample] ${provider} connected with token`);
             })
                 .catch(err => {
-                console.error(`[AgentSpaceFormExample] Failed to connect ${provider}:`, err);
+                console.error(`[AgentRuntimeFormExample] Failed to connect ${provider}:`, err);
                 // Remove from attempted set so we can retry
                 connectedTokenProvidersRef.current.delete(provider);
             });
@@ -269,10 +272,10 @@ githubClientId, kaggleToken, }) => {
     }, [tokenProviders, connectWithToken, isIdentityConnected]);
     // Handle identity connect/disconnect
     const handleIdentityConnect = useCallback((identity) => {
-        console.log('[AgentSpaceFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
+        console.log('[AgentRuntimeFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
     }, []);
     const handleIdentityDisconnect = useCallback((provider) => {
-        console.log('[AgentSpaceFormExample] Identity disconnected:', provider);
+        console.log('[AgentRuntimeFormExample] Identity disconnected:', provider);
     }, []);
     // Handle codemode change - keep MCP server selections to scope codemode tools
     const handleEnableCodemodeChange = (enabled) => {
@@ -335,7 +338,24 @@ githubClientId, kaggleToken, }) => {
     }, [autoSelectMcpServers, enableCodemode, selectedMcpServers, baseUrl]);
     // Track previous MCP servers to detect changes
     const prevMcpServersRef = useRef(selectedMcpServers);
-    const handleAgentSelect = (agentId) => {
+    // Cache for library specs (fetched on-demand, outside QueryClientProvider)
+    const librarySpecsRef = useRef(null);
+    const fetchLibrarySpecs = useCallback(async () => {
+        if (librarySpecsRef.current)
+            return librarySpecsRef.current;
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library`);
+            if (!response.ok)
+                return [];
+            const data = await response.json();
+            librarySpecsRef.current = data;
+            return data;
+        }
+        catch {
+            return [];
+        }
+    }, [baseUrl]);
+    const handleAgentSelect = async (agentId) => {
         setSelectedAgentId(agentId);
         setCreateError(null);
         if (agentId === 'new-agent') {
@@ -343,6 +363,23 @@ githubClientId, kaggleToken, }) => {
             setAgentName(DEFAULT_AGENT_ID);
             setTransport('ag-ui');
         }
+        else if (isSpecSelection(agentId)) {
+            // Populate form fields from the selected library spec
+            const specId = getSpecId(agentId);
+            const specs = await fetchLibrarySpecs();
+            const spec = specs.find(s => s.id === specId);
+            if (spec) {
+                setAgentName(spec.id);
+                // Keep current transport, model, agentLibrary - user can override
+                if (spec.skills.length > 0) {
+                    setSelectedSkills(spec.skills);
+                    setEnableCodemode(true);
+                }
+                if (spec.systemPromptCodemodeAddons) {
+                    setEnableCodemode(true);
+                }
+            }
+        }
         else {
             const agent = agents.find(a => a.id === agentId);
             if (agent) {
@@ -358,6 +395,10 @@ githubClientId, kaggleToken, }) => {
         setIsCreatingAgent(true);
         setCreateError(null);
         try {
+            // Resolve spec ID if creating from a library spec
+            const specId = isSpecSelection(selectedAgentId)
+                ? getSpecId(selectedAgentId)
+                : undefined;
             const response = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: {
@@ -377,6 +418,7 @@ githubClientId, kaggleToken, }) => {
                     selected_mcp_servers: selectedMcpServers,
                     skills: selectedSkills,
                     jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
+                    ...(specId ? { agent_spec_id: specId } : {}),
                 }),
             });
             if (!response.ok) {
@@ -412,6 +454,7 @@ githubClientId, kaggleToken, }) => {
         selectedSkills,
         useJupyterSandbox,
         jupyterSandboxUrl,
+        selectedAgentId,
     ]);
     /**
      * Delete an agent via the API
@@ -438,9 +481,11 @@ githubClientId, kaggleToken, }) => {
     useEffect(() => {
         prevMcpServersRef.current = selectedMcpServers;
     }, [selectedMcpServers]);
+    // True when creating a new agent (blank or from a library spec)
+    const isNewMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
     const handleConnect = async () => {
-        // For existing agents (not new-agent), ensure transport and agentName are set
-        if (selectedAgentId !== 'new-agent') {
+        // For existing agents (not new-agent or spec), ensure transport and agentName are set
+        if (!isNewMode) {
             const agent = agents.find(a => a.id === selectedAgentId);
             if (agent) {
                 setTransport(agent.transport);
@@ -477,14 +522,13 @@ githubClientId, kaggleToken, }) => {
     };
     const handleReset = async () => {
         // Delete the agent from the server if we created it
-        if (selectedAgentId === 'new-agent' && agentName) {
+        if ((selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId)) &&
+            agentName) {
             await deleteAgentOnServer(agentName);
         }
         setIsConfigured(false);
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
-                            ? undefined
-                            : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
                             : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
@@ -498,7 +542,7 @@ githubClientId, kaggleToken, }) => {
                                         border: '1px solid',
                                         borderLeft: 'none',
                                         borderColor: 'border.default',
-                                    } }) }), _jsx(PageLayout.Pane, { position: "start", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '90px' }, children: selectedAgentId === 'new-agent' ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
+                                    } }) }), _jsx(PageLayout.Pane, { position: "start", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '90px' }, children: isNewMode ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
                             position: 'fixed',
                             left: 0,
                             top: '50%',
@@ -510,9 +554,9 @@ githubClientId, kaggleToken, }) => {
                                 border: '1px solid',
                                 borderLeft: 'none',
                                 borderColor: 'border.default',
-                            } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showNotebook: showNotebook, timeTravel: timeTravel, onTimeTravelChange: setTimeTravel, richEditor: false, notebookFile: currentAgent?.notebookFile, lexicalFile: currentAgent?.lexicalFile, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, enableCodemode: enableCodemode, selectedMcpServers: selectedMcpServers, onSelectedMcpServersChange: handleSelectedServersChange, onMcpServersChange: () => {
+                            } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showNotebook: showNotebook, timeTravel: timeTravel, onTimeTravelChange: setTimeTravel, richEditor: false, notebookFile: currentAgent?.notebookFile, lexicalFile: currentAgent?.lexicalFile, isNewAgent: isNewMode, isConfigured: isConfigured, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, enableCodemode: enableCodemode, selectedMcpServers: selectedMcpServers, onSelectedMcpServersChange: handleSelectedServersChange, onMcpServersChange: () => {
                                 // Trigger codemode tool regeneration when MCP servers change at runtime
-                                console.log('[AgentSpaceFormExample] MCP servers changed, regenerating codemode tools...');
+                                console.log('[AgentRuntimeFormExample] MCP servers changed, regenerating codemode tools...');
                                 // The Chat component will pick up the new selectedMcpServers via props
                             } }) }), rightPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',
@@ -600,4 +644,4 @@ githubClientId, kaggleToken, }) => {
                             zIndex: 10,
                         }, children: selectedAgentId !== 'new-agent' && (_jsx(FooterMetrics, { tokens: 1523552, cost: 2.01 })) })] }) }) }));
 };
-export default AgentSpaceFormExample;
+export default AgentRuntimeFormExample;

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -49,6 +49,7 @@ import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin,
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
@@ -187,6 +188,8 @@ function LexicalToolsPlugin({ onToolsReady, }) {
 const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, onToolsReady, }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    // AI actions registered as toolbar items via the primer-addons toolbar extensibility
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -213,10 +216,10 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     padding: 3,
                     backgroundColor: 'canvas.default',
                     minHeight: '600px',
-                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                             type: 'ag-ui',
                                             endpoint: AG_UI_ENDPOINT,
-                                        } })] }) })] }) })] }));
+                                        }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
 });
 function LexicalWithChat({ content, serviceManager, }) {
     // Ensure the agent exists before rendering chat
@@ -244,7 +247,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, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, 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", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -49,6 +49,8 @@ import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Import Chat components
 import { ChatSidebar, } from '../components/chat';
+import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
+import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
@@ -72,6 +74,8 @@ function CodeHighlightingPlugin() {
 function LexicalEditor({ serviceManager }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
+    // AI actions registered as toolbar items
+    const { toolbarItems, isAiOpen, pendingPrompt, clearPendingPrompt, closeAi } = useChatInlineToolbarItems();
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -98,7 +102,10 @@ function LexicalEditor({ serviceManager }) {
                                     left: '24px',
                                     color: 'var(--fgColor-muted)',
                                     pointerEvents: 'none',
-                                }, children: "Start typing or use the chat to create content..." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(CodeHighlightingPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] })] }) }));
+                                }, children: "Start typing or use the chat to create content..." }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(CodeHighlightingPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterInputOutputPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, {}), _jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                                type: 'ag-ui',
+                                endpoint: `${DEFAULT_BASE_URL}/api/v1/examples/${DEFAULT_AGENT_ID}/`,
+                            }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] })] }) }));
 }
 export function ChatLexicalExampleInner({ serviceManager, }) {
     // Get lexical tools for ChatSidebar

package/lib/examples/AgentRuntimeNotebookExample.js

@@ -17,12 +17,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React, { useEffect, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+import { DEFAULT_MODEL } from '../specs';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook
@@ -54,7 +55,7 @@ function useEnsureAgent(agentId, baseUrl) {
                         description: 'Demo agent for notebook example',
                         agent_library: 'pydantic-ai',
                         transport: 'ag-ui',
-                        model: 'openai:gpt-4o-mini',
+                        model: DEFAULT_MODEL,
                         system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
                     }),
                 });
@@ -106,13 +107,13 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
     // Ensure the agent exists before rendering chat
     const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
     // Get notebook tools for ChatFloating
-    const tools = useNotebookTools(NOTEBOOK_ID);
+    const frontendTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsxs(Box, { sx: {
             height: '100vh',
             width: '100vw',
@@ -127,7 +128,7 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", tools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',

package/lib/examples/CopilotKitNotebookExample.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
 // CopilotKit imports
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
@@ -50,7 +50,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                         borderRadius: 8,
                         padding: 24,
                         backgroundColor: 'var(--bgColor-default)',
-                    }, children: serviceManager ? (_jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
+                    }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
 });
 /**
  * Component to register actions with CopilotKit.

package/lib/examples/JupyterNotebookExample.js

@@ -10,12 +10,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { JupyterReactTheme, Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
 };
 export default JupyterNotebookExample;

package/lib/{components → examples/components}/Header.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { AgentStatus } from '../../types/Types';
 export interface HeaderProps {
     activeSession: string;
     agentName?: string;
     agentDescription?: string;
-    agentStatus?: 'running' | 'paused';
+    agentStatus?: AgentStatus;
     showContextTree: boolean;
     isNewAgent?: boolean;
     isConfigured?: boolean;

package/lib/{components → examples/components}/HeaderControls.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
-import { Sparklines, SparklinesLine } from './sparklines';
+import { Sparklines, SparklinesLine } from '../../components/sparklines';
 /**
  * Header Controls Component
  *

package/lib/{components → examples/components}/LexicalEditor.d.ts

@@ -12,11 +12,16 @@ import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
 import React from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
+import type { ToolbarItem } from '@datalayer/primer-addons';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../examples/lexical/lexical-theme.css';
+import '../lexical/lexical-theme.css';
 export interface LexicalEditorProps {
     content?: string;
     serviceManager?: ServiceManager.IManager;
+    /** Optional extra toolbar items (e.g. AI actions from useChatInlineToolbarItems) */
+    extraItems?: ToolbarItem[];
+    /** Optional additional children to render inside the LexicalComposer */
+    children?: React.ReactNode;
 }
 /**
  * Lexical Editor Component

package/lib/{components → examples/components}/LexicalEditor.js

@@ -34,9 +34,9 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
-import { editorConfig } from '../examples/lexical/editorConfig';
+import { editorConfig } from '../lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
-import '../examples/lexical/lexical-theme.css';
+import '../lexical/lexical-theme.css';
 const LEXICAL_ID = 'agent-runtime-lexical-editor';
 const INITIAL_CONTENT = undefined;
 /**
@@ -97,7 +97,7 @@ function SimpleKernelPluginsInner() {
  *
  * Rich text editor with Simple integration.
  */
-export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) => {
+export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, extraItems, children, }) => {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     const onRef = (_floatingAnchorElem) => {
@@ -115,5 +115,5 @@ export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, }) =>
             padding: 3,
             backgroundColor: 'canvas.default',
             minHeight: '600px',
-        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) }));
+        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
 };

package/lib/{components → examples/components}/MainContent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
-import { type McpServerSelection } from './McpServerManager';
+import { type McpServerSelection } from '../../components/McpServerManager';
 export interface MainContentProps {
     showNotebook: boolean;
     timeTravel: number;

package/lib/{components → examples/components}/MainContent.js

@@ -9,9 +9,9 @@ import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Viewer } from '@datalayer/jupyter-react';
 import { TimeTravel } from './TimeTravel';
 import { LexicalEditor } from './LexicalEditor';
-import { McpServerManager } from './McpServerManager';
-import matplotlib from '../examples/stores/notebooks/NotebookExample2.ipynb.json';
-import emptyNotebook from '../examples/stores/notebooks/Empty.ipynb.json';
+import { McpServerManager, } from '../../components/McpServerManager';
+import matplotlib from '../stores/notebooks/NotebookExample2.ipynb.json';
+import emptyNotebook from '../stores/notebooks/Empty.ipynb.json';
 /**
  * Main Content Component
  *
@@ -30,7 +30,8 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
         }
         else if (notebookFile) {
             // Dynamically import the notebook based on the file name
-            import(/* @vite-ignore */ `../stores/agents/${notebookFile}`)
+            import(
+            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${notebookFile}`)
                 .then(module => {
                 setNotebookData(module.default);
             })
@@ -46,7 +47,8 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
     React.useEffect(() => {
         if (lexicalFile && !isNewAgent) {
             // Dynamically import the lexical file based on the file name
-            import(/* @vite-ignore */ `../stores/agents/${lexicalFile}`)
+            import(
+            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${lexicalFile}`)
                 .then(module => {
                 // Convert the JSON to a string if needed
                 setLexicalContent(typeof module.default === 'string'

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

@@ -0,0 +1,16 @@
+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';

package/lib/examples/components/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// 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';

package/lib/examples/example-selector.js

@@ -16,7 +16,7 @@ export const EXAMPLES = {
     AgUiSharedStateExample: () => import('./AgUiSharedStateExample'),
     AgUiToolsBasedGenUIExample: () => import('./AgUiToolsBasedGenUIExample'),
     AgentRuntimeCustomExample: () => import('./AgentRuntimeCustomExample'),
-    AgentSpaceFormExample: () => import('./AgentSpaceFormExample'),
+    AgentRuntimeFormExample: () => import('./AgentRuntimeFormExample'),
     AgentRuntimeLexicalSidebarExample: () => import('./AgentRuntimeLexicalSidebarExample'),
     AgentRuntimeNotebookExample: () => import('./AgentRuntimeNotebookExample'),
     AgentRuntimeNotebookSidebarExample: () => import('./AgentRuntimeNotebookSidebarExample'),
@@ -24,6 +24,7 @@ export const EXAMPLES = {
     //  AgentRuntimeLexical2Example: () =>
     //    import('./AgentRuntimeLexical2Example'),
     AgentRuntimeStandaloneExample: () => import('./AgentRuntimeStandaloneExample'),
+    AgentRuntimeChatExample: () => import('./AgentRuntimeChatExample'),
     CopilotKitNotebookExample: () => import('./CopilotKitNotebookExample'),
     CopilotKitLexicalExample: () => import('./CopilotKitLexicalExample'),
     DatalayerNotebookExample: () => import('./DatalayerNotebookExample'),

package/lib/examples/index.d.ts

@@ -12,7 +12,7 @@ export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexi
 export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
+export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/index.js

@@ -16,7 +16,7 @@ export { default as AgentRuntimeLexicalSidebarExample } from './AgentRuntimeLexi
 export { default as AgentRuntimeNotebookExample } from './AgentRuntimeNotebookExample';
 export { default as AgentRuntimeNotebookSidebarExample } from './AgentRuntimeNotebookSidebarExample';
 export { default as AgentRuntimeStandaloneExample } from './AgentRuntimeStandaloneExample';
-export { default as AgentSpaceFormExample } from './AgentSpaceFormExample';
+export { default as AgentRuntimeFormExample } from './AgentRuntimeFormExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';

package/lib/examples/main.js

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
+import { coreStore, iamStore, createDatalayerServiceManager, DatalayerThemeProvider, } from '@datalayer/core';
 import { useChatStore } from '../components/chat/store';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
@@ -292,7 +292,7 @@ export const ExampleApp = () => {
     if (serviceManager) {
         exampleProps.serviceManager = serviceManager;
     }
-    return (_jsx(JupyterReactTheme, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
                         position: 'fixed',
                         top: 0,
                         left: 0,

package/lib/examples/stores/examplesStore.d.ts

@@ -1,26 +1,5 @@
-export type AgentStatus = 'running' | 'paused';
-export type Transport = 'acp' | 'ag-ui' | 'vercel-ai' | 'a2a';
-export interface Agent {
-    id: string;
-    name: string;
-    description: string;
-    author: string;
-    lastEdited: string;
-    screenshot: string;
-    status?: AgentStatus;
-    transport: Transport;
-    avatarUrl: string;
-    notebookFile: string;
-    lexicalFile: string;
-    stars: number;
-    notifications: number;
-}
-export type AgentsState = {
-    agents: readonly Agent[];
-    getAgentById: (id: string) => Agent | undefined;
-    updateAgentStatus: (id: string, status: AgentStatus) => void;
-    toggleAgentStatus: (id: string) => void;
-};
+import type { Agent, AgentStatus, AgentsState, Transport } from '../../types/Types';
+export type { Agent, AgentStatus, AgentsState, Transport };
 export declare const agentsStore: any;
 export declare function useAgentsStore(): AgentsState;
 export declare function useAgentsStore<T>(selector: (state: AgentsState) => T): T;

package/lib/index.d.ts

@@ -3,4 +3,5 @@ export * from './state';
 export * from './runtime';
 export * from './identity';
 export * from './config';
-export type { ConversationEntry, MCPServer, AgentSkillSpec, AgentSpec, AIModel, FrontendConfig, BuiltinTool, MCPServerTool, } from './types';
+export * from './specs';
+export type { ConversationEntry, MCPServer, AgentSkillSpec, AgentSpec, AIModelRuntime, FrontendConfig, BuiltinTool, MCPServerTool, } from './types/Types';

package/lib/index.js

@@ -7,3 +7,4 @@ export * from './state';
 export * from './runtime';
 export * from './identity';
 export * from './config';
+export * from './specs';