@datalayer/agent-runtimes 1.0.1 → 1.0.3

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

@@ -15,18 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @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 React, { useCallback, useEffect, useRef, useState } from 'react';
 import { $getRoot, $createParagraphNode } from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -45,14 +34,15 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 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';
 // Agent-runtimes imports
-import { ChatFloating } from '../components/chat';
+import { ChatFloating } from '../chat';
 import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
+import { DEFAULT_MODEL } from '../specs';
 import '@datalayer/jupyter-lexical/style/index.css';
 import './lexical/lexical-theme.css';
 // Fixed lexical document ID
@@ -60,8 +50,8 @@ 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';
-// AG-UI endpoint for lexical operations (trailing slash required for mounted Starlette apps)
-const AG_UI_ENDPOINT = `${BASE_URL}/api/v1/ag-ui/${AGENT_ID}/`;
+// Vercel AI endpoint for lexical operations
+const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
 /**
  * Hook to ensure the demo-agent exists on the server.
  * Creates it if it doesn't exist.
@@ -83,8 +73,8 @@ function useEnsureAgent(agentId, baseUrl) {
                         name: agentId,
                         description: 'Demo agent for lexical example',
                         agent_library: 'pydantic-ai',
-                        transport: 'ag-ui',
-                        model: 'openai:gpt-4o-mini',
+                        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.',
                     }),
                 });
@@ -169,9 +159,14 @@ function CodeHighlightPlugin() {
 }
 /**
  * Wrapper component for kernel-dependent Simple plugins.
+ * Accepts a serviceManager so it can initialise a Jupyter kernel
+ * (mirrors how the Notebook component bootstraps its runtime).
  */
