@datalayer/agent-runtimes 0.0.3 → 0.0.5

package/lib/components/chat/protocols/VercelAIAdapter.d.ts

@@ -61,6 +61,8 @@ export declare class VercelAIAdapter extends BaseProtocolAdapter {
         model?: string;
         /** Full conversation history to send with the message */
         messages?: ChatMessage[];
+        /** Builtin tools / MCP tools to enable for this request */
+        builtinTools?: string[];
     }): Promise<void>;
     /**
      * Parse SSE stream from Vercel AI

package/lib/components/chat/protocols/VercelAIAdapter.js

@@ -107,6 +107,11 @@ export class VercelAIAdapter extends BaseProtocolAdapter {
                 ...(options?.tools && { tools: options.tools }),
                 // Model override for per-request model selection
                 ...(options?.model && { model: options.model }),
+                // Builtin tools / MCP tools to enable
+                ...(options?.builtinTools &&
+                    options.builtinTools.length > 0 && {
+                    builtinTools: options.builtinTools,
+                }),
             };
             if (options?.model) {
                 console.log('[VercelAIAdapter] Sending with model:', options.model);

package/lib/examples/AgentRuntimeCustomExample.d.ts

@@ -1,9 +1,10 @@
 /**
  * Agent Runtime Custom Example Component
  *
- * Demonstrates the unified Chat component with Simple transport
+ * Demonstrates the unified Chat component with AG-UI transport
  * and all necessary providers:
  * - QueryClientProvider for data fetching
+ * - Auto-creates agent on the server if it doesn't exist
  */
 declare const AgentRuntimeCustomExample: React.FC;
 export default AgentRuntimeCustomExample;

package/lib/examples/AgentRuntimeCustomExample.js

@@ -3,7 +3,8 @@ 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 { Text } from '@primer/react';
+import { useCallback, useEffect, useState } from 'react';
+import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
 import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
@@ -19,14 +20,107 @@ 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() {
+    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`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: AGENT_NAME,
+                    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.
+
+You can help users with:
+- Writing and debugging Python code
+- Data analysis with pandas, numpy, and other libraries
+- Creating visualizations with matplotlib, plotly, etc.
+- Machine learning with scikit-learn, pytorch, etc.
+- General programming questions
+
+Be concise, helpful, and provide working code examples when appropriate.`,
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('[AgentRuntimeCustomExample] Agent created:', data);
+            return data.id;
+        }
+        catch (err) {
+            console.error('[AgentRuntimeCustomExample] Error creating agent:', err);
+            throw err;
+        }
+    }, []);
+    const checkOrCreateAgent = 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) {
+                setAgentId(newAgentId);
+            }
+            else {
+                setError('Failed to create agent');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to initialize agent';
+            setError(errorMessage);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [createAgent]);
+    useEffect(() => {
+        checkOrCreateAgent();
+    }, [checkOrCreateAgent]);
+    return { agentId, isLoading, error, retry: checkOrCreateAgent };
+}
 /**
  * Agent Runtime Custom Example Component
  *
- * Demonstrates the unified Chat component with Simple transport
+ * Demonstrates the unified Chat component with AG-UI transport
  * and all necessary providers:
  * - QueryClientProvider for data fetching
+ * - Auto-creates agent on the server if it doesn't exist
  */
 const AgentRuntimeCustomExample = () => {
+    const { agentId, isLoading, error, retry } = useEnsureAgent();
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -41,12 +135,33 @@ const AgentRuntimeCustomExample = () => {
                                     fontWeight: 'bold',
                                     display: 'block',
                                     marginBottom: 1,
-                                }, children: "Agent Runtime Custom Example" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
+                                }, children: "Datalayer Assistant" }), _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',
                             flexDirection: 'column',
