@datalayer/agent-runtimes 1.0.10 → 1.0.18

package/lib/examples/LexicalAgentExample.js

@@ -42,16 +42,14 @@ import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { DEFAULT_MODEL } from '../specs';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'agui-lexical-example';
-// Base URL for agent-runtimes server
-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) {
@@ -75,87 +73,6 @@ function getJupyterSandboxUrl(serviceManager) {
  * Hook to ensure the example-agent exists on the server.
  * Creates it if it doesn't exist.
  */
-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',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        name: agentId,
-                        description: 'Demo agent for lexical example',
-                        agent_library: 'pydantic-ai',
-                        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(`[AgentRuntimeLexicalAgentExample] Created agent: ${agentId}`);
-                        setError(null);
-                        setIsReady(true);
-                    }
-                    else {
-                        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('[AgentRuntimeLexicalAgentExample] Error creating agent:', err);
-                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
-                    setIsReady(false);
-                }
-            }
-        }
-        ensureAgent();
-        return () => {
-            mounted = false;
-        };
-    }, [agentId, baseUrl, jupyterSandboxUrl]);
-    return { isReady, error };
-}
 // import contentLexical from './lexicals/vscode.lexical';
 // const INITIAL_CONTENT = JSON.stringify(contentLexical);
 const INITIAL_CONTENT = undefined; // Use default empty document
@@ -228,7 +145,7 @@ function LexicalToolsPlugin({ onToolsReady, }) {
     }, [tools, onToolsReady]);
     return null;
 }
