@datalayer/agent-runtimes 1.0.2 → 1.0.4

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

@@ -1,13 +1,12 @@
 import React from 'react';
-import type { Transport } from '../components/chat';
-import { type AgentLibrary, type McpServerSelection } from '../components';
+import type { AgentLibrary, McpServerSelection, Protocol } from '../types';
 /**
  * Agent Runtime Example Component
  *
  * Demonstrates the multi-transport, multi-agent architecture of agent-runtimes.
  *
  * Features:
- * - Agent library selection (Pydantic AI, LangChain, Simple AI)
+ * - Agent library selection (Pydantic AI, LangChain, Google ADK, etc.)
  * - Transport selection (ACP, AG-UI, A2A)
  * - Configurable WebSocket URL and Agent ID
  * - Real-time streaming responses
@@ -59,7 +58,7 @@ type AgentRuntimeFormExampleProps = {
     initialBaseUrl?: string;
     initialAgentName?: string;
     initialAgentLibrary?: AgentLibrary;
-    initialTransport?: Transport;
+    initialTransport?: Protocol;
     initialModel?: string;
     initialEnableCodemode?: boolean;
     initialAllowDirectToolCalls?: boolean;

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

@@ -11,14 +11,15 @@ import { AiAgentIcon } from '@datalayer/icons-react';
 import { Blankslate } from '@primer/react/experimental';
 import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './stores/themedProvider';
-import { Chat, useChatStore } from '../components/chat';
+import { ThemedProvider } from './utils/themedProvider';
+import { Chat } from '../chat';
 import { DEFAULT_MODEL } from '../specs';
-import { useAgentsStore } from './stores/examplesStore';
+import { useAgentsStore } from './utils/examplesStore';
 import { useIdentity } from '../identity';
-import { MockFileBrowser, MainContent, Header, FooterMetrics, } from './components';
-import { AgentConfiguration, } from '../components';
-import { isSpecSelection, getSpecId } from '../components/AgentConfiguration';
+import { isSpecSelection, getSpecId } from '../config/AgentConfiguration';
+import { MockFileBrowser, MainContent, Header } from './components';
+import { AgentConfiguration } from '../config';
+import { useChatStore } from '../stores';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -76,6 +77,12 @@ function ChatWithJupyterStatus({ baseUrl, isConfigured, enableCodemode, useJupyt
 const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
 const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const DEFAULT_AGENT_ID = 'demo-agent';
+const DEFAULT_SYSTEM_PROMPT = 'You are a helpful AI assistant.';
+const RIGHT_PANE_WIDTH = {
+    min: '420px',
+    default: '80vw',
+    max: '95vw',
+};
 // GitHub OAuth client ID - set via environment variable for security
 // For development, you can create a GitHub OAuth App at:
 // https://github.com/settings/developers
@@ -109,7 +116,7 @@ const 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, 
+const AgentRuntimeFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'vercel-ai', 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);
@@ -120,6 +127,13 @@ githubClientId, kaggleToken, }) => {
     const [transport, setTransport] = useState(initialTransport);
     const [extensions, setExtensions] = useState([]);
     const [model, setModel] = useState(initialModel);
+    const [description, setDescription] = useState('');
+    const [goal, setGoal] = useState('');
+    const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPT);
+    const [systemPromptCodemodeAddons, setSystemPromptCodemodeAddons] = useState('');
+    const [tools, setTools] = useState([]);
+    const [sandboxVariant, setSandboxVariant] = useState('');
+    const [selectedLibrarySpec, setSelectedLibrarySpec] = useState(null);
     const [isConfigured, setIsConfigured] = useState(false);
     // Agent capabilities state (moved from Header toggles)
     const [selectedSkills, setSelectedSkills] = useState([]);
@@ -290,10 +304,8 @@ githubClientId, kaggleToken, }) => {
     const [activeSession, setActiveSession] = useState('session-1');
     const [codemode, _] = useState(false);
     const [showContextTree, setShowContextTree] = useState(false);
-    const [showNotebook] = useState(true);
-    const [leftPaneVisible, setLeftPaneVisible] = useState(true);
+    const [leftPaneVisible, setLeftPaneVisible] = useState(false);
     const [rightPaneVisible, setRightPaneVisible] = useState(true);
-    const [timeTravel, setTimeTravel] = useState(0);
     const [isCreatingAgent, setIsCreatingAgent] = useState(false);
     const [createError, setCreateError] = useState(null);
     // Get agents and current agent from store
@@ -303,7 +315,7 @@ githubClientId, kaggleToken, }) => {
     // Initialize transport from selected agent on mount
     useEffect(() => {
         if (currentAgent) {
-            setTransport(currentAgent.transport);
+            setTransport(currentAgent.protocol);
             setAgentName(currentAgent.id);
         }
     }, [currentAgent]);
@@ -361,6 +373,19 @@ githubClientId, kaggleToken, }) => {
         if (agentId === 'new-agent') {
             // Reset to defaults for new agent
             setAgentName(DEFAULT_AGENT_ID);
+            setDescription('');
+            setGoal('');
+            setSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+            setSystemPromptCodemodeAddons('');
+            setTools([]);
+            setSandboxVariant('');
+            setSelectedSkills([]);
+            setSelectedMcpServers([]);
+            setSelectedLibrarySpec(null);
+            setEnableCodemode(false);
+            setAllowDirectToolCalls(false);
+            setEnableToolReranker(false);
+            setUseJupyterSandbox(false);
             setTransport('ag-ui');
         }
         else if (isSpecSelection(agentId)) {
@@ -369,22 +394,50 @@ githubClientId, kaggleToken, }) => {
             const specs = await fetchLibrarySpecs();
             const spec = specs.find(s => s.id === specId);
             if (spec) {
+                setSelectedLibrarySpec(spec);
                 setAgentName(spec.id);
-                // Keep current transport, model, agentLibrary - user can override
-                if (spec.skills.length > 0) {
-                    setSelectedSkills(spec.skills);
-                    setEnableCodemode(true);
+                setDescription(spec.description || '');
+                setGoal(spec.goal || '');
+                setSystemPrompt(spec.systemPrompt || spec.goal || DEFAULT_SYSTEM_PROMPT);
+                setSystemPromptCodemodeAddons(spec.systemPromptCodemodeAddons || '');
+                setTools(spec.tools || []);
+                setSandboxVariant(spec.sandboxVariant || '');
+                if (spec.model) {
+                    setModel(spec.model);
                 }
-                if (spec.systemPromptCodemodeAddons) {
-                    setEnableCodemode(true);
+                if (spec.protocol === 'ag-ui' ||
+                    spec.protocol === 'acp' ||
+                    spec.protocol === 'vercel-ai' ||
+                    spec.protocol === 'a2a') {
+                    setTransport(spec.protocol);
                 }
+                setSelectedMcpServers((spec.mcpServers || []).map(server => ({
+                    id: server.id,
+                    origin: 'config',
+                })));
+                setSelectedSkills(spec.skills || []);
+                const codemodeConfig = spec.codemode && typeof spec.codemode === 'object'
+                    ? spec.codemode
+                    : null;
+                const codemodeEnabled = !!spec.systemPromptCodemodeAddons || !!codemodeConfig?.enabled;
+                setEnableCodemode(codemodeEnabled);
+                setAllowDirectToolCalls(Boolean(codemodeConfig?.allowDirectToolCalls ??
+                    codemodeConfig?.allow_direct_tool_calls));
+                setEnableToolReranker(Boolean(codemodeConfig?.enableToolReranker ??
+                    codemodeConfig?.enable_tool_reranker));
+                setUseJupyterSandbox(spec.sandboxVariant === 'local-jupyter' ||
+                    spec.sandboxVariant === 'jupyter');
+            }
+            else {
+                setSelectedLibrarySpec(null);
             }
         }
         else {
+            setSelectedLibrarySpec(null);
             const agent = agents.find(a => a.id === agentId);
             if (agent) {
                 setAgentName(agent.id);
-                setTransport(agent.transport);
+                setTransport(agent.protocol);
             }
         }
     };
@@ -406,11 +459,15 @@ githubClientId, kaggleToken, }) => {
                 },
                 body: JSON.stringify({
                     name: agentName,
-                    description: `Agent created via UI (${agentLibrary})`,
+                    description: description || `Agent created via UI (${agentLibrary})`,
+                    goal: goal || undefined,
                     agent_library: agentLibrary,
                     transport: transport,
                     model: model,
-                    system_prompt: 'You are a helpful AI assistant.',
+                    system_prompt: systemPrompt || DEFAULT_SYSTEM_PROMPT,
+                    system_prompt_codemode_addons: systemPromptCodemodeAddons || undefined,
+                    tools: tools,
+                    sandbox_variant: sandboxVariant || undefined,
                     enable_skills: enableSkills,
                     enable_codemode: enableCodemode,
                     allow_direct_tool_calls: allowDirectToolCalls,
@@ -418,6 +475,7 @@ githubClientId, kaggleToken, }) => {
                     selected_mcp_servers: selectedMcpServers,
                     skills: selectedSkills,
                     jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
+                    agent_spec: selectedLibrarySpec || undefined,
                     ...(specId ? { agent_spec_id: specId } : {}),
                 }),
             });
@@ -444,8 +502,14 @@ githubClientId, kaggleToken, }) => {
         baseUrl,
         agentName,
         agentLibrary,
+        description,
+        goal,
         transport,
         model,
+        systemPrompt,
+        systemPromptCodemodeAddons,
+        tools,
+        sandboxVariant,
         enableSkills,
         enableCodemode,
         allowDirectToolCalls,
@@ -455,6 +519,7 @@ githubClientId, kaggleToken, }) => {
         useJupyterSandbox,
         jupyterSandboxUrl,
         selectedAgentId,
+        selectedLibrarySpec,
     ]);
     /**
      * Delete an agent via the API
@@ -488,7 +553,7 @@ githubClientId, kaggleToken, }) => {
         if (!isNewMode) {
             const agent = agents.find(a => a.id === selectedAgentId);
             if (agent) {
-                setTransport(agent.transport);
+                setTransport(agent.protocol);
                 setAgentName(agent.id);
             }
             setIsConfigured(true);
@@ -542,7 +607,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: 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: {
+                                    } }) }), _jsx(PageLayout.Pane, { position: "start", "aria-label": "File browser pane", 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%',
@@ -554,7 +619,7 @@ 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: isNewMode, isConfigured: isConfigured, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, enableCodemode: enableCodemode, selectedMcpServers: selectedMcpServers, onSelectedMcpServersChange: handleSelectedServersChange, onMcpServersChange: () => {
+                            } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showWelcomeMessage: true, 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('[AgentRuntimeFormExample] MCP servers changed, regenerating codemode tools...');
                                 // The Chat component will pick up the new selectedMcpServers via props
@@ -570,15 +635,15 @@ githubClientId, kaggleToken, }) => {
                                         border: '1px solid',
                                         borderRight: 'none',
                                         borderColor: 'border.default',
-                                    } }) }), _jsx(PageLayout.Pane, { position: "end", width: "large", resizable: true, sticky: true, children: _jsx(Box, { sx: {
+                                    } }) }), _jsx(PageLayout.Pane, { position: "end", "aria-label": "Agent configuration and chat pane", width: RIGHT_PANE_WIDTH, resizable: true, sticky: true, children: _jsx(Box, { sx: {
                                         height: '100%',
                                         display: 'flex',
                                         flexDirection: 'column',
                                         p: 2,
-                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onUseJupyterSandboxChange: setUseJupyterSandbox, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
+                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, protocol: currentAgent?.protocol || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, description: description, goal: goal, model: model, systemPrompt: systemPrompt, systemPromptCodemodeAddons: systemPromptCodemodeAddons, tools: tools, sandboxVariant: sandboxVariant, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onDescriptionChange: setDescription, onGoalChange: setGoal, onModelChange: setModel, onSystemPromptChange: setSystemPrompt, onSystemPromptCodemodeAddonsChange: setSystemPromptCodemodeAddons, onToolsChange: setTools, onSandboxVariantChange: setSandboxVariant, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onUseJupyterSandboxChange: setUseJupyterSandbox, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
                                     /* Chat Interface */
                                     _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(ChatWithJupyterStatus, { baseUrl: baseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
-                                                transport: currentAgent?.transport || transport,
+                                                protocol: currentAgent?.protocol || transport,
                                                 extensions: extensions,
                                                 wsUrl: wsUrl,
                                                 baseUrl: baseUrl,
@@ -635,13 +700,6 @@ githubClientId, kaggleToken, }) => {
                                 border: '1px solid',
                                 borderRight: 'none',
                                 borderColor: 'border.default',
-                            } }) })), _jsx(PageLayout.Footer, { divider: "line", sx: {
-                            position: 'fixed',
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            bg: 'canvas.default',
-                            zIndex: 10,
-                        }, children: selectedAgentId !== 'new-agent' && (_jsx(FooterMetrics, { tokens: 1523552, cost: 2.01 })) })] }) }) }));
+                            } }) }))] }) }) }));
 };
 export default AgentRuntimeFormExample;

