@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/ChatCustomExample.js

@@ -3,11 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, 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 './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { Chat } from '../chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -21,29 +23,29 @@ const queryClient = new QueryClient({
     },
 });
 const AGENT_NAME = 'datalayer-assistant';
-const BASE_URL = 'http://localhost:8765';
 /**
  * Hook to ensure the agent exists on the server
  * Creates the agent if it doesn't exist
  */
-function useEnsureAgent() {
+function useEnsureAgent(baseUrl) {
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
     const [agentId, setAgentId] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
     const createAgent = useCallback(async () => {
         try {
-            const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    name: AGENT_NAME,
+                    name: agentName,
                     description: 'Datalayer AI Assistant - Your helpful coding companion',
                     agent_library: 'pydantic-ai',
                     transport: 'ag-ui',
                     model: 'openai:gpt-4o-mini',
-                    system_prompt: `You are Datalayer Assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
+                    system_prompt: `You are custom chat assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
 
 You can help users with:
 - Writing and debugging Python code
@@ -69,26 +71,11 @@ Be concise, helpful, and provide working code examples when appropriate.`,
             console.error('[AgentRuntimeCustomExample] Error creating agent:', err);
             throw err;
         }
-    }, []);
-    const checkOrCreateAgent = useCallback(async () => {
+    }, [agentName, baseUrl]);
+    const initAgent = useCallback(async () => {
         setIsLoading(true);
         setError(null);
         try {
-            // First, try to find existing agent by name
-            const listResponse = await fetch(`${BASE_URL}/api/v1/agents`);
-            if (listResponse.ok) {
-                const data = await listResponse.json();
-                // API may return { agents: [...] } or just [...]
-                const agents = Array.isArray(data) ? data : data.agents || [];
-                const existingAgent = agents.find((a) => a.name === AGENT_NAME);
-                if (existingAgent) {
-                    console.log('[AgentRuntimeCustomExample] Found existing agent:', existingAgent.id);
-                    setAgentId(existingAgent.id);
-                    setIsLoading(false);
-                    return;
-                }
-            }
-            // Agent doesn't exist, create it
             console.log('[AgentRuntimeCustomExample] Creating new agent...');
             const newAgentId = await createAgent();
             if (newAgentId) {
@@ -107,9 +94,9 @@ Be concise, helpful, and provide working code examples when appropriate.`,
         }
     }, [createAgent]);
     useEffect(() => {
-        checkOrCreateAgent();
-    }, [checkOrCreateAgent]);
-    return { agentId, isLoading, error, retry: checkOrCreateAgent };
+        initAgent();
+    }, [initAgent]);
+    return { agentId, isLoading, error, retry: initAgent };
 }
 /**
  * Agent Runtime Custom Example Component
@@ -120,7 +107,8 @@ Be concise, helpful, and provide working code examples when appropriate.`,
  * - Auto-creates agent on the server if it doesn't exist
  */
 const AgentRuntimeCustomExample = () => {
-    const { agentId, isLoading, error, retry } = useEnsureAgent();
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const { agentId, isLoading, error, retry } = useEnsureAgent(baseUrl);
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -135,7 +123,7 @@ const AgentRuntimeCustomExample = () => {
                                     fontWeight: 'bold',
                                     display: 'block',
                                     marginBottom: 1,
-                                }, children: "Datalayer Assistant" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
+                                }, children: "Custom Chat Example" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
                             flex: 1,
                             overflow: 'hidden',
                             display: 'flex',

package/lib/examples/ChatExample.js

@@ -19,37 +19,30 @@ import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { ErrorView } from './components';
 import { Chat } from '../chat';
 setupPrimerPortals();
