@datalayer/agent-runtimes 0.0.3 → 0.0.4

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.4",
   "type": "module",
   "workspaces": [
     ".",
@@ -118,7 +118,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 +177,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 +281,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 +291,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 +308,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",