package/lib/examples/{JupyterCellExample.js → CellSimpleExample.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
+import { ThemedJupyterProvider } from './utils/themedProvider';
 import { Button, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 const CELL_ID = 'cell-example-1';

package/lib/examples/{AgentRuntimeCustomExample.js → ChatCustomExample.js}

@@ -7,8 +7,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './stores/themedProvider';
-import { Chat } from '../components/chat';
+import { ThemedProvider } from './utils/themedProvider';
+import { Chat } from '../chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -161,7 +161,7 @@ const AgentRuntimeCustomExample = () => {
                                         textDecoration: 'underline',
                                         border: 'none',
                                         background: 'none',
-                                    }, children: "Retry" })] })) : agentId ? (_jsx(Chat, { transport: "ag-ui", agentId: agentId, showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
+                                    }, children: "Retry" })] })) : agentId ? (_jsx(Chat, { protocol: "ag-ui", agentId: agentId, showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
                                 {
                                     title: '👋 Say hello',
                                     message: 'Hello! What can you help me with today?',

package/lib/examples/{AgentRuntimeChatExample.js → ChatExample.js}

@@ -17,13 +17,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
-import { AlertIcon } from '@primer/octicons-react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { ThemedProvider } from './stores/themedProvider';
-import { Chat } from '../components/chat';
+import { ThemedProvider } from './utils/themedProvider';
+import { ErrorView } from './components';
+import { Chat } from '../chat';
 setupPrimerPortals();
 const BASE_URL = 'http://localhost:8765';
-const AGENT_SPEC_ID = 'codeai/simple';
+const AGENT_SPEC_ID = 'demo-simple';
 const AGENT_NAME = 'simple';
 const AgentRuntimeChatExample = () => {
     const [agentId, setAgentId] = useState(null);
@@ -101,18 +101,10 @@ const AgentRuntimeChatExample = () => {
     }
     // Error state
     if (error || !agentId) {
-        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100vh',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to start agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error || 'No agent ID returned' })] }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start agent", detail: error || 'No agent ID returned' }) }));
     }
     // Agent is ready — render the Chat component
-    return (_jsx(Chat, { transport: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
             {
                 title: 'Hello',
                 message: 'Hello, what can you do?',

package/lib/examples/{AgentRuntimeStandaloneExample.js → ChatStandaloneExample.js}

@@ -18,8 +18,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ThemedProvider } from './stores/themedProvider';
-import { ChatStandalone } from '../components/chat';
+import { ThemedProvider } from './utils/themedProvider';
+import { ChatStandalone } from '../chat';
 /**
  * Simulated AI responses for demo purposes.
  * In a real application, this would call your AI backend.

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -2,27 +2,16 @@
  * CopilotKit Lexical Example with CopilotKit Integration.
  *
  * To run this example, create a .env file in the core directory with:
- * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.ai/settings/iam/tokens
  * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
  *
- * You also will need to connect copilot kit to some sort of LLM Add LLM Provider API Key.
+ * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key.
  *
  * https://docs.copilotkit.ai/reference/hooks/useFrontendTool
  *
  * @module examples/CopilotKitLexicalExample
  */
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
+import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';

package/lib/examples/CopilotKitLexicalExample.js

@@ -7,27 +7,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * CopilotKit Lexical Example with CopilotKit Integration.
  *
  * To run this example, create a .env file in the core directory with:
- * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.ai/settings/iam/tokens
  * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
  *
- * You also will need to connect copilot kit to some sort of LLM Add LLM Provider API Key.
+ * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key.
  *
  * https://docs.copilotkit.ai/reference/hooks/useFrontendTool
  *
  * @module examples/CopilotKitLexicalExample
  */
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
+import '@datalayer/jupyter-react/lib/css/PrismCss';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { $getRoot, $createParagraphNode } from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -48,7 +37,7 @@ import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 import { Box } from '@datalayer/primer-addons';
 import { useJupyter } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
+import { ThemedJupyterProvider } from './utils/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';

package/lib/examples/CopilotKitNotebookExample.js

@@ -7,17 +7,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * CopilotKit Notebook Example with CopilotKit Integration
  *
  * To run this example, create a .env file in the core directory with:
- * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.ai/settings/iam/tokens
  * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
  *
- * You also will need to connect co[pilot kit to some sort of LLM Add LLM Provider API Key
- *
- * @module datalayer-core/CopilotKitNotebookExample
+ * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key
  */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
+import { ThemedJupyterProvider } from './utils/themedProvider';
 // CopilotKit imports
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
@@ -25,7 +23,7 @@ import '@copilotkit/react-ui/styles.css';
 // Import CopilotKit components and hooks
 import { ActionRegistrar, useNotebookToolActions, } from '../tools/adapters/copilotkit/notebookHooks';
 // Import Matplotlib notebook
-import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook

package/lib/examples/DatalayerNotebookExample.js

@@ -8,8 +8,8 @@ import { Checkbox, FormControl, Heading } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useCoreStore, createDatalayerServiceManager, DatalayerCollaborationProvider, } from '@datalayer/core';
 import { loadJupyterConfig, Notebook } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
-import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
 // This corresponds to the notebook ID in the URL when you open an existing notbook in your library
 const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
 const DatalayerNotebookExample = (props) => {

package/lib/examples/{AgentRuntimeLexical2Example.d.ts → Lexical2Example.d.ts}

@@ -9,22 +9,11 @@
  * - Keyboard shortcuts
  *
  * To run this example, create a .env file with:
- * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.app/settings/iam/tokens
  *
  * @module examples/ChatLexicalExample
  */
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
+import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';

package/lib/examples/{AgentRuntimeLexical2Example.js → Lexical2Example.js}

@@ -14,22 +14,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * - Keyboard shortcuts
  *
  * To run this example, create a .env file with:
- * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.app/settings/iam/tokens
  *
  * @module examples/ChatLexicalExample
  */
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
+import '@datalayer/jupyter-react/lib/css/PrismCss';
 import { useCallback, useEffect, useState } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -48,12 +37,14 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
 import { Text } from '@primer/react';
 import { useJupyter } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
+import { ThemedJupyterProvider } from './utils/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
-// Import Chat components
-import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider, } from '../components/chat';
+import { ChatFloating } from '../chat';
 import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
+import { useFrontendTool } from '../hooks';
+import { useChatStore } from '../stores';
+import { DatalayerInferenceProvider } from '../inference';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
@@ -164,7 +155,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
             defaultProvider: 'datalayer',
             apiBaseUrl: import.meta.env.VITE_DATALAYER_API_URL ||
                 'https://oss.datalayer.run/api',
-            apiKey: import.meta.env.VITE_DATALAYER_API_TOKEN,
+            apiKey: import.meta.env.VITE_DATALAYER_API_KEY,
             defaultModel: 'claude-sonnet-4-20250514',
             enableStreaming: true,
             requireToolApproval: false,

package/lib/examples/{AgentRuntimeLexicalExample.d.ts → LexicalExample.d.ts}

@@ -10,18 +10,7 @@
  *
  * @module examples/AgentRuntimeLexicalExample
  */
-import 'prismjs';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-markdown';
-import 'prismjs/components/prism-c';
-import 'prismjs/components/prism-css';
-import 'prismjs/components/prism-objectivec';
-import 'prismjs/components/prism-sql';
-import 'prismjs/components/prism-python';
-import 'prismjs/components/prism-rust';
-import 'prismjs/components/prism-swift';
+import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';