-function SimpleKernelPluginsInner() {
-    const { defaultKernel } = useJupyter();
+function SimpleKernelPluginsInner({ serviceManager, }) {
+    const { defaultKernel } = useJupyter({
+        serviceManager,
+        startDefaultKernel: !!serviceManager,
+    });
     return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
 }
 /**
@@ -216,9 +211,9 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     padding: 3,
                     backgroundColor: 'canvas.default',
                     minHeight: '600px',
-                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
-                                            type: 'ag-ui',
-                                            endpoint: AG_UI_ENDPOINT,
+                }, 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,
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
 });
 function LexicalWithChat({ content, serviceManager, }) {
@@ -226,12 +221,14 @@ function LexicalWithChat({ content, serviceManager, }) {
     const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
     // State to hold tools - populated by LexicalToolsPlugin inside the context
     const [tools, setTools] = useState([]);
-    const [toolsKey, setToolsKey] = useState(0);
     // Stable callback for receiving tools from LexicalToolsPlugin
+    // NOTE: Do NOT use a key={...} on ChatFloating to force re-render on tool changes.
+    // Changing the key remounts the entire chat component, resetting all state (including isLoading),
+    // which causes the run/pause button to flip to "send" mid-conversation.
+    // React will naturally pass updated frontendTools prop without remounting.
     const handleToolsReady = useCallback((newTools) => {
         console.log('[LexicalWithChat] 🔄 Tools received, updating state');
         setTools(newTools);
-        setToolsKey(prev => prev + 1); // Force ChatFloating to see new tools
     }, []);
     return (_jsxs(Box, { sx: {
             height: '100vh',
@@ -247,7 +244,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, 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: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',
@@ -260,7 +257,11 @@ function LexicalWithChat({ content, serviceManager, }) {
                         title: 'Create list',
                         message: 'Create a bullet list with three items about Jupyter',
                     },
-                ] }, `chat-${toolsKey}`))] }));
+                    {
+                        title: 'Analyze Titanic',
+                        message: 'Analyze the Titanic dataset and provide insights about the passengers and survival rates',
+                    },
+                ] }))] }));
 }
 function AgentRuntimeLexicalExample({ content, serviceManager, }) {
     return _jsx(LexicalWithChat, { content: content, serviceManager: serviceManager });

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

@@ -8,22 +8,11 @@
  * - Middleware and extensions
  *
  * 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/{AgentRuntimeLexicalSidebarExample.js → LexicalSidebarExample.js}

@@ -13,22 +13,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * - Middleware and extensions
  *
  * 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, useMemo, useState } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -46,10 +35,9 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 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, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
-// Import Chat components
-import { ChatSidebar, } from '../components/chat';
+import { ChatSidebar } from '../chat';
 import { ChatInlinePlugin } from '../lexical/ChatInlinePlugin';
 import { useChatInlineToolbarItems } from '../lexical/useChatInlineToolbarItems';
 import { useLexicalTools } from '../tools/adapters/agent-runtimes/lexicalHooks';
@@ -119,7 +107,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
         };
     }, []);
     return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                height: '100vh',
+                height: 'calc(100vh - 70px)',
                 width: '100vw',
                 display: 'flex',
                 overflow: 'hidden',
@@ -138,7 +126,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
                                 display: 'flex',
                                 overflow: 'hidden',
                                 bg: 'canvas.default',
-                            }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _jsx(ChatSidebar, { title: "AI Assistant", position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                            }, children: _jsx(LexicalEditor, { serviceManager: serviceManager }) })] }), _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/{AgentRuntimeNotebookExample.js → NotebookExample.js}

@@ -13,17 +13,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 1. Start the agent-runtimes server: `npm run start:server`
  * 2. Start the frontend: `npm run dev`
  *
- * @module examples/AgentRuntimeNotebookExample
+ * @module examples/NotebookExample
  */
 import React, { useEffect, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
+import { ThemedJupyterProvider } from './utils/themedProvider';
 // Agent-runtimes imports
-import { ChatFloating } from '../components/chat';
+import { ChatFloating } from '../chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
 // Import Matplotlib notebook
-import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
 import { DEFAULT_MODEL } from '../specs';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
@@ -32,8 +32,8 @@ const NOTEBOOK_CONTENT = MatplotlibNotebook;
 // Base URL for agent-runtimes server
 const BASE_URL = 'http://localhost:8765';
 const AGENT_ID = 'notebook-agent-runtime-example';
-// AG-UI endpoint for notebook operations (trailing slash required for mounted Starlette apps)
-const AG_UI_ENDPOINT = `${BASE_URL}/api/v1/ag-ui/${AGENT_ID}/`;
+// Vercel AI endpoint
+const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
 /**
  * Hook to ensure the demo-agent exists on the server.
  * Creates it if it doesn't exist.
@@ -55,7 +55,7 @@ function useEnsureAgent(agentId, baseUrl) {
                         name: agentId,
                         description: 'Demo agent for notebook example',
                         agent_library: 'pydantic-ai',
-                        transport: 'ag-ui',
+                        transport: 'vercel-ai',
                         model: DEFAULT_MODEL,
                         system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
                     }),
@@ -102,13 +102,13 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     paddingBottom: 3,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsx(Box, { as: "h1", children: "Agent Runtime Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the notebook." })] }), _jsx(Box, { sx: {
+                }, children: [_jsx(Box, { as: "h1", sx: { margin: 0 }, children: "Agent Runtime Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the notebook." })] }), _jsx(Box, { sx: {
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, 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..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
     // Ensure the agent exists before rendering chat
@@ -129,7 +129,7 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { protocol: "vercel-ai", endpoint: VERCEL_AI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',
@@ -142,6 +142,10 @@ function NotebookWithChat({ serviceManager, }) {
                         title: 'Show cells',
                         message: 'Show the notebook cells content and compute the number of cells',
                     },
+                    {
+                        title: 'Analyze Titanic',
+                        message: 'Analyze the Titanic dataset and provide insights about the passengers and survival rates',
+                    },
                 ] }))] }));
 }
 function AgentRuntimeNotebookExample({ serviceManager, }) {

package/lib/examples/{AgentRuntimeNotebookSidebarExample.js → NotebookSidebarExample.js}

@@ -21,13 +21,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook, useJupyter } from '@datalayer/jupyter-react';
-import { ThemedJupyterProvider } from './stores/themedProvider';
-// Import Chat components
-import { ChatSidebar, } from '../components/chat';
-// Import agent-runtimes notebook tools
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
-// Import sample notebook
-import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+import { ThemedJupyterProvider } from './utils/themedProvider';
+import { ChatSidebar } from '../chat';
+import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'chat-notebook-example';
 // Use the imported Matplotlib notebook
@@ -59,7 +56,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
         };
     }, []);
     return (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                height: '100vh',
+                height: 'calc(100vh - 70px)',
                 width: '100vw',
                 display: 'flex',
                 overflow: 'hidden',
@@ -85,7 +82,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     overflow: 'hidden',
-                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), _jsx(ChatSidebar, { title: "AI Assistant", position: "right", width: 400, showNewChatButton: true, showClearButton: true, showSettingsButton: true, defaultOpen: true, panelProps: {
+                                }, children: _jsx(NotebookUI, { serviceManager: serviceManager }) }) })] }), _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/{JupyterNotebookExample.js → NotebookSimpleExample.js}

@@ -11,8 +11,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
-import { 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';
 const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;

package/lib/examples/ag-ui/weather/InlineWeatherCard.js

@@ -9,7 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Inspired by the AG-UI Dojo implementation, this component renders weather
  * data with dynamic theming based on weather conditions.
  *
- * @module components/chat/components/InlineWeatherCard
+ * @module chat/InlineWeatherCard
  */
 import { Spinner } from '@primer/react';
 /**

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

@@ -0,0 +1,12 @@
+import React from 'react';
+/**
+ * ExampleWrapper
+ *
+ * Wraps every example in a fixed-height container that accounts for
+ * the 60 px header bar. Examples inside can use `100vh` or `100%`
+ * freely — the wrapper clips and scrolls as needed.
+ */
+export declare const ExampleWrapper: React.FC<{
+    children: React.ReactNode;
+}>;
+export default ExampleWrapper;

package/lib/examples/components/ExampleWrapper.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+/**
+ * ExampleWrapper
+ *
+ * Wraps every example in a fixed-height container that accounts for
+ * the 60 px header bar. Examples inside can use `100vh` or `100%`
+ * freely — the wrapper clips and scrolls as needed.
+ */
+export const ExampleWrapper = ({ children, }) => (_jsx(Box, { sx: {
+        height: 'calc(100vh - 60px)',
+        width: '100%',
+        overflow: 'auto',
+        position: 'relative',
+    }, children: children }));
+export default ExampleWrapper;

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

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

package/lib/examples/components/HeaderControls.js

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

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

@@ -1,15 +1,4 @@
-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 from 'react';
 import type { ServiceManager } from '@jupyterlab/services';
 import type { ToolbarItem } from '@datalayer/primer-addons';

package/lib/examples/components/LexicalEditor.js

@@ -3,18 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-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, useRef, useState } from 'react';
 import { $getRoot, $createParagraphNode } from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';

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

@@ -1,15 +1,8 @@
 import React from 'react';
-import type { ServiceManager } from '@jupyterlab/services';
-import { type McpServerSelection } from '../../components/McpServerManager';
+import { McpServerSelection } from '../../types';
 export interface MainContentProps {
-    showNotebook: boolean;
-    timeTravel: number;
-    onTimeTravelChange: (value: number) => void;
-    richEditor: boolean;
-    notebookFile?: string;
-    lexicalFile?: string;
-    isNewAgent?: boolean;
-    serviceManager?: ServiceManager.IManager;
+    /** Whether to show the welcome message */
+    showWelcomeMessage?: boolean;
     /** Base URL for MCP API */
     baseUrl?: string;
     /** Agent ID for updating the running agent */
@@ -28,7 +21,7 @@ export interface MainContentProps {
 /**
  * Main Content Component
  *
- * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
+ * Displays the main content area with a welcome message.
  * When an agent is running (isConfigured=true), also shows the MCP Server Manager for runtime management.
  */
 export declare const MainContent: React.FC<MainContentProps>;

package/lib/examples/components/MainContent.js

@@ -1,68 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Viewer } from '@datalayer/jupyter-react';
-import { TimeTravel } from './TimeTravel';
-import { LexicalEditor } from './LexicalEditor';
-import { McpServerManager, } from '../../components/McpServerManager';
-import matplotlib from '../stores/notebooks/NotebookExample2.ipynb.json';
-import emptyNotebook from '../stores/notebooks/Empty.ipynb.json';
+import { McpServerManager } from '../../mcp/McpServerManager';
 /**
  * Main Content Component
  *
- * Displays the main content area with Simple notebook viewer or Lexical editor and time travel.
+ * Displays the main content area with a welcome message.
  * When an agent is running (isConfigured=true), also shows the MCP Server Manager for runtime management.
  */
-export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, richEditor, notebookFile, lexicalFile, isNewAgent, serviceManager, baseUrl, agentId, enableCodemode, selectedMcpServers, onSelectedMcpServersChange, onMcpServersChange, isConfigured, }) => {
-    // Use the provided notebook or fall back to matplotlib demo
-    const [notebookData, setNotebookData] = React.useState(matplotlib);
-    const [lexicalContent, setLexicalContent] = React.useState(undefined);
-    React.useEffect(() => {
-        if (isNewAgent) {
-            // Use empty notebook for new agent
-            setNotebookData(emptyNotebook);
-            setLexicalContent(undefined);
-        }
-        else if (notebookFile) {
-            // Dynamically import the notebook based on the file name
-            import(
-            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${notebookFile}`)
-                .then(module => {
-                setNotebookData(module.default);
-            })
-                .catch(() => {
-                // If the file doesn't exist, use matplotlib as fallback
-                setNotebookData(matplotlib);
-            });
-        }
-        else {
-            setNotebookData(matplotlib);
-        }
-    }, [notebookFile, isNewAgent]);
-    React.useEffect(() => {
-        if (lexicalFile && !isNewAgent) {
-            // Dynamically import the lexical file based on the file name
-            import(
-            /* webpackIgnore: true */ /* @vite-ignore */ `../stores/agents/${lexicalFile}`)
-                .then(module => {
-                // Convert the JSON to a string if needed
-                setLexicalContent(typeof module.default === 'string'
-                    ? module.default
-                    : JSON.stringify(module.default));
-            })
-                .catch(() => {
-                setLexicalContent(undefined);
-            });
-        }
-        else {
-            setLexicalContent(undefined);
-        }
-    }, [lexicalFile, isNewAgent]);
+export const MainContent = ({ showWelcomeMessage = true, baseUrl, agentId, enableCodemode, selectedMcpServers, onSelectedMcpServersChange, onMcpServersChange, isConfigured, }) => {
     return (_jsxs(Box, { sx: { height: '100%', overflow: 'auto', padding: 3 }, children: [isConfigured && baseUrl && (_jsx(Box, { sx: {
                     mb: 4,
                     p: 3,
@@ -70,10 +16,10 @@ export const MainContent = ({ showNotebook, timeTravel, onTimeTravelChange, rich
                     borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
-                }, children: _jsx(McpServerManager, { baseUrl: baseUrl, agentId: agentId, enableCodemode: enableCodemode, selectedServers: selectedMcpServers, onSelectedServersChange: onSelectedMcpServersChange, onServersChange: onMcpServersChange, disabled: false }) })), showNotebook ? (_jsxs(_Fragment, { children: [richEditor ? (_jsx(LexicalEditor, { serviceManager: serviceManager, content: lexicalContent })) : (_jsx(JupyterReactTheme, { children: _jsx(Viewer, { nbformat: notebookData, outputs: true }) })), !isNewAgent && (_jsx(TimeTravel, { value: timeTravel, onChange: onTimeTravelChange }))] })) : (_jsx(Box, { sx: {
+                }, children: _jsx(McpServerManager, { baseUrl: baseUrl, agentId: agentId, enableCodemode: enableCodemode, selectedServers: selectedMcpServers, onSelectedServersChange: onSelectedMcpServersChange, onServersChange: onMcpServersChange, disabled: false }) })), showWelcomeMessage && (_jsx(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
                     height: '100%',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Select a file to view or create a new notebook" }) }))] }));
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure your agent and start a conversation using the chat panel." }) }))] }));
 };

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

@@ -14,3 +14,4 @@ export { TimeTravel } from './TimeTravel';
 export type { TimeTravelProps } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
 export type { LexicalEditorProps } from './LexicalEditor';
+export { ExampleWrapper } from './ExampleWrapper';

package/lib/examples/components/index.js

@@ -11,3 +11,4 @@ export { HeaderControls } from './HeaderControls';
 export { FooterMetrics } from './FooterMetrics';
 export { TimeTravel } from './TimeTravel';
 export { LexicalEditor } from './LexicalEditor';
+export { ExampleWrapper } from './ExampleWrapper';

package/lib/examples/example-selector.d.ts

@@ -11,7 +11,7 @@ export declare const EXAMPLES: Record<string, () => Promise<{
 export declare function getExampleNames(): string[];
 /**
  * Get the selected example based on environment variable
- * Falls back to 'JupyterNotebookExample' if not specified or invalid
+ * Falls back to 'NotebookExample' if not specified or invalid
  */
 export declare function getSelectedExample(): () => Promise<{
     default: React.ComponentType;