-                        }, children: _jsx(Chat, { transport: "vercel-ai-jupyter", showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
+                        }, children: isLoading ? (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                height: '100%',
+                                gap: 3,
+                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Initializing agent..." })] })) : error ? (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                height: '100%',
+                                gap: 3,
+                                p: 4,
+                            }, children: [_jsx(Text, { sx: { color: 'danger.fg', fontWeight: 'bold' }, children: "Failed to initialize agent" }), _jsx(Text, { sx: { color: 'fg.muted', textAlign: 'center' }, children: error }), _jsx(Text, { as: "button", onClick: retry, sx: {
+                                        color: 'accent.fg',
+                                        cursor: 'pointer',
+                                        textDecoration: 'underline',
+                                        border: 'none',
+                                        background: 'none',
+                                    }, children: "Retry" })] })) : agentId ? (_jsx(Chat, { transport: "ag-ui", agentId: agentId, showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
                                 {
                                     title: '👋 Say hello',
                                     message: 'Hello! What can you help me with today?',
@@ -63,6 +178,6 @@ const AgentRuntimeCustomExample = () => {
                                     title: '📊 Data analysis',
                                     message: 'How do I analyze data with pandas?',
                                 },
-                            ] }) })] }) }) }));
+                            ] })) : null })] }) }) }));
 };
 export default AgentRuntimeCustomExample;

package/lib/hooks/useNotebookAIAgent.d.ts

@@ -1,8 +1,8 @@
-import type { IAIAgent } from '../models';
+import type { Agent } from '../state';
 /**
  * Get the document AI Agent if any.
  *
  * It handles checking the AI Agent is alive so it should only be use once per document.
  */
-export declare function useNotebookAIAgent(notebookId: string): IAIAgent | undefined;
+export declare function useNotebookAIAgent(notebookId: string): Agent | undefined;
 export default useNotebookAIAgent;

package/lib/hooks/useNotebookAIAgent.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect } from 'react';
-import { useAIAgentStore } from '../state';
+import { useAgentStore } from '../state';
 import { useAIAgents } from './useAgents';
 /**
  * Get the document AI Agent if any.
@@ -12,7 +12,10 @@ import { useAIAgents } from './useAgents';
  */
 export function useNotebookAIAgent(notebookId) {
     const { getAIAgent } = useAIAgents();
-    const { aiAgents, addAIAgent, deleteAIAgent, updateAIAgent } = useAIAgentStore();
+    const agents = useAgentStore(state => state.agents);
+    const upsertAgent = useAgentStore(state => state.upsertAgent);
+    const deleteAgent = useAgentStore(state => state.deleteAgent);
+    const getAgentById = useAgentStore(state => state.getAgentById);
     // Check AI Agent is alive.
     useEffect(() => {
         let abortController;
@@ -23,25 +26,39 @@ export function useNotebookAIAgent(notebookId) {
                     signal: abortController.signal,
                 });
                 if (!response.success) {
-                    deleteAIAgent(notebookId);
+                    deleteAgent(notebookId);
                     return;
                 }
-                const currentAgent = aiAgents.find(agent => agent.documentId === notebookId);
+                const currentAgent = getAgentById(notebookId);
                 const runtimeId = response.agent.runtime?.id;
                 if (currentAgent) {
+                    // Update existing agent if runtime changed
                     if (currentAgent.runtimeId !== runtimeId) {
-                        updateAIAgent(notebookId, runtimeId);
+                        upsertAgent({
+                            id: notebookId,
+                            baseUrl: currentAgent.baseUrl,
+                            transport: currentAgent.transport,
+                            runtimeId,
+                            status: 'running',
+                        });
                     }
                 }
                 else {
-                    addAIAgent({
+                    // Add new agent - assume it's a notebook agent with document tracking
+                    upsertAgent({
+                        id: notebookId,
+                        name: `Notebook ${notebookId}`,
+                        description: 'AI agent for notebook',
+                        baseUrl: '', // Will be set by the actual agent implementation
+                        transport: 'vercel-ai', // Default transport for notebook agents
                         documentId: notebookId,
                         runtimeId,
+                        status: 'running',
                     });
                 }
             }
             catch (r) {
-                deleteAIAgent(notebookId);
+                deleteAgent(notebookId);
             }
         };
         const refreshInterval = setInterval(refreshAIAgent, 60_000);
@@ -49,8 +66,8 @@ export function useNotebookAIAgent(notebookId) {
             abortController?.abort('Component unmounted');
             clearInterval(refreshInterval);
         };
-    }, [aiAgents, notebookId]);
-    const aiAgent = aiAgents.find(aiAgent => aiAgent.documentId === notebookId);
+    }, [agents, notebookId, getAIAgent, deleteAgent, getAgentById, upsertAgent]);
+    const aiAgent = getAgentById(notebookId);
     return aiAgent;
 }
 export default useNotebookAIAgent;