-const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, onToolsReady, }) {
+const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, endpoint, onToolsReady, }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     // AI actions registered as toolbar items via the primer-addons toolbar extensibility
@@ -261,13 +178,48 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     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(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, { serviceManager: serviceManager }) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                             type: 'vercel-ai',
-                                            endpoint: VERCEL_AI_ENDPOINT,
+                                            endpoint,
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
 });
 function LexicalWithChat({ content, serviceManager, }) {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const vercelAiEndpoint = `${baseUrl}/api/v1/vercel-ai/${AGENT_ID}`;
+    const [createRequested, setCreateRequested] = useState(false);
     const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
-    // Ensure the agent exists before rendering chat
-    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL, jupyterSandboxUrl);
+    const { agentId, isReady, status, error, createAgent } = useExampleAgentRuntime({
+        exampleId: 'LexicalAgentExample',
+        agentName: AGENT_ID,
+        autoCreateAgent: false,
+        agentConfig: {
+            name: AGENT_ID,
+            description: 'Demo agent for lexical example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with documents. You can help with writing, editing, and formatting content.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        },
+    });
+    useEffect(() => {
+        if (!jupyterSandboxUrl || createRequested || agentId) {
+            return;
+        }
+        setCreateRequested(true);
+        void createAgent({
+            name: AGENT_ID,
+            description: 'Demo agent for lexical example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with documents. You can help with writing, editing, and formatting content.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        }).catch(() => {
+            setCreateRequested(false);
+        });
+    }, [jupyterSandboxUrl, createRequested, agentId, createAgent]);
+    const effectiveReady = isReady || status === 'ready';
     // State to hold tools - populated by LexicalToolsPlugin inside the context
     const [tools, setTools] = useState([]);
     // Stable callback for receiving tools from LexicalToolsPlugin
@@ -284,7 +236,7 @@ function LexicalWithChat({ content, serviceManager, }) {
             width: '100vw',
             display: 'flex',
             overflow: 'hidden',
-        }, children: [_jsx(LexicalUI, { content: content, serviceManager: serviceManager, onToolsReady: handleToolsReady }), error && (_jsxs(Box, { sx: {
+        }, children: [_jsx(LexicalUI, { content: content, serviceManager: serviceManager, endpoint: vercelAiEndpoint, onToolsReady: handleToolsReady }), error && (_jsxs(Box, { sx: {
                     position: 'fixed',
                     bottom: 20,
                     right: 20,
@@ -293,7 +245,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { protocol: "vercel-ai", endpoint: VERCEL_AI_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", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), effectiveReady && (_jsx(ChatFloating, { protocol: "vercel-ai", endpoint: vercelAiEndpoint, 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", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/LexicalAgentSidebarExample.js

@@ -42,15 +42,15 @@ import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { DEFAULT_MODEL } from '../specs';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
 const LEXICAL_ID = 'chat-lexical-example';
 // Default configuration
-const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const DEFAULT_AGENT_ID = import.meta.env.VITE_AGENT_ID || 'lexical-sidebar-agent-runtime-example';
-const VERCEL_AI_ENDPOINT = `${DEFAULT_BASE_URL}/api/v1/vercel-ai/${DEFAULT_AGENT_ID}`;
 function getJupyterSandboxUrl(serviceManager) {
     const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
     if (envUrl) {
@@ -70,70 +70,6 @@ function getJupyterSandboxUrl(serviceManager) {
     const separator = baseUrl.includes('?') ? '&' : '?';
     return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
 }
-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;
-                }
-                const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        name: agentId,
-                        description: 'Demo agent for lexical sidebar example',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        model: DEFAULT_MODEL,
-                        system_prompt: 'You are a helpful AI assistant that helps users work with lexical documents. For document operations, always use the lexical frontend tools so actions happen in the live document UI. Use executeCode only for temporary inspection code that should not modify persisted document content.',
-                        enable_codemode: false,
-                        sandbox_variant: 'jupyter',
-                        jupyter_sandbox: jupyterSandboxUrl,
-                    }),
-                });
-                if (mounted) {
-                    if (response.ok) {
-                        console.warn(`[LexicalAgentSidebarExample] Created agent: ${agentId}`);
-                        setError(null);
-                        setIsReady(true);
-                    }
-                    else if (response.status === 409 || response.status === 400) {
-                        console.warn(`[LexicalAgentSidebarExample] Reusing existing agent: ${agentId}`);
-                        setError(null);
-                        setIsReady(true);
-                    }
-                    else {
-                        const errorData = await response.json().catch(() => ({}));
-                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
-                        setIsReady(false);
-                    }
-                }
-            }
-            catch (err) {
-                if (mounted) {
-                    console.error('[LexicalAgentSidebarExample] Error creating agent:', err);
-                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
-                    setIsReady(false);
-                }
-            }
-        }
-        void ensureAgent();
-        return () => {
-            mounted = false;
-        };
-    }, [agentId, baseUrl, jupyterSandboxUrl]);
-    return { isReady, error };
-}
 /**
  * Lexical plugin for code highlighting
  */
@@ -144,7 +80,7 @@ function CodeHighlightingPlugin() {
     }, [editor]);
     return null;
 }
-function LexicalEditor({ serviceManager }) {
+function LexicalEditor({ serviceManager, endpoint }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     // AI actions registered as toolbar items
@@ -177,24 +113,60 @@ function LexicalEditor({ serviceManager }) {
                                     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, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                 type: 'vercel-ai',
-                                endpoint: VERCEL_AI_ENDPOINT,
+                                endpoint,
                             }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] })] }) }));
 }
 export function ChatLexicalAgentExampleInner({ serviceManager, }) {
+    const baseUrl = useExampleAgentRuntimesUrl();
+    const vercelAiEndpoint = `${baseUrl}/api/v1/vercel-ai/${DEFAULT_AGENT_ID}`;
+    const [createRequested, setCreateRequested] = useState(false);
     const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
-    const { isReady, error } = useEnsureAgent(DEFAULT_AGENT_ID, DEFAULT_BASE_URL, jupyterSandboxUrl);
+    const { agentId, isReady, status, error, createAgent } = useExampleAgentRuntime({
+        exampleId: 'LexicalAgentSidebarExample',
+        agentName: DEFAULT_AGENT_ID,
+        autoCreateAgent: false,
+        agentConfig: {
+            name: DEFAULT_AGENT_ID,
+            description: 'Demo agent for lexical sidebar example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with lexical documents. For document operations, always use the lexical frontend tools so actions happen in the live document UI. Use executeCode only for temporary inspection code that should not modify persisted document content.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        },
+    });
+    useEffect(() => {
+        if (!jupyterSandboxUrl || createRequested || agentId) {
+            return;
+        }
+        setCreateRequested(true);
+        void createAgent({
+            name: DEFAULT_AGENT_ID,
+            description: 'Demo agent for lexical sidebar example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with lexical documents. For document operations, always use the lexical frontend tools so actions happen in the live document UI. Use executeCode only for temporary inspection code that should not modify persisted document content.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        }).catch(() => {
+            setCreateRequested(false);
+        });
+    }, [jupyterSandboxUrl, createRequested, agentId, createAgent]);
+    const effectiveReady = isReady || status === 'ready';
     // Get lexical tools for ChatSidebar
     const tools = useLexicalTools(LEXICAL_ID);
     // Build Vercel AI protocol config
     const protocolConfig = useMemo(() => {
         return {
             type: 'vercel-ai',
-            endpoint: VERCEL_AI_ENDPOINT,
+            endpoint: vercelAiEndpoint,
             agentId: DEFAULT_AGENT_ID,
             enableConfigQuery: true,
-            configEndpoint: `${DEFAULT_BASE_URL}/api/v1/configure`,
+            configEndpoint: `${baseUrl}/api/v1/configure`,
         };
-    }, []);
+    }, [baseUrl, vercelAiEndpoint]);
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                     height: 'calc(100vh - 70px)',
                     width: '100vw',