-const BASE_URL = 'http://localhost:8765';
-const AGENT_SPEC_ID = 'demo-simple';
+const AGENT_SPEC_ID = 'example-simple';
 const AGENT_NAME = 'simple';
 const AgentRuntimeChatExample = () => {
+    const baseUrl = useExampleAgentRuntimesUrl();
     const [agentId, setAgentId] = useState(null);
     const [error, setError] = useState(null);
     const [isCreating, setIsCreating] = useState(true);
-    // Create the agent on mount
+    // Create the agent on mount — always create a fresh instance with a random
+    // slug so that each run starts with clean OTEL data.
     useEffect(() => {
         let cancelled = false;
-        const ensureAgent = async () => {
+        const name = uniqueAgentId(AGENT_NAME);
+        const createAgent = async () => {
             try {
-                // First, check if the agent already exists
-                const checkResponse = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(AGENT_NAME)}`);
-                if (checkResponse.ok) {
-                    // Agent exists — reuse it (preserves conversation history)
-                    if (!cancelled) {
-                        setAgentId(AGENT_NAME);
-                        setIsCreating(false);
-                    }
-                    return;
-                }
-                // Agent doesn't exist — create it from the library spec
-                const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+                const response = await fetch(`${baseUrl}/api/v1/agents`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({
-                        name: AGENT_NAME,
+                        name,
                         agent_spec_id: AGENT_SPEC_ID,
                         transport: 'ag-ui',
                     }),
@@ -58,15 +51,6 @@ const AgentRuntimeChatExample = () => {
                     const data = await response
                         .json()
                         .catch(() => ({ detail: 'Unknown error' }));
-                    // Race condition: agent was created between our check and POST
-                    if (response.status === 400 &&
-                        data.detail?.includes('already exists')) {
-                        if (!cancelled) {
-                            setAgentId(AGENT_NAME);
-                            setIsCreating(false);
-                        }
-                        return;
-                    }
                     throw new Error(data.detail || `Failed to create agent: ${response.status}`);
                 }
                 const data = await response.json();
@@ -82,11 +66,11 @@ const AgentRuntimeChatExample = () => {
                 }
             }
         };
-        ensureAgent();
+        createAgent();
         return () => {
             cancelled = true;
         };
-    }, []);
+    }, [baseUrl]);
     // Loading state while agent is being created
     if (isCreating) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
@@ -104,7 +88,7 @@ const AgentRuntimeChatExample = () => {
         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, { 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: [
+    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, 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: `${baseUrl}/api/v1/history`, suggestions: [
             {
                 title: 'Hello',
                 message: 'Hello, what can you do?',

package/lib/examples/CopilotKitLexicalExample.js

@@ -39,7 +39,8 @@ import { Box } from '@datalayer/primer-addons';
 import { useJupyter } from '@datalayer/jupyter-react';
 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 { useLexicalToolActions } from '../tools/adapters/copilotkit/lexicalHooks';
+import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
 import { editorConfig } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';

package/lib/examples/CopilotKitNotebookExample.js

@@ -21,7 +21,8 @@ import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 import '@copilotkit/react-ui/styles.css';
 // Import CopilotKit components and hooks
-import { ActionRegistrar, useNotebookToolActions, } from '../tools/adapters/copilotkit/notebookHooks';
+import { useNotebookToolActions } from '../tools/adapters/copilotkit/notebookHooks';
+import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
 // Fixed notebook ID

package/lib/examples/HomeExample.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface HomeExampleCardEntry {
+    id: string;
+    title: string;
+    description: string;
+    tags: string[];
+}
+export interface HomeExampleProps {
+    examples?: HomeExampleCardEntry[];
+    searchQuery?: string;
+    onSearchChange?: (value: string) => void;
+    onSelectExample?: (name: string) => void;
+}
+declare const HomeExample: React.FC<HomeExampleProps>;
+export default HomeExample;

package/lib/examples/HomeExample.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { Heading, Text, TextInput } from '@primer/react';
+import { SearchIcon } from '@primer/octicons-react';
+const HomeExample = ({ examples = [], searchQuery = '', onSearchChange, onSelectExample, }) => {
+    const sortedExamples = [...examples].sort((a, b) => a.title.localeCompare(b.title));
+    return (_jsx(Box, { sx: {
+            width: '100%',
+            height: '100%',
+            overflow: 'auto',
+            bg: 'canvas.default',
+        }, children: _jsxs(Box, { sx: {
+                maxWidth: '1600px',
+                margin: '0 auto',
+                p: 4,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 3,
+            }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        gap: 3,
+                        flexWrap: 'wrap',
+                    }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Runtimes Examples" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Browse all examples as cards and open any flow in one click." })] }), _jsx(TextInput, { autoFocus: true, value: searchQuery, onChange: event => onSearchChange?.(event.target.value), placeholder: "Search examples", leadingVisual: SearchIcon, sx: { minWidth: ['100%', '320px'] } })] }), sortedExamples.length === 0 ? (_jsx(Box, { sx: {
+                        border: '1px dashed',
+                        borderColor: 'border.default',
+                        borderRadius: 3,
+                        p: 4,
+                        textAlign: 'center',
+                        color: 'fg.muted',
+                    }, children: "No examples match your search." })) : (_jsx(Box, { sx: {
+                        display: 'grid',
+                        gridTemplateColumns: [
+                            '1fr',
+                            'repeat(2, minmax(0, 1fr))',
+                            'repeat(4, minmax(0, 1fr))',
+                        ],
+                        gap: 3,
+                    }, children: sortedExamples.map(example => (_jsxs(Box, { as: "button", onClick: () => onSelectExample?.(example.id), sx: {
+                            textAlign: 'left',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            p: 3,
+                            bg: 'canvas.subtle',
+                            cursor: 'pointer',
+                            transition: 'all 120ms ease-in-out',
+                            ':hover': {
+                                transform: 'translateY(-2px)',
+                                borderColor: 'accent.emphasis',
+                                boxShadow: 'shadow.medium',
+                                bg: 'canvas.default',
+                            },
+                        }, children: [_jsx(Text, { sx: { fontWeight: 600, fontSize: 2, display: 'block' }, children: example.title }), _jsx(Text, { sx: {
+                                    color: 'fg.muted',
+                                    fontSize: 1,
+                                    display: 'block',
+                                    mt: 1,
+                                }, children: example.description }), _jsx(Text, { sx: {
+                                    color: 'fg.muted',
+                                    fontSize: 0,
+                                    display: 'block',
+                                    mt: 2,
+                                    fontFamily: 'mono',
+                                }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { sx: { mt: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: example.tags.map(tag => (_jsx(Box, { sx: {
+                                        fontSize: 0,
+                                        px: 2,
+                                        py: '2px',
+                                        borderRadius: 999,
+                                        bg: 'canvas.inset',
+                                        color: 'fg.muted',
+                                        border: '1px solid',
+                                        borderColor: 'border.muted',
+                                    }, children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
+};
+export default HomeExample;

package/lib/examples/Lexical2Example.js

@@ -40,11 +40,13 @@ import { useJupyter } from '@datalayer/jupyter-react';
 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 { ChatFloating } from '../chat';
-import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/lexicalHooks';
+import { useLexicalToolActions } from '../tools/adapters/copilotkit/lexicalHooks';
+import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
 import { editorConfig } from './lexical/editorConfig';
 import { useFrontendTool } from '../hooks';
 import { useChatStore } from '../stores';
 import { DatalayerInferenceProvider } from '../inference';
+import { AIModels } from '../specs/models';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
@@ -156,7 +158,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
             apiBaseUrl: import.meta.env.VITE_DATALAYER_API_URL ||
                 'https://oss.datalayer.run/api',
             apiKey: import.meta.env.VITE_DATALAYER_API_KEY,
-            defaultModel: 'claude-sonnet-4-20250514',
+            defaultModel: AIModels.BEDROCK_US_ANTHROPIC_CLAUDE_SONNET_4_5_20250929_V1_0,
             enableStreaming: true,
             requireToolApproval: false,
             debug: import.meta.env.DEV,

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

@@ -8,7 +8,7 @@
  * 1. Start the agent-runtimes server: `npm run start:server`
  * 2. Start the frontend: `npm run dev`
  *
- * @module examples/AgentRuntimeLexicalExample
+ * @module examples/LexicalAgentExample
  */
 import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
@@ -17,9 +17,9 @@ import './lexical/lexical-theme.css';
 /**
  * Main Agent Runtime lexical example component
  */
-interface AgentRuntimeLexicalExampleProps {
+interface AgentRuntimeLexicalAgentExampleProps {
     content?: string;
     serviceManager?: ServiceManager.IManager;
 }
-declare function AgentRuntimeLexicalExample({ content, serviceManager, }: AgentRuntimeLexicalExampleProps): JSX.Element;
-export default AgentRuntimeLexicalExample;
+declare function AgentRuntimeLexicalAgentExample({ content, serviceManager, }: AgentRuntimeLexicalAgentExampleProps): JSX.Element;
+export default AgentRuntimeLexicalAgentExample;

package/lib/examples/{LexicalExample.js → LexicalAgentExample.js}

@@ -13,10 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * 1. Start the agent-runtimes server: `npm run start:server`
  * 2. Start the frontend: `npm run dev`
  *
- * @module examples/AgentRuntimeLexicalExample
+ * @module examples/LexicalAgentExample
  */
 import '@datalayer/jupyter-react/lib/css/PrismCss';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { $getRoot, $createParagraphNode } from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -52,17 +52,43 @@ const BASE_URL = 'http://localhost:8765';
 const AGENT_ID = 'lexical-agent-runtime-example';
 // Vercel AI endpoint for lexical operations
 const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
+function getJupyterSandboxUrl(serviceManager) {
+    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
+    if (envUrl) {
+        return envUrl;
+    }
+    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
+    if (!baseUrl) {
+        return undefined;
+    }
+    if (baseUrl.includes('token=')) {
+        return baseUrl;
+    }
+    const token = serviceManager?.serverSettings?.token;
+    if (!token) {
+        return baseUrl;
+    }
+    const separator = baseUrl.includes('?') ? '&' : '?';
+    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
+}
 /**
- * Hook to ensure the demo-agent exists on the server.
+ * Hook to ensure the example-agent exists on the server.
  * Creates it if it doesn't exist.
  */
-function useEnsureAgent(agentId, baseUrl) {
+function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
     const [isReady, setIsReady] = useState(false);
     const [error, setError] = useState(null);
     useEffect(() => {
         let mounted = true;
         async function ensureAgent() {
             try {
+                if (!jupyterSandboxUrl) {
+                    if (mounted) {
+                        setError('Could not detect Jupyter server URL from Lexical service manager.');
+                        setIsReady(false);
+                    }
+                    return;
+                }
                 // Try to create the agent (will fail if already exists, which is fine)
                 const response = await fetch(`${baseUrl}/api/v1/agents`, {
                     method: 'POST',
@@ -76,28 +102,50 @@ function useEnsureAgent(agentId, baseUrl) {
                         transport: 'vercel-ai',
                         model: DEFAULT_MODEL,
                         system_prompt: 'You are a helpful AI assistant that helps users work with documents. You can help with writing, editing, and formatting content.',
+                        enable_codemode: false,
+                        sandbox_variant: 'jupyter',
+                        jupyter_sandbox: jupyterSandboxUrl,
                     }),
                 });
                 if (mounted) {
                     if (response.ok) {
-                        console.log(`[AgentRuntimeLexicalExample] Created agent: ${agentId}`);
-                        setIsReady(true);
-                    }
-                    else if (response.status === 400) {
-                        // Agent already exists, which is fine
-                        console.log(`[AgentRuntimeLexicalExample] Agent already exists: ${agentId}`);
+                        console.log(`[AgentRuntimeLexicalAgentExample] Created agent: ${agentId}`);
+                        setError(null);
                         setIsReady(true);
                     }
                     else {
-                        const errorData = await response.json().catch(() => ({}));
-                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
+                        const rawBody = await response.text().catch(() => '');
+                        let detail = rawBody;
+                        try {
+                            const parsed = rawBody ? JSON.parse(rawBody) : {};
+                            if (typeof parsed.detail === 'string' &&
+                                parsed.detail.length > 0) {
+                                detail = parsed.detail;
+                            }
+                        }
+                        catch {
+                            // Keep raw body as fallback detail.
+                        }
+                        const alreadyExists = response.status === 409 ||
+                            response.status === 400 ||
+                            /already exists/i.test(detail || '');
+                        if (alreadyExists) {
+                            console.log(`[AgentRuntimeLexicalAgentExample] Reusing existing agent: ${agentId}`);
+                            setError(null);
+                            setIsReady(true);
+                        }
+                        else {
+                            setError(detail || `Failed to create agent: ${response.status}`);
+                            setIsReady(false);
+                        }
                     }
                 }
             }
             catch (err) {
                 if (mounted) {
-                    console.error('[AgentRuntimeLexicalExample] Error creating agent:', err);
+                    console.error('[AgentRuntimeLexicalAgentExample] Error creating agent:', err);
                     setError(err instanceof Error ? err.message : 'Failed to connect to server');
+                    setIsReady(false);
                 }
             }
         }
@@ -105,7 +153,7 @@ function useEnsureAgent(agentId, baseUrl) {
         return () => {
             mounted = false;
         };
-    }, [agentId, baseUrl]);
+    }, [agentId, baseUrl, jupyterSandboxUrl]);
     return { isReady, error };
 }
 // import contentLexical from './lexicals/vscode.lexical';
@@ -217,8 +265,9 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
 });
 function LexicalWithChat({ content, serviceManager, }) {
+    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
     // Ensure the agent exists before rendering chat
-    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
+    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL, jupyterSandboxUrl);
     // State to hold tools - populated by LexicalToolsPlugin inside the context
     const [tools, setTools] = useState([]);
     // Stable callback for receiving tools from LexicalToolsPlugin
@@ -263,7 +312,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     },
                 ] }))] }));
 }
-function AgentRuntimeLexicalExample({ content, serviceManager, }) {
+function AgentRuntimeLexicalAgentExample({ content, serviceManager, }) {
     return _jsx(LexicalWithChat, { content: content, serviceManager: serviceManager });
 }
-export default AgentRuntimeLexicalExample;
+export default AgentRuntimeLexicalAgentExample;

package/lib/examples/{LexicalSidebarExample.d.ts → LexicalAgentSidebarExample.d.ts}

@@ -10,7 +10,7 @@
  * To run this example, create a .env file with:
  * - VITE_DATALAYER_API_KEY: Get from https://datalayer.app/settings/iam/tokens
  *
- * @module examples/ChatLexicalExample
+ * @module examples/LexicalAgentSidebarExample
  */
 import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
@@ -19,12 +19,12 @@ import './lexical/lexical-theme.css';
 /**
  * Agent Runtime Lexical Sidebar Example with Simple integration
  */
-interface ChatLexicalExampleProps {
+interface ChatLexicalAgentExampleProps {
     serviceManager?: ServiceManager.IManager;
 }
-export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatLexicalAgentExampleInner({ serviceManager, }: ChatLexicalAgentExampleProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Main example component with Simple wrapper
  */
-export declare function AgentRuntimeLexicalSidebarExample(): import("react/jsx-runtime").JSX.Element;
-export default AgentRuntimeLexicalSidebarExample;
+export declare function AgentRuntimeLexicalAgentSidebarExample(): import("react/jsx-runtime").JSX.Element;
+export default AgentRuntimeLexicalAgentSidebarExample;