package/lib/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './state';

package/lib/index.js

@@ -3,3 +3,4 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './components';
+export * from './state';

package/lib/state/substates/AIAgentState.d.ts

@@ -1,11 +1,81 @@
-import type { IAIAgent } from '../../models';
-export type AIAgentState = {
-    aiAgents: readonly IAIAgent[];
-    addAIAgent: (aiAgent: IAIAgent) => void;
-    deleteAIAgent: (documentId: string) => void;
-    updateAIAgent: (documentId: string, runtimeId?: string) => void;
+import type { Transport } from '../../components/chat/components/Chat';
+export type AgentStatus = 'running' | 'paused' | 'initializing' | 'error';
+export type { Transport };
+/**
+ * Unified Agent model combining runtime tracking and UI state
+ */
+export interface Agent {
+    /** Unique agent identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Agent description */
+    description: string;
+    /** Base URL for the agent (for Jupyter: baseUrl, for FastAPI: baseUrl) */
+    baseUrl: string;
+    /** Transport protocol used */
+    transport: Transport;
+    /** Current status */
+    status: AgentStatus;
+    /** Last error message if status is 'error' */
+    error?: string | null;
+    /** Timestamp of last update */
+    lastUpdated: number;
+    /** Document ID (for document-based agents) */
+    documentId?: string;
+    /** Runtime ID (for Jupyter kernel-based agents) */
+    runtimeId?: string;
+    /** Author name (optional, for display) */
+    author?: string;
+    /** Avatar URL (optional, for display) */
+    avatarUrl?: string;
+}
+export type AgentState = {
+    /** All registered agents */
+    agents: readonly Agent[];
+    /** Add or update an agent */
+    upsertAgent: (agent: Partial<Agent> & {
+        id: string;
+        baseUrl: string;
+        transport: Transport;
+    }) => void;
+    /** Get agent by ID */
+    getAgentById: (id: string) => Agent | undefined;
+    /** Get agent by baseUrl and transport */
+    getAgentByUrl: (baseUrl: string, transport: Transport) => Agent | undefined;
+    /** Update agent status */
+    updateAgentStatus: (id: string, status: AgentStatus, error?: string | null) => void;
+    /** Toggle agent status between running/paused */
+    toggleAgentStatus: (id: string) => void;
+    /** Delete an agent */
+    deleteAgent: (id: string) => void;
+    /** Clear all agents */
+    clearAgents: () => void;
 };
-export declare const aiAgentStore: import("zustand").StoreApi<AIAgentState>;
-export declare function useAIAgentStore(): AIAgentState;
-export declare function useAIAgentStore<T>(selector: (state: AIAgentState) => T): T;
-export default useAIAgentStore;
+export declare const agentStore: Omit<import("zustand").StoreApi<AgentState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AgentState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AgentState) => void) => () => void;
+        onFinishHydration: (fn: (state: AgentState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AgentState, unknown>>;
+    };
+};
+export declare function useAgentStore(): AgentState;
+export declare function useAgentStore<T>(selector: (state: AgentState) => T): T;
+export type AIAgentState = AgentState;
+export declare const aiAgentStore: Omit<import("zustand").StoreApi<AgentState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AgentState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: AgentState) => void) => () => void;
+        onFinishHydration: (fn: (state: AgentState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AgentState, unknown>>;
+    };
+};
+export declare const useAIAgentStore: typeof useAgentStore;
+export default useAgentStore;

package/lib/state/substates/AIAgentState.js

@@ -4,39 +4,105 @@
  */
 import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