@@ -215,7 +187,7 @@ export function ChatLexicalAgentExampleInner({ serviceManager, }) {
                                     display: 'flex',
                                     overflow: 'hidden',
                                     bg: 'canvas.default',
-                                }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), isReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                                }, children: _jsx(LexicalEditor, { serviceManager: serviceManager, endpoint: vercelAiEndpoint }) })] }), effectiveReady && (_jsx(ChatSidebar, { title: "AI Assistant", protocol: protocolConfig, position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
                             protocol: protocolConfig,
                             frontendTools: tools,
                             useStore: true,

package/lib/examples/NotebookAgentExample.js

@@ -15,13 +15,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module examples/NotebookAgentExample
  */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook } from '@datalayer/jupyter-react';
 import { ThemedJupyterProvider } from './utils/themedProvider';
 // Agent-runtimes imports
 import { ChatFloating } from '../chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
+import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
 import { DEFAULT_MODEL } from '../specs';
@@ -29,11 +31,7 @@ import { DEFAULT_MODEL } from '../specs';
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook
 const NOTEBOOK_CONTENT = MatplotlibNotebook;
-// Base URL for agent-runtimes server
-const BASE_URL = 'http://localhost:8765';
 const AGENT_ID = 'notebook-agent-runtime-example';
-// Vercel AI endpoint
-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) {
@@ -53,74 +51,7 @@ function getJupyterSandboxUrl(serviceManager) {
     const separator = baseUrl.includes('?') ? '&' : '?';
     return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
 }
-/**
- * Hook to ensure the example-agent is aligned with the active notebook runtime.
- * Recreates the agent with jupyter sandbox settings from the Notebook UI.
- */
-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 Notebook service manager.');
-                        setIsReady(false);
-                    }
-                    return;
-                }
-                const response = await fetch(`${baseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        name: agentId,
-                        description: 'Demo agent for notebook example',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        model: DEFAULT_MODEL,
-                        system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
-                        enable_codemode: false,
-                        sandbox_variant: 'jupyter',
-                        jupyter_sandbox: jupyterSandboxUrl,
-                    }),
-                });
-                if (mounted) {
-                    if (response.ok) {
-                        console.warn(`[AgentRuntimeExample] Created agent: ${agentId}`);
-                        setError(null);
-                        setIsReady(true);
-                    }
-                    else if (response.status === 409 || response.status === 400) {
-                        // Agent already exists; reuse it and continue.
-                        console.warn(`[AgentRuntimeExample] Reusing existing agent: ${agentId}`);
-                        setError(null);
-                        setIsReady(true);
-                    }
-                    else {
-                        const errorData = await response.json().catch(() => ({}));
-                        setError(errorData.detail || `Failed to create agent: ${response.status}`);
-                    }
-                }
-            }
-            catch (err) {
-                if (mounted) {
-                    console.error('[AgentRuntimeExample] Error creating agent:', err);
-                    setError(err instanceof Error ? err.message : 'Failed to connect to server');
-                }
-            }
-        }
-        ensureAgent();
-        return () => {
-            mounted = false;
-        };
-    }, [agentId, baseUrl, jupyterSandboxUrl]);
-    return { isReady, error };
-}
-const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
+const NotebookUI = React.memo(function NotebookUI({ serviceManager, onSessionConnection, }) {
     return (_jsxs(Box, { sx: {
             flex: 1,
             display: 'flex',
@@ -138,19 +69,57 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, onSessionConnection: onSessionConnection, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
+    const baseUrl = useExampleAgentRuntimesUrl();
     const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
-    // Ensure the agent exists before rendering chat
-    const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL, jupyterSandboxUrl);
+    const [createRequested, setCreateRequested] = useState(false);
+    const [notebookKernel, setNotebookKernel] = useState(null);
+    const { agentId, isReady, status, error, createAgent } = useExampleAgentRuntime({
+        exampleId: 'NotebookAgentExample',
+        agentName: AGENT_ID,
+        autoCreateAgent: false,
+        agentConfig: {
+            name: AGENT_ID,
+            description: 'Demo agent for notebook example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        },
+    });
+    useEffect(() => {
+        if (!jupyterSandboxUrl || createRequested || agentId) {
+            return;
+        }
+        setCreateRequested(true);
+        void createAgent({
+            name: AGENT_ID,
+            description: 'Demo agent for notebook example',
+            protocol: 'vercel-ai',
+            model: DEFAULT_MODEL,
+            systemPrompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
+            enableCodemode: false,
+            sandboxVariant: 'jupyter',
+            jupyterSandbox: jupyterSandboxUrl,
+        }).catch(() => {
+            setCreateRequested(false);
+        });
+    }, [jupyterSandboxUrl, createRequested, agentId, createAgent]);
+    const effectiveReady = isReady || status === 'ready';
+    const handleSessionConnection = useCallback((session) => {
+        setNotebookKernel(session?.kernel ?? null);
+    }, []);
     const protocolConfig = useMemo(() => ({
         type: 'vercel-ai',
-        endpoint: VERCEL_AI_ENDPOINT,
+        endpoint: `${baseUrl}/api/v1/vercel-ai/${AGENT_ID}`,
         agentId: AGENT_ID,
         enableConfigQuery: true,
-        configEndpoint: `${BASE_URL}/api/v1/configure`,
-    }), []);
+        configEndpoint: `${baseUrl}/api/v1/configure`,
+    }), [baseUrl]);
     // Get notebook tools for ChatFloating
     const frontendTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsxs(Box, { sx: {
@@ -158,7 +127,7 @@ function NotebookWithChat({ serviceManager, }) {
             width: '100%',
             display: 'flex',
             overflow: 'hidden',
-        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager }), error && (_jsxs(Box, { sx: {
+        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager, onSessionConnection: handleSessionConnection }), error && (_jsxs(Box, { sx: {
                     position: 'fixed',
                     bottom: 20,
                     right: 20,
@@ -167,7 +136,9 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { protocol: protocolConfig, 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", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), effectiveReady && (_jsx(ChatFloating, { protocol: protocolConfig, 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", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, panelProps: {
+                    kernel: notebookKernel,
+                }, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',