-export const aiAgentStore = createStore(set => ({
-    aiAgents: [],
-    addAIAgent: (aiAgent) => {
-        set((state) => {
-            if (!state.aiAgents.includes(aiAgent)) {
-                return { aiAgents: state.aiAgents.concat([aiAgent]) };
+import { persist, createJSONStorage } from 'zustand/middleware';
+export const agentStore = createStore()(persist((set, get) => ({
+    agents: [],
+    upsertAgent: agentData => {
+        set(state => {
+            const existingIndex = state.agents.findIndex(a => a.id === agentData.id);
+            const now = Date.now();
+            if (existingIndex >= 0) {
+                // Update existing agent
+                const updatedAgents = [...state.agents];
+                updatedAgents[existingIndex] = {
+                    ...updatedAgents[existingIndex],
+                    ...agentData,
+                    lastUpdated: now,
+                };
+                return { agents: updatedAgents };
             }
             else {
-                return {};
+                // Add new agent
+                const newAgent = {
+                    name: agentData.name || agentData.id,
+                    description: agentData.description || '',
+                    status: agentData.status || 'initializing',
+                    lastUpdated: now,
+                    ...agentData,
+                };
+                return { agents: [...state.agents, newAgent] };
             }
         });
     },
-    deleteAIAgent: (documentId) => {
-        set((state) => {
-            return {
-                aiAgents: state.aiAgents.filter(a => a.documentId === documentId),
-            };
-        });
+    getAgentById: (id) => {
+        const { agents } = get();
+        return agents.find(agent => agent.id === id);
+    },
+    getAgentByUrl: (baseUrl, transport) => {
+        const { agents } = get();
+        return agents.find(agent => agent.baseUrl === baseUrl && agent.transport === transport);
     },
-    updateAIAgent: (documentId, runtimeId) => {
-        set((state) => {
-            const index = state.aiAgents.findIndex(aiAgent => aiAgent.documentId === documentId);
+    updateAgentStatus: (id, status, error = null) => {
+        set(state => {
+            const index = state.agents.findIndex(a => a.id === id);
             if (index >= 0) {
-                state.aiAgents[index].runtimeId = runtimeId;
-                return { aiAgents: [...state.aiAgents] };
+                const updatedAgents = [...state.agents];
+                updatedAgents[index] = {
+                    ...updatedAgents[index],
+                    status,
+                    error,
+                    lastUpdated: Date.now(),
+                };
+                return { agents: updatedAgents };
             }
-            else {
-                return {};
+            return {};
+        });
+    },
+    toggleAgentStatus: (id) => {
+        set(state => {
+            const index = state.agents.findIndex(a => a.id === id);
+            if (index >= 0) {
+                const updatedAgents = [...state.agents];
+                const currentStatus = updatedAgents[index].status;
+                updatedAgents[index] = {
+                    ...updatedAgents[index],
+                    status: currentStatus === 'running' ? 'paused' : 'running',
+                    lastUpdated: Date.now(),
+                };
+                return { agents: updatedAgents };
             }
+            return {};
         });
     },
+    deleteAgent: (id) => {
+        set(state => ({
+            agents: state.agents.filter(a => a.id !== id),
+        }));
+    },
+    clearAgents: () => {
+        set({ agents: [] });
+    },
+}), {
+    name: 'agent-runtimes-storage',
+    storage: createJSONStorage(() => localStorage),
+    // Only persist essential fields
+    partialize: state => ({
+        agents: state.agents.map(agent => ({
+            id: agent.id,
+            name: agent.name,
+            description: agent.description,
+            baseUrl: agent.baseUrl,
+            transport: agent.transport,
+            status: agent.status,
+            lastUpdated: agent.lastUpdated,
+            documentId: agent.documentId,
+            runtimeId: agent.runtimeId,
+        })),
+    }),
 }));
-export function useAIAgentStore(selector) {
-    return useStore(aiAgentStore, selector);
+export function useAgentStore(selector) {
+    return useStore(agentStore, selector);
 }
-export default useAIAgentStore;
+export const aiAgentStore = agentStore;
+export const useAIAgentStore = useAgentStore;
+export default useAgentStore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "workspaces": [
     ".",
@@ -28,7 +28,9 @@
   "files": [
     "lib/**/*.{css,d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
     "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "schema/*.json"
+    "schema/*.json",
+    "patches/",
+    "scripts/"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -118,7 +120,7 @@
     "@ag-ui/encoder": "^0.0.42",
     "@ag-ui/proto": "^0.0.42",
     "@agentclientprotocol/sdk": "^0.8.0",
-    "@ai-sdk/react": "3.0.0-beta.172",
+    "@ai-sdk/react": "3.0.30",
     "@anthropic-ai/sdk": "^0.52.0",
     "@datalayer/core": "^0.0.24",
     "@datalayer/icons-react": "^1.0.6",
@@ -177,7 +179,7 @@
     "@tanstack/react-query": "^5.90.6",
     "@toon-format/toon": "^1.3.0",
     "@xyflow/react": "^12.10.0",
-    "ai": "^6.0.6",
+    "ai": "6.0.28",
     "ansi-to-html": "^0.7.2",
     "axios": "^1.7.7",
     "boring-avatars": "^2.0.1",
@@ -281,7 +283,7 @@
     "vitest": "^3.2.4"
   },
   "resolutions": {
-    "@ai-sdk/react": "3.0.0-beta.172",
+    "@ai-sdk/react": "3.0.30",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",
@@ -291,14 +293,14 @@
     "@microsoft/load-themed-styles": "1.10.295",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "ai": "^6.0.6",
+    "ai": "6.0.28",
     "pyodide": "0.28.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "^5.8.3"
   },
   "overrides": {
-    "@ai-sdk/react": "3.0.0-beta.172",
+    "@ai-sdk/react": "3.0.30",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.13.0",
@@ -308,7 +310,7 @@
     "@microsoft/load-themed-styles": "1.10.295",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "ai": "^6.0.6",
+    "ai": "6.0.28",
     "pyodide": "0.28.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",

package/patches/.gitkeep

@@ -0,0 +1 @@
+# Patches directory for patch-package

package/scripts/apply-patches.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+# Copyright (c) 2025-2026 Datalayer, Inc.
+# Distributed under the terms of the Modified BSD License.
+
+# Apply patch-package patches for jupyter packages
+# This is normally run automatically via npm's postinstall hook,
+# but can be run manually if needed.
+
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}📝 Applying patches...${NC}"
+
+# Get the script directory and project root
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+CORE_ROOT="$( cd "$SCRIPT_DIR/.." && pwd )"
+
+cd "$CORE_ROOT"
+
+npx patch-package
+
+echo -e "${GREEN}✅ Patches applied successfully${NC}"

package/scripts/create-patches.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+# Copyright (c) 2025-2026 Datalayer, Inc.
+# Distributed under the terms of the Modified BSD License.
+
+# Create patch-package patches for locally modified jupyter packages
+# This script generates patches that can be committed to the repo and
+# applied automatically during npm install via the postinstall hook.
+
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}🔧 Creating patches for jupyter packages...${NC}"
+
+# Get the script directory and project root
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+CORE_ROOT="$( cd "$SCRIPT_DIR/.." && pwd )"
+
+cd "$CORE_ROOT"
+
+# First, sync the latest changes from jupyter-ui to ensure patches include all modifications
+echo -e "${BLUE}🔄 Syncing latest changes from jupyter-ui...${NC}"
+bash "$SCRIPT_DIR/sync-jupyter.sh"
+
+# Ensure package-lock.json exists (required by patch-package)
+if [ ! -f "package-lock.json" ]; then
+  echo -e "${YELLOW}⚠️  No package-lock.json found. Creating one...${NC}"
+  npm i --package-lock-only
+fi
+
+# Create patches
+echo -e "${BLUE}📝 Generating patches with patch-package...${NC}"
+npx patch-package @datalayer/jupyter-lexical @datalayer/jupyter-react
+
+echo -e "${GREEN}✅ Patches created successfully in patches/ directory${NC}"
+echo -e "${BLUE}ℹ️  Patches will be applied automatically on 'npm install' via postinstall hook${NC}"

package/scripts/download-ai-elements.py

@@ -0,0 +1,86 @@
+#!/usr/bin/env python3
+# Copyright (c) 2025-2026 Datalayer, Inc.
+# Distributed under the terms of the Modified BSD License.
+
+"""
+Download AI Elements components directly from the registry
+"""
+
+import json
+import os
+import urllib.request
+import sys
+
+BASE_URL = "https://registry.ai-sdk.dev"
+COMPONENTS_DIR = "src/components/ai-elements"
+
+# Components to download
+COMPONENTS = [
+    "message",
+    "conversation",
+    "prompt-input",
+    "model-selector",
+    "artifact",
+    "code-block",
+    "suggestion",
+    "sources",
+    "reasoning",
+    "tool",
+    "loader",
+    "shimmer",
+]
+
+def download_component(component_name):
+    """Download a component from the registry"""
+    url = f"{BASE_URL}/{component_name}.json"
+    print(f"Downloading {component_name}...")
+    
+    try:
+        with urllib.request.urlopen(url) as response:
+            data = json.loads(response.read())
+        
+        # Get the first file (main component file)
+        if 'files' in data and len(data['files']) > 0:
+            file_data = data['files'][0]
+            content = file_data.get('content', '')
+            target = file_data.get('target', f"components/ai-elements/{component_name}.tsx")
+            
+            # Adjust target path
+            target_path = os.path.join(COMPONENTS_DIR, f"{component_name}.tsx")
+            
+            # Ensure directory exists
+            os.makedirs(os.path.dirname(target_path), exist_ok=True)
+            
+            # Write file
+            with open(target_path, 'w') as f:
+                f.write(content)
+            
+            print(f"✓ Downloaded {component_name} to {target_path}")
+            return True
+        else:
+            print(f"✗ No files found for {component_name}")
+            return False
+            
+    except Exception as e:
+        print(f"✗ Error downloading {component_name}: {e}")
+        return False
+
+def main():
+    print(f"Downloading AI Elements components to {COMPONENTS_DIR}")
+    print(f"Components: {', '.join(COMPONENTS)}\n")
+    
+    # Create components directory
+    os.makedirs(COMPONENTS_DIR, exist_ok=True)
+    
+    success_count = 0
+    for component in COMPONENTS:
+        if download_component(component):
+            success_count += 1
+    
+    print(f"\n✓ Successfully downloaded {success_count}/{len(COMPONENTS)} components")
+    
+    if success_count < len(COMPONENTS):
+        sys.exit(1)
+
+if __name__ == "__main__":
+    main()

package/scripts/sync-jupyter.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+# Copyright (c) 2025-2026 Datalayer, Inc.
+# Distributed under the terms of the Modified BSD License.
+
+# Sync local jupyter-ui packages to @datalayer/agent-runtimes node_modules
+# This script builds the local jupyter packages and copies their lib/ outputs
+# into the core package's node_modules for quick testing during development.
+#
+# Usage:
+#   ./sync-jupyter.sh          # Run once and exit
+#   ./sync-jupyter.sh --watch  # Watch for changes and auto-sync
+
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Get the script directory and project root
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+CORE_ROOT="$( cd "$SCRIPT_DIR/.." && pwd )"
+JUPYTER_UI_ROOT="$( cd "$CORE_ROOT/../jupyter-ui" && pwd )"
+
+# Function to perform the sync
+sync_packages() {
+  echo -e "${BLUE}🔄 Syncing jupyter-ui packages to @datalayer/agent-runtimes...${NC}"
+
+  # Build jupyter-react FIRST (lexical depends on it)
+  echo -e "${BLUE}📦 Building @datalayer/jupyter-react...${NC}"
+  cd "$JUPYTER_UI_ROOT/packages/react"
+  echo -e "${YELLOW}[DEBUG] Current directory: $(pwd)${NC}"
+  rm -f tsconfig.tsbuildinfo
+  rm -rf lib
+  echo -e "${YELLOW}[DEBUG] Running gulp resources-to-lib...${NC}"
+  npx gulp resources-to-lib
+  echo -e "${YELLOW}[DEBUG] Running TypeScript...${NC}"
+  npx tsc --noEmitOnError false
+  TSC_EXIT=$?
+  echo -e "${YELLOW}[DEBUG] TypeScript exit code: $TSC_EXIT${NC}"
+  echo -e "${YELLOW}[DEBUG] Checking if lib exists...${NC}"
+  ls -la lib 2>&1 | head -5
+
+  # Verify lib was created
+  if [ ! -d "lib" ]; then
+    echo -e "${YELLOW}⚠️  lib directory was not created by TypeScript!${NC}"
+    exit 1
+  fi
+  echo -e "${YELLOW}[DEBUG] lib directory verified!${NC}"
+
+  # Copy react to core's node_modules for patch-package
+  echo -e "${BLUE}📋 Copying react to core/node_modules...${NC}"
+  cd "$CORE_ROOT"
+  # Only replace lib/ directory, preserving LICENSE, README.md, etc.
+  rm -rf node_modules/@datalayer/jupyter-react/lib
+  mkdir -p node_modules/@datalayer/jupyter-react/lib
+  cp -r "$JUPYTER_UI_ROOT/packages/react/lib/." node_modules/@datalayer/jupyter-react/lib/
+  cp "$JUPYTER_UI_ROOT/packages/react/package.json" node_modules/@datalayer/jupyter-react/
+
+  # Now build jupyter-lexical (finds react via workspace hoisting)
+  echo -e "${BLUE}📦 Building @datalayer/jupyter-lexical...${NC}"
+  cd "$JUPYTER_UI_ROOT/packages/lexical"
+  rm -f tsconfig.tsbuildinfo
+  rm -rf lib
+  echo -e "${YELLOW}[DEBUG] Running gulp resources-to-lib...${NC}"
+  npx gulp resources-to-lib
+  echo -e "${YELLOW}[DEBUG] Running TypeScript...${NC}"
+  npx tsc --noEmitOnError false
+
+  # Copy lexical to node_modules
+  echo -e "${BLUE}📋 Copying lexical to node_modules...${NC}"
+  cd "$CORE_ROOT"
+  # Only replace lib/ directory, preserving LICENSE, README.md, etc.
+  rm -rf node_modules/@datalayer/jupyter-lexical/lib
+  mkdir -p node_modules/@datalayer/jupyter-lexical/lib
+  cp -r "$JUPYTER_UI_ROOT/packages/lexical/lib/." node_modules/@datalayer/jupyter-lexical/lib/
+  cp "$JUPYTER_UI_ROOT/packages/lexical/package.json" node_modules/@datalayer/jupyter-lexical/
+
+  echo -e "${GREEN}✅ Successfully synced at $(date +"%H:%M:%S")${NC}"
+}
+
+# Check if watch mode is requested
+if [[ "$1" == "--watch" ]]; then
+  # Check if fswatch is installed
+  if ! command -v fswatch &> /dev/null; then
+    echo -e "${YELLOW}⚠️  fswatch not found. Installing via Homebrew...${NC}"
+    if command -v brew &> /dev/null; then
+      brew install fswatch
+    else
+      echo -e "${YELLOW}⚠️  Homebrew not found. Please install fswatch manually:${NC}"
+      echo -e "${YELLOW}    brew install fswatch${NC}"
+      echo -e "${YELLOW}    or visit: https://github.com/emcrisostomo/fswatch${NC}"
+      exit 1
+    fi
+  fi
+
+  echo -e "${BLUE}👁️  Watch mode enabled. Monitoring jupyter-ui packages for changes...${NC}"
+  echo -e "${YELLOW}📁 Watching:${NC}"
+  echo -e "${YELLOW}   - $JUPYTER_UI_ROOT/packages/lexical/src${NC}"
+  echo -e "${YELLOW}   - $JUPYTER_UI_ROOT/packages/react/src${NC}"
+  echo -e "${YELLOW}Press Ctrl+C to stop${NC}"
+  echo ""
+
+  # Initial sync
+  sync_packages
+
+  # Watch for changes in src directories and trigger sync
+  # Using fswatch with:
+  # -r: recursive
+  # -e: exclude patterns (node_modules, lib, etc.)
+  # -l 1: latency 1 second (debounce rapid changes)
+  fswatch -r -l 1 \
+    -e ".*" -i "\\.tsx?$" -i "\\.jsx?$" -i "\\.css$" \
+    "$JUPYTER_UI_ROOT/packages/lexical/src" \
+    "$JUPYTER_UI_ROOT/packages/react/src" | while read -r file; do
+    echo -e "\n${YELLOW}📝 Change detected in: $(basename "$file")${NC}"
+    sync_packages
+  done
+else
+  # Single run mode
+  sync_packages
+fi