@datalayer/agent-runtimes 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/README.md +34 -0
  2. package/lib/App.js +1 -1
  3. package/lib/agents/AgentDetails.d.ts +22 -1
  4. package/lib/agents/AgentDetails.js +34 -47
  5. package/lib/api/index.d.ts +0 -1
  6. package/lib/api/index.js +4 -2
  7. package/lib/chat/Chat.d.ts +5 -106
  8. package/lib/chat/Chat.js +4 -4
  9. package/lib/chat/ChatFloating.d.ts +7 -140
  10. package/lib/chat/ChatFloating.js +2 -2
  11. package/lib/chat/ChatPopupStandalone.d.ts +8 -47
  12. package/lib/chat/ChatPopupStandalone.js +3 -3
  13. package/lib/chat/ChatSidebar.d.ts +4 -69
  14. package/lib/chat/ChatSidebar.js +2 -2
  15. package/lib/chat/ChatStandalone.d.ts +4 -54
  16. package/lib/chat/ChatStandalone.js +3 -3
  17. package/lib/chat/base/ChatBase.js +1083 -157
  18. package/lib/chat/header/ChatHeaderBase.d.ts +11 -6
  19. package/lib/chat/header/ChatHeaderBase.js +18 -16
  20. package/lib/chat/indicators/McpStatusIndicator.d.ts +7 -4
  21. package/lib/chat/indicators/McpStatusIndicator.js +7 -32
  22. package/lib/chat/indicators/SandboxStatusIndicator.d.ts +4 -1
  23. package/lib/chat/indicators/SandboxStatusIndicator.js +9 -9
  24. package/lib/chat/indicators/SkillsStatusIndicator.d.ts +7 -0
  25. package/lib/chat/indicators/SkillsStatusIndicator.js +88 -0
  26. package/lib/chat/indicators/index.d.ts +1 -0
  27. package/lib/chat/indicators/index.js +1 -0
  28. package/lib/chat/messages/ChatMessageList.d.ts +1 -1
  29. package/lib/chat/messages/ChatMessageList.js +108 -113
  30. package/lib/chat/prompt/InputFooter.d.ts +19 -6
  31. package/lib/chat/prompt/InputFooter.js +71 -18
  32. package/lib/chat/prompt/InputPrompt.d.ts +3 -1
  33. package/lib/chat/prompt/InputPrompt.js +4 -4
  34. package/lib/chat/prompt/InputPromptFooter.js +1 -1
  35. package/lib/chat/prompt/InputPromptLexical.d.ts +3 -1
  36. package/lib/chat/prompt/InputPromptLexical.js +12 -5
  37. package/lib/chat/prompt/InputPromptText.d.ts +3 -1
  38. package/lib/chat/prompt/InputPromptText.js +2 -2
  39. package/lib/chat/tools/ToolApprovalBanner.js +1 -1
  40. package/lib/chat/tools/ToolCallDisplay.d.ts +3 -1
  41. package/lib/chat/tools/ToolCallDisplay.js +2 -2
  42. package/lib/chat/usage/TokenUsageBar.js +20 -2
  43. package/lib/client/AgentRuntimesClientContext.d.ts +53 -0
  44. package/lib/client/AgentRuntimesClientContext.js +55 -0
  45. package/lib/client/AgentsMixin.d.ts +0 -18
  46. package/lib/client/AgentsMixin.js +6 -30
  47. package/lib/client/IAgentRuntimesClient.d.ts +215 -0
  48. package/lib/client/IAgentRuntimesClient.js +5 -0
  49. package/lib/client/SdkAgentRuntimesClient.d.ts +151 -0
  50. package/lib/client/SdkAgentRuntimesClient.js +134 -0
  51. package/lib/client/index.d.ts +4 -1
  52. package/lib/client/index.js +3 -1
  53. package/lib/components/NotificationEventCard.js +5 -1
  54. package/lib/config/AgentConfiguration.js +3 -3
  55. package/lib/context/ContextDistribution.d.ts +3 -1
  56. package/lib/context/ContextDistribution.js +8 -27
  57. package/lib/context/ContextInspector.d.ts +3 -1
  58. package/lib/context/ContextInspector.js +19 -67
  59. package/lib/context/ContextPanel.d.ts +3 -1
  60. package/lib/context/ContextPanel.js +104 -64
  61. package/lib/context/ContextUsage.d.ts +3 -1
  62. package/lib/context/ContextUsage.js +3 -3
  63. package/lib/context/CostTracker.d.ts +9 -3
  64. package/lib/context/CostTracker.js +26 -47
  65. package/lib/context/CostUsageChart.d.ts +12 -0
  66. package/lib/context/CostUsageChart.js +378 -0
  67. package/lib/context/GraphFlowChart.d.ts +16 -0
  68. package/lib/context/GraphFlowChart.js +182 -0
  69. package/lib/context/TokenUsageChart.d.ts +8 -1
  70. package/lib/context/TokenUsageChart.js +349 -211
  71. package/lib/context/TurnGraphChart.d.ts +39 -0
  72. package/lib/context/TurnGraphChart.js +538 -0
  73. package/lib/context/otelWsPool.d.ts +20 -0
  74. package/lib/context/otelWsPool.js +69 -0
  75. package/lib/examples/A2UiComponentGalleryExample.d.ts +0 -17
  76. package/lib/examples/A2UiComponentGalleryExample.js +315 -522
  77. package/lib/examples/A2UiContactCardExample.d.ts +0 -18
  78. package/lib/examples/A2UiContactCardExample.js +154 -411
  79. package/lib/examples/A2UiRestaurantExample.d.ts +0 -30
  80. package/lib/examples/A2UiRestaurantExample.js +114 -212
  81. package/lib/examples/A2UiViewerExample.d.ts +0 -18
  82. package/lib/examples/A2UiViewerExample.js +283 -532
  83. package/lib/examples/AgUiBackendToolRenderingExample.js +1 -1
  84. package/lib/examples/AgUiHaikuGenUiExample.d.ts +1 -1
  85. package/lib/examples/AgUiHaikuGenUiExample.js +1 -1
  86. package/lib/examples/AgentCheckpointsExample.js +13 -27
  87. package/lib/examples/AgentCodemodeExample.d.ts +4 -6
  88. package/lib/examples/AgentCodemodeExample.js +591 -169
  89. package/lib/examples/AgentEvalsExample.js +12 -16
  90. package/lib/examples/AgentGuardrailsExample.js +370 -64
  91. package/lib/examples/AgentHooksExample.d.ts +3 -0
  92. package/lib/examples/AgentHooksExample.js +104 -0
  93. package/lib/examples/AgentMCPExample.d.ts +3 -0
  94. package/lib/examples/AgentMCPExample.js +480 -0
  95. package/lib/examples/AgentMemoryExample.js +13 -17
  96. package/lib/examples/AgentMonitoringExample.js +260 -199
  97. package/lib/examples/AgentNotificationsExample.js +49 -17
  98. package/lib/examples/AgentOtelExample.js +2 -3
  99. package/lib/examples/AgentOutputsExample.d.ts +11 -6
  100. package/lib/examples/AgentOutputsExample.js +382 -81
  101. package/lib/examples/AgentParametersExample.d.ts +3 -0
  102. package/lib/examples/AgentParametersExample.js +246 -0
  103. package/lib/examples/AgentSandboxExample.d.ts +2 -2
  104. package/lib/examples/AgentSandboxExample.js +68 -40
  105. package/lib/examples/AgentSkillsExample.js +91 -99
  106. package/lib/examples/{AgentspecExample.js → AgentSpecsExample.js} +10 -21
  107. package/lib/examples/AgentSubagentsExample.d.ts +14 -0
  108. package/lib/examples/AgentSubagentsExample.js +228 -0
  109. package/lib/examples/AgentToolApprovalsExample.js +29 -557
  110. package/lib/examples/AgentTriggersExample.js +819 -565
  111. package/lib/examples/ChatCustomExample.js +11 -24
  112. package/lib/examples/ChatExample.js +7 -24
  113. package/lib/examples/CopilotKitLexicalExample.js +2 -1
  114. package/lib/examples/CopilotKitNotebookExample.js +2 -1
  115. package/lib/examples/HomeExample.d.ts +15 -0
  116. package/lib/examples/HomeExample.js +77 -0
  117. package/lib/examples/Lexical2Example.js +4 -2
  118. package/lib/examples/{LexicalExample.d.ts → LexicalAgentExample.d.ts} +4 -4
  119. package/lib/examples/{LexicalExample.js → LexicalAgentExample.js} +65 -16
  120. package/lib/examples/{LexicalSidebarExample.d.ts → LexicalAgentSidebarExample.d.ts} +5 -5
  121. package/lib/examples/LexicalAgentSidebarExample.js +261 -0
  122. package/lib/examples/NotebookAgentExample.d.ts +9 -0
  123. package/lib/examples/NotebookAgentExample.js +192 -0
  124. package/lib/examples/{NotebookSidebarExample.d.ts → NotebookAgentSidebarExample.d.ts} +2 -2
  125. package/lib/examples/NotebookAgentSidebarExample.js +221 -0
  126. package/lib/examples/{DatalayerNotebookExample.d.ts → NotebookCollaborationExample.d.ts} +4 -4
  127. package/lib/examples/{DatalayerNotebookExample.js → NotebookCollaborationExample.js} +3 -3
  128. package/lib/examples/NotebookExample.d.ts +4 -7
  129. package/lib/examples/NotebookExample.js +14 -146
  130. package/lib/examples/components/AuthRequiredView.d.ts +6 -0
  131. package/lib/examples/components/AuthRequiredView.js +33 -0
  132. package/lib/examples/components/ExampleWrapper.d.ts +7 -0
  133. package/lib/examples/components/ExampleWrapper.js +25 -6
  134. package/lib/examples/{ag-ui → components}/haiku/HaikuDisplay.js +1 -1
  135. package/lib/examples/{ag-ui → components}/haiku/InlineHaikuCard.js +1 -1
  136. package/lib/examples/{ag-ui → components}/haiku/index.d.ts +1 -1
  137. package/lib/examples/{ag-ui → components}/haiku/index.js +1 -1
  138. package/lib/examples/components/index.d.ts +3 -0
  139. package/lib/examples/components/index.js +4 -0
  140. package/lib/examples/{ag-ui → components}/weather/index.d.ts +1 -1
  141. package/lib/examples/{ag-ui → components}/weather/index.js +1 -1
  142. package/lib/examples/example-selector.d.ts +17 -4
  143. package/lib/examples/example-selector.js +107 -41
  144. package/lib/examples/index.d.ts +9 -6
  145. package/lib/examples/index.js +9 -6
  146. package/lib/examples/main.js +217 -27
  147. package/lib/examples/utils/a2ui.d.ts +18 -0
  148. package/lib/examples/utils/a2ui.js +69 -0
  149. package/lib/examples/utils/a2uiMarkdownProvider.d.ts +7 -0
  150. package/lib/examples/utils/a2uiMarkdownProvider.js +9 -0
  151. package/lib/examples/utils/agentId.d.ts +18 -0
  152. package/lib/examples/utils/agentId.js +54 -0
  153. package/lib/examples/utils/agents/earthquake-detector.json +11 -11
  154. package/lib/examples/utils/agents/sales-forecaster.json +11 -11
  155. package/lib/examples/utils/agents/social-post-generator.json +11 -11
  156. package/lib/examples/utils/agents/stock-market.json +11 -11
  157. package/lib/examples/utils/examplesStore.js +82 -27
  158. package/lib/hooks/index.d.ts +8 -8
  159. package/lib/hooks/index.js +7 -7
  160. package/lib/hooks/useA2A.d.ts +2 -3
  161. package/lib/hooks/useAIAgentsWebSocket.d.ts +43 -4
  162. package/lib/hooks/useAIAgentsWebSocket.js +118 -12
  163. package/lib/hooks/useAcp.d.ts +1 -2
  164. package/lib/hooks/useAgUi.d.ts +1 -1
  165. package/lib/hooks/{useAgents.d.ts → useAgentRuntimes.d.ts} +39 -2
  166. package/lib/hooks/{useAgents.js → useAgentRuntimes.js} +125 -15
  167. package/lib/hooks/useAgentsCatalog.js +1 -1
  168. package/lib/hooks/useAgentsService.d.ts +2 -2
  169. package/lib/hooks/useAgentsService.js +7 -7
  170. package/lib/hooks/useCheckpoints.js +1 -1
  171. package/lib/hooks/useConfig.d.ts +4 -1
  172. package/lib/hooks/useConfig.js +10 -3
  173. package/lib/hooks/useContextSnapshot.d.ts +9 -4
  174. package/lib/hooks/useContextSnapshot.js +9 -37
  175. package/lib/hooks/useMonitoring.js +3 -0
  176. package/lib/hooks/useSandbox.d.ts +20 -8
  177. package/lib/hooks/useSandbox.js +105 -40
  178. package/lib/hooks/useSkills.d.ts +23 -5
  179. package/lib/hooks/useSkills.js +94 -39
  180. package/lib/hooks/useToolApprovals.d.ts +60 -36
  181. package/lib/hooks/useToolApprovals.js +318 -69
  182. package/lib/hooks/useVercelAI.d.ts +1 -1
  183. package/lib/index.d.ts +2 -1
  184. package/lib/index.js +1 -0
  185. package/lib/inference/index.d.ts +0 -1
  186. package/lib/middleware/index.d.ts +0 -1
  187. package/lib/protocols/AGUIAdapter.js +6 -0
  188. package/lib/protocols/VercelAIAdapter.d.ts +7 -0
  189. package/lib/protocols/VercelAIAdapter.js +59 -7
  190. package/lib/specs/agents/agents.d.ts +10 -0
  191. package/lib/specs/agents/agents.js +2139 -262
  192. package/lib/specs/agents/index.js +3 -1
  193. package/lib/specs/envvars.d.ts +1 -0
  194. package/lib/specs/envvars.js +38 -20
  195. package/lib/specs/evals.js +6 -6
  196. package/lib/specs/events.d.ts +3 -10
  197. package/lib/specs/events.js +127 -84
  198. package/lib/specs/frontendTools.js +2 -2
  199. package/lib/specs/guardrails.d.ts +0 -7
  200. package/lib/specs/guardrails.js +240 -159
  201. package/lib/specs/index.d.ts +1 -0
  202. package/lib/specs/index.js +1 -0
  203. package/lib/specs/mcpServers.js +35 -6
  204. package/lib/specs/memory.d.ts +0 -2
  205. package/lib/specs/memory.js +4 -17
  206. package/lib/specs/models.js +25 -5
  207. package/lib/specs/notifications.js +102 -18
  208. package/lib/specs/outputs.js +15 -9
  209. package/lib/specs/personas.d.ts +41 -0
  210. package/lib/specs/personas.js +168 -0
  211. package/lib/specs/skills.d.ts +2 -1
  212. package/lib/specs/skills.js +41 -23
  213. package/lib/specs/teams/index.js +3 -1
  214. package/lib/specs/teams/teams.js +468 -348
  215. package/lib/specs/tools.js +4 -4
  216. package/lib/specs/triggers.js +61 -11
  217. package/lib/stores/agentRuntimeStore.d.ts +204 -0
  218. package/lib/stores/agentRuntimeStore.js +636 -0
  219. package/lib/stores/index.d.ts +1 -1
  220. package/lib/stores/index.js +1 -1
  221. package/lib/tools/adapters/copilotkit/lexicalHooks.d.ts +1 -2
  222. package/lib/tools/adapters/copilotkit/lexicalHooks.js +1 -3
  223. package/lib/tools/adapters/copilotkit/notebookHooks.d.ts +1 -2
  224. package/lib/tools/adapters/copilotkit/notebookHooks.js +1 -3
  225. package/lib/tools/index.d.ts +0 -2
  226. package/lib/tools/index.js +0 -1
  227. package/lib/types/agentspecs.d.ts +50 -1
  228. package/lib/types/chat.d.ts +309 -8
  229. package/lib/types/context.d.ts +27 -0
  230. package/lib/types/cost.d.ts +2 -2
  231. package/lib/types/index.d.ts +2 -0
  232. package/lib/types/index.js +2 -0
  233. package/lib/types/mcp.d.ts +8 -0
  234. package/lib/types/models.d.ts +2 -2
  235. package/lib/types/personas.d.ts +25 -0
  236. package/lib/types/personas.js +5 -0
  237. package/lib/types/skills.d.ts +43 -1
  238. package/lib/types/stream.d.ts +110 -0
  239. package/lib/types/stream.js +36 -0
  240. package/lib/utils/utils.d.ts +9 -5
  241. package/lib/utils/utils.js +9 -5
  242. package/package.json +13 -9
  243. package/scripts/codegen/__pycache__/generate_agents.cpython-313.pyc +0 -0
  244. package/scripts/codegen/__pycache__/generate_events.cpython-313.pyc +0 -0
  245. package/scripts/codegen/__pycache__/versioning.cpython-313.pyc +0 -0
  246. package/scripts/codegen/generate_agents.py +102 -6
  247. package/scripts/codegen/generate_events.py +35 -13
  248. package/scripts/codegen/generate_personas.py +319 -0
  249. package/scripts/codegen/generate_skills.py +9 -9
  250. package/scripts/sync-jupyter.sh +26 -7
  251. package/lib/api/tool-approvals.d.ts +0 -62
  252. package/lib/api/tool-approvals.js +0 -145
  253. package/lib/examples/LexicalSidebarExample.js +0 -163
  254. package/lib/examples/NotebookSidebarExample.js +0 -119
  255. package/lib/examples/NotebookSimpleExample.d.ts +0 -6
  256. package/lib/examples/NotebookSimpleExample.js +0 -22
  257. package/lib/examples/ag-ui/index.d.ts +0 -10
  258. package/lib/examples/ag-ui/index.js +0 -16
  259. package/lib/hooks/useAgentsRegistry.d.ts +0 -10
  260. package/lib/hooks/useAgentsRegistry.js +0 -20
  261. package/lib/stores/agentsStore.d.ts +0 -123
  262. package/lib/stores/agentsStore.js +0 -270
  263. /package/lib/examples/{AgentspecExample.d.ts → AgentSpecsExample.d.ts} +0 -0
  264. /package/lib/examples/{ag-ui → components}/haiku/HaikuDisplay.d.ts +0 -0
  265. /package/lib/examples/{ag-ui → components}/haiku/InlineHaikuCard.d.ts +0 -0
  266. /package/lib/examples/{ag-ui → components}/weather/InlineWeatherCard.d.ts +0 -0
  267. /package/lib/examples/{ag-ui → components}/weather/InlineWeatherCard.js +0 -0
@@ -3,11 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  * Copyright (c) 2025-2026 Datalayer, Inc.
4
4
  * Distributed under the terms of the Modified BSD License.
5
5
  */
6
- import { useCallback, useEffect, useState } from 'react';
6
+ import { useCallback, useEffect, useRef, useState } from 'react';
7
7
  import { Spinner, Text } from '@primer/react';
8
8
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
9
9
  import { Box } from '@datalayer/primer-addons';
10
10
  import { ThemedProvider } from './utils/themedProvider';
11
+ import { uniqueAgentId } from './utils/agentId';
11
12
  import { Chat } from '../chat';
12
13
  // Create a query client for React Query
13
14
  const queryClient = new QueryClient({
@@ -27,6 +28,7 @@ const BASE_URL = 'http://localhost:8765';
27
28
  * Creates the agent if it doesn't exist
28
29
  */
29
30
  function useEnsureAgent() {
31
+ const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
30
32
  const [agentId, setAgentId] = useState(null);
31
33
  const [isLoading, setIsLoading] = useState(true);
32
34
  const [error, setError] = useState(null);
@@ -38,12 +40,12 @@ function useEnsureAgent() {
38
40
  'Content-Type': 'application/json',
39
41
  },
40
42
  body: JSON.stringify({
41
- name: AGENT_NAME,
43
+ name: agentName,
42
44
  description: 'Datalayer AI Assistant - Your helpful coding companion',
43
45
  agent_library: 'pydantic-ai',
44
46
  transport: 'ag-ui',
45
47
  model: 'openai:gpt-4o-mini',
46
- system_prompt: `You are Datalayer Assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
48
+ system_prompt: `You are custom chat assistant, a helpful AI assistant specialized in data science, Python programming, and Jupyter notebooks.
47
49
 
48
50
  You can help users with:
49
51
  - Writing and debugging Python code
@@ -69,26 +71,11 @@ Be concise, helpful, and provide working code examples when appropriate.`,
69
71
  console.error('[AgentRuntimeCustomExample] Error creating agent:', err);
70
72
  throw err;
71
73
  }
72
- }, []);
73
- const checkOrCreateAgent = useCallback(async () => {
74
+ }, [agentName]);
75
+ const initAgent = useCallback(async () => {
74
76
  setIsLoading(true);
75
77
  setError(null);
76
78
  try {
77
- // First, try to find existing agent by name
78
- const listResponse = await fetch(`${BASE_URL}/api/v1/agents`);
79
- if (listResponse.ok) {
80
- const data = await listResponse.json();
81
- // API may return { agents: [...] } or just [...]
82
- const agents = Array.isArray(data) ? data : data.agents || [];
83
- const existingAgent = agents.find((a) => a.name === AGENT_NAME);
84
- if (existingAgent) {
85
- console.log('[AgentRuntimeCustomExample] Found existing agent:', existingAgent.id);
86
- setAgentId(existingAgent.id);
87
- setIsLoading(false);
88
- return;
89
- }
90
- }
91
- // Agent doesn't exist, create it
92
79
  console.log('[AgentRuntimeCustomExample] Creating new agent...');
93
80
  const newAgentId = await createAgent();
94
81
  if (newAgentId) {
@@ -107,9 +94,9 @@ Be concise, helpful, and provide working code examples when appropriate.`,
107
94
  }
108
95
  }, [createAgent]);
109
96
  useEffect(() => {
110
- checkOrCreateAgent();
111
- }, [checkOrCreateAgent]);
112
- return { agentId, isLoading, error, retry: checkOrCreateAgent };
97
+ initAgent();
98
+ }, [initAgent]);
99
+ return { agentId, isLoading, error, retry: initAgent };
113
100
  }
114
101
  /**
115
102
  * Agent Runtime Custom Example Component
@@ -135,7 +122,7 @@ const AgentRuntimeCustomExample = () => {
135
122
  fontWeight: 'bold',
136
123
  display: 'block',
137
124
  marginBottom: 1,
138
- }, children: "Datalayer Assistant" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
125
+ }, children: "Custom Chat Example" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Interactive chat interface with AI assistance" })] }), _jsx(Box, { as: "main", sx: {
139
126
  flex: 1,
140
127
  overflow: 'hidden',
141
128
  display: 'flex',
@@ -19,6 +19,7 @@ import { useEffect, useState } from 'react';
19
19
  import { Text, Spinner } from '@primer/react';
20
20
  import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
21
21
  import { ThemedProvider } from './utils/themedProvider';
22
+ import { uniqueAgentId } from './utils/agentId';
22
23
  import { ErrorView } from './components';
23
24
  import { Chat } from '../chat';
24
25
  setupPrimerPortals();
@@ -29,27 +30,18 @@ const AgentRuntimeChatExample = () => {
29
30
  const [agentId, setAgentId] = useState(null);
30
31
  const [error, setError] = useState(null);
31
32
  const [isCreating, setIsCreating] = useState(true);
32
- // Create the agent on mount
33
+ // Create the agent on mount — always create a fresh instance with a random
34
+ // slug so that each run starts with clean OTEL data.
33
35
  useEffect(() => {
34
36
  let cancelled = false;
35
- const ensureAgent = async () => {
37
+ const name = uniqueAgentId(AGENT_NAME);
38
+ const createAgent = async () => {
36
39
  try {
37
- // First, check if the agent already exists
38
- const checkResponse = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(AGENT_NAME)}`);
39
- if (checkResponse.ok) {
40
- // Agent exists — reuse it (preserves conversation history)
41
- if (!cancelled) {
42
- setAgentId(AGENT_NAME);
43
- setIsCreating(false);
44
- }
45
- return;
46
- }
47
- // Agent doesn't exist — create it from the library spec
48
40
  const response = await fetch(`${BASE_URL}/api/v1/agents`, {
49
41
  method: 'POST',
50
42
  headers: { 'Content-Type': 'application/json' },
51
43
  body: JSON.stringify({
52
- name: AGENT_NAME,
44
+ name,
53
45
  agent_spec_id: AGENT_SPEC_ID,
54
46
  transport: 'ag-ui',
55
47
  }),
@@ -58,15 +50,6 @@ const AgentRuntimeChatExample = () => {
58
50
  const data = await response
59
51
  .json()
60
52
  .catch(() => ({ detail: 'Unknown error' }));
61
- // Race condition: agent was created between our check and POST
62
- if (response.status === 400 &&
63
- data.detail?.includes('already exists')) {
64
- if (!cancelled) {
65
- setAgentId(AGENT_NAME);
66
- setIsCreating(false);
67
- }
68
- return;
69
- }
70
53
  throw new Error(data.detail || `Failed to create agent: ${response.status}`);
71
54
  }
72
55
  const data = await response.json();
@@ -82,7 +65,7 @@ const AgentRuntimeChatExample = () => {
82
65
  }
83
66
  }
84
67
  };
85
- ensureAgent();
68
+ createAgent();
86
69
  return () => {
87
70
  cancelled = true;
88
71
  };
@@ -39,7 +39,8 @@ import { Box } from '@datalayer/primer-addons';
39
39
  import { useJupyter } from '@datalayer/jupyter-react';
40
40
  import { ThemedJupyterProvider } from './utils/themedProvider';
41
41
  import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
42
- import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
42
+ import { useLexicalToolActions } from '../tools/adapters/copilotkit/lexicalHooks';
43
+ import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
43
44
  import { editorConfig } from './lexical/editorConfig';
44
45
  import '@datalayer/jupyter-lexical/style/index.css';
45
46
  import '@copilotkit/react-ui/styles.css';
@@ -21,7 +21,8 @@ import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
21
21
  import { CopilotSidebar } from '@copilotkit/react-ui';
22
22
  import '@copilotkit/react-ui/styles.css';
23
23
  // Import CopilotKit components and hooks
24
- import { ActionRegistrar, useNotebookToolActions, } from '../tools/adapters/copilotkit/notebookHooks';
24
+ import { useNotebookToolActions } from '../tools/adapters/copilotkit/notebookHooks';
25
+ import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
25
26
  // Import Matplotlib notebook
26
27
  import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
27
28
  // Fixed notebook ID
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ export interface HomeExampleCardEntry {
3
+ id: string;
4
+ title: string;
5
+ description: string;
6
+ tags: string[];
7
+ }
8
+ export interface HomeExampleProps {
9
+ examples?: HomeExampleCardEntry[];
10
+ searchQuery?: string;
11
+ onSearchChange?: (value: string) => void;
12
+ onSelectExample?: (name: string) => void;
13
+ }
14
+ declare const HomeExample: React.FC<HomeExampleProps>;
15
+ export default HomeExample;
@@ -0,0 +1,77 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box } from '@datalayer/primer-addons';
3
+ import { Heading, Text, TextInput } from '@primer/react';
4
+ import { SearchIcon } from '@primer/octicons-react';
5
+ const HomeExample = ({ examples = [], searchQuery = '', onSearchChange, onSelectExample, }) => {
6
+ const sortedExamples = [...examples].sort((a, b) => a.title.localeCompare(b.title));
7
+ return (_jsx(Box, { sx: {
8
+ width: '100%',
9
+ height: '100%',
10
+ overflow: 'auto',
11
+ bg: 'canvas.default',
12
+ }, children: _jsxs(Box, { sx: {
13
+ maxWidth: '1600px',
14
+ margin: '0 auto',
15
+ p: 4,
16
+ display: 'flex',
17
+ flexDirection: 'column',
18
+ gap: 3,
19
+ }, children: [_jsxs(Box, { sx: {
20
+ display: 'flex',
21
+ justifyContent: 'space-between',
22
+ alignItems: 'center',
23
+ gap: 3,
24
+ flexWrap: 'wrap',
25
+ }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Runtimes Examples" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Browse all examples as cards and open any flow in one click." })] }), _jsx(TextInput, { autoFocus: true, value: searchQuery, onChange: event => onSearchChange?.(event.target.value), placeholder: "Search examples", leadingVisual: SearchIcon, sx: { minWidth: ['100%', '320px'] } })] }), sortedExamples.length === 0 ? (_jsx(Box, { sx: {
26
+ border: '1px dashed',
27
+ borderColor: 'border.default',
28
+ borderRadius: 3,
29
+ p: 4,
30
+ textAlign: 'center',
31
+ color: 'fg.muted',
32
+ }, children: "No examples match your search." })) : (_jsx(Box, { sx: {
33
+ display: 'grid',
34
+ gridTemplateColumns: [
35
+ '1fr',
36
+ 'repeat(2, minmax(0, 1fr))',
37
+ 'repeat(4, minmax(0, 1fr))',
38
+ ],
39
+ gap: 3,
40
+ }, children: sortedExamples.map(example => (_jsxs(Box, { as: "button", onClick: () => onSelectExample?.(example.id), sx: {
41
+ textAlign: 'left',
42
+ border: '1px solid',
43
+ borderColor: 'border.default',
44
+ borderRadius: 2,
45
+ p: 3,
46
+ bg: 'canvas.subtle',
47
+ cursor: 'pointer',
48
+ transition: 'all 120ms ease-in-out',
49
+ ':hover': {
50
+ transform: 'translateY(-2px)',
51
+ borderColor: 'accent.emphasis',
52
+ boxShadow: 'shadow.medium',
53
+ bg: 'canvas.default',
54
+ },
55
+ }, children: [_jsx(Text, { sx: { fontWeight: 600, fontSize: 2, display: 'block' }, children: example.title }), _jsx(Text, { sx: {
56
+ color: 'fg.muted',
57
+ fontSize: 1,
58
+ display: 'block',
59
+ mt: 1,
60
+ }, children: example.description }), _jsx(Text, { sx: {
61
+ color: 'fg.muted',
62
+ fontSize: 0,
63
+ display: 'block',
64
+ mt: 2,
65
+ fontFamily: 'mono',
66
+ }, children: example.id }), example.tags.length > 0 && (_jsx(Box, { sx: { mt: 2, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: example.tags.map(tag => (_jsx(Box, { sx: {
67
+ fontSize: 0,
68
+ px: 2,
69
+ py: '2px',
70
+ borderRadius: 999,
71
+ bg: 'canvas.inset',
72
+ color: 'fg.muted',
73
+ border: '1px solid',
74
+ borderColor: 'border.muted',
75
+ }, children: tag }, `${example.id}-${tag}`))) }))] }, example.id))) }))] }) }));
76
+ };
77
+ export default HomeExample;
@@ -40,11 +40,13 @@ import { useJupyter } from '@datalayer/jupyter-react';
40
40
  import { ThemedJupyterProvider } from './utils/themedProvider';
41
41
  import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
42
42
  import { ChatFloating } from '../chat';
43
- import { useLexicalToolActions, ActionRegistrar, } from '../tools/adapters/copilotkit/lexicalHooks';
43
+ import { useLexicalToolActions } from '../tools/adapters/copilotkit/lexicalHooks';
44
+ import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
44
45
  import { editorConfig } from './lexical/editorConfig';
45
46
  import { useFrontendTool } from '../hooks';
46
47
  import { useChatStore } from '../stores';
47
48
  import { DatalayerInferenceProvider } from '../inference';
49
+ import { AIModels } from '../specs/models';
48
50
  import '@datalayer/jupyter-lexical/style/index.css';
49
51
  import './lexical/lexical-theme.css';
50
52
  // Fixed lexical document ID
@@ -156,7 +158,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
156
158
  apiBaseUrl: import.meta.env.VITE_DATALAYER_API_URL ||
157
159
  'https://oss.datalayer.run/api',
158
160
  apiKey: import.meta.env.VITE_DATALAYER_API_KEY,
159
- defaultModel: 'claude-sonnet-4-20250514',
161
+ defaultModel: AIModels.BEDROCK_US_ANTHROPIC_CLAUDE_3_5_HAIKU_20241022_V1_0,
160
162
  enableStreaming: true,
161
163
  requireToolApproval: false,
162
164
  debug: import.meta.env.DEV,
@@ -8,7 +8,7 @@
8
8
  * 1. Start the agent-runtimes server: `npm run start:server`
9
9
  * 2. Start the frontend: `npm run dev`
10
10
  *
11
- * @module examples/AgentRuntimeLexicalExample
11
+ * @module examples/LexicalAgentExample
12
12
  */
13
13
  import '@datalayer/jupyter-react/lib/css/PrismCss';
14
14
  import type { ServiceManager } from '@jupyterlab/services';
@@ -17,9 +17,9 @@ import './lexical/lexical-theme.css';
17
17
  /**
18
18
  * Main Agent Runtime lexical example component
19
19
  */
20
- interface AgentRuntimeLexicalExampleProps {
20
+ interface AgentRuntimeLexicalAgentExampleProps {
21
21
  content?: string;
22
22
  serviceManager?: ServiceManager.IManager;
23
23
  }
24
- declare function AgentRuntimeLexicalExample({ content, serviceManager, }: AgentRuntimeLexicalExampleProps): JSX.Element;
25
- export default AgentRuntimeLexicalExample;
24
+ declare function AgentRuntimeLexicalAgentExample({ content, serviceManager, }: AgentRuntimeLexicalAgentExampleProps): JSX.Element;
25
+ export default AgentRuntimeLexicalAgentExample;
@@ -13,10 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
13
13
  * 1. Start the agent-runtimes server: `npm run start:server`
14
14
  * 2. Start the frontend: `npm run dev`
15
15
  *
16
- * @module examples/AgentRuntimeLexicalExample
16
+ * @module examples/LexicalAgentExample
17
17
  */
18
18
  import '@datalayer/jupyter-react/lib/css/PrismCss';
19
- import React, { useCallback, useEffect, useRef, useState } from 'react';
19
+ import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
20
20
  import { $getRoot, $createParagraphNode } from 'lexical';
21
21
  import { LexicalComposer } from '@lexical/react/LexicalComposer';
22
22
  import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
@@ -52,17 +52,43 @@ const BASE_URL = 'http://localhost:8765';
52
52
  const AGENT_ID = 'lexical-agent-runtime-example';
53
53
  // Vercel AI endpoint for lexical operations
54
54
  const VERCEL_AI_ENDPOINT = `${BASE_URL}/api/v1/vercel-ai/${AGENT_ID}`;
55
+ function getJupyterSandboxUrl(serviceManager) {
56
+ const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
57
+ if (envUrl) {
58
+ return envUrl;
59
+ }
60
+ const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
61
+ if (!baseUrl) {
62
+ return undefined;
63
+ }
64
+ if (baseUrl.includes('token=')) {
65
+ return baseUrl;
66
+ }
67
+ const token = serviceManager?.serverSettings?.token;
68
+ if (!token) {
69
+ return baseUrl;
70
+ }
71
+ const separator = baseUrl.includes('?') ? '&' : '?';
72
+ return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
73
+ }
55
74
  /**
56
75
  * Hook to ensure the demo-agent exists on the server.
57
76
  * Creates it if it doesn't exist.
58
77
  */
59
- function useEnsureAgent(agentId, baseUrl) {
78
+ function useEnsureAgent(agentId, baseUrl, jupyterSandboxUrl) {
60
79
  const [isReady, setIsReady] = useState(false);
61
80
  const [error, setError] = useState(null);
62
81
  useEffect(() => {
63
82
  let mounted = true;
64
83
  async function ensureAgent() {
65
84
  try {
85
+ if (!jupyterSandboxUrl) {
86
+ if (mounted) {
87
+ setError('Could not detect Jupyter server URL from Lexical service manager.');
88
+ setIsReady(false);
89
+ }
90
+ return;
91
+ }
66
92
  // Try to create the agent (will fail if already exists, which is fine)
67
93
  const response = await fetch(`${baseUrl}/api/v1/agents`, {
68
94
  method: 'POST',
@@ -76,28 +102,50 @@ function useEnsureAgent(agentId, baseUrl) {
76
102
  transport: 'vercel-ai',
77
103
  model: DEFAULT_MODEL,
78
104
  system_prompt: 'You are a helpful AI assistant that helps users work with documents. You can help with writing, editing, and formatting content.',
105
+ enable_codemode: false,
106
+ sandbox_variant: 'jupyter',
107
+ jupyter_sandbox: jupyterSandboxUrl,
79
108
  }),
80
109
  });
81
110
  if (mounted) {
82
111
  if (response.ok) {
83
- console.log(`[AgentRuntimeLexicalExample] Created agent: ${agentId}`);
84
- setIsReady(true);
85
- }
86
- else if (response.status === 400) {
87
- // Agent already exists, which is fine
88
- console.log(`[AgentRuntimeLexicalExample] Agent already exists: ${agentId}`);
112
+ console.log(`[AgentRuntimeLexicalAgentExample] Created agent: ${agentId}`);
113
+ setError(null);
89
114
  setIsReady(true);
90
115
  }
91
116
  else {
92
- const errorData = await response.json().catch(() => ({}));
93
- setError(errorData.detail || `Failed to create agent: ${response.status}`);
117
+ const rawBody = await response.text().catch(() => '');
118
+ let detail = rawBody;
119
+ try {
120
+ const parsed = rawBody ? JSON.parse(rawBody) : {};
121
+ if (typeof parsed.detail === 'string' &&
122
+ parsed.detail.length > 0) {
123
+ detail = parsed.detail;
124
+ }
125
+ }
126
+ catch {
127
+ // Keep raw body as fallback detail.
128
+ }
129
+ const alreadyExists = response.status === 409 ||
130
+ response.status === 400 ||
131
+ /already exists/i.test(detail || '');
132
+ if (alreadyExists) {
133
+ console.log(`[AgentRuntimeLexicalAgentExample] Reusing existing agent: ${agentId}`);
134
+ setError(null);
135
+ setIsReady(true);
136
+ }
137
+ else {
138
+ setError(detail || `Failed to create agent: ${response.status}`);
139
+ setIsReady(false);
140
+ }
94
141
  }
95
142
  }
96
143
  }
97
144
  catch (err) {
98
145
  if (mounted) {
99
- console.error('[AgentRuntimeLexicalExample] Error creating agent:', err);
146
+ console.error('[AgentRuntimeLexicalAgentExample] Error creating agent:', err);
100
147
  setError(err instanceof Error ? err.message : 'Failed to connect to server');
148
+ setIsReady(false);
101
149
  }
102
150
  }
103
151
  }
@@ -105,7 +153,7 @@ function useEnsureAgent(agentId, baseUrl) {
105
153
  return () => {
106
154
  mounted = false;
107
155
  };
108
- }, [agentId, baseUrl]);
156
+ }, [agentId, baseUrl, jupyterSandboxUrl]);
109
157
  return { isReady, error };
110
158
  }
111
159
  // import contentLexical from './lexicals/vscode.lexical';
@@ -217,8 +265,9 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
217
265
  }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
218
266
  });
219
267
  function LexicalWithChat({ content, serviceManager, }) {
268
+ const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
220
269
  // Ensure the agent exists before rendering chat
221
- const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL);
270
+ const { isReady, error } = useEnsureAgent(AGENT_ID, BASE_URL, jupyterSandboxUrl);
222
271
  // State to hold tools - populated by LexicalToolsPlugin inside the context
223
272
  const [tools, setTools] = useState([]);
224
273
  // Stable callback for receiving tools from LexicalToolsPlugin
@@ -263,7 +312,7 @@ function LexicalWithChat({ content, serviceManager, }) {
263
312
  },
264
313
  ] }))] }));
265
314
  }
266
- function AgentRuntimeLexicalExample({ content, serviceManager, }) {
315
+ function AgentRuntimeLexicalAgentExample({ content, serviceManager, }) {
267
316
  return _jsx(LexicalWithChat, { content: content, serviceManager: serviceManager });
268
317
  }
269
- export default AgentRuntimeLexicalExample;
318
+ export default AgentRuntimeLexicalAgentExample;
@@ -10,7 +10,7 @@
10
10
  * To run this example, create a .env file with:
11
11
  * - VITE_DATALAYER_API_KEY: Get from https://datalayer.app/settings/iam/tokens
12
12
  *
13
- * @module examples/ChatLexicalExample
13
+ * @module examples/LexicalAgentSidebarExample
14
14
  */
15
15
  import '@datalayer/jupyter-react/lib/css/PrismCss';
16
16
  import type { ServiceManager } from '@jupyterlab/services';
@@ -19,12 +19,12 @@ import './lexical/lexical-theme.css';
19
19
  /**
20
20
  * Agent Runtime Lexical Sidebar Example with Simple integration
21
21
  */
22
- interface ChatLexicalExampleProps {
22
+ interface ChatLexicalAgentExampleProps {
23
23
  serviceManager?: ServiceManager.IManager;
24
24
  }
25
- export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react/jsx-runtime").JSX.Element;
25
+ export declare function ChatLexicalAgentExampleInner({ serviceManager, }: ChatLexicalAgentExampleProps): import("react/jsx-runtime").JSX.Element;
26
26
  /**
27
27
  * Main example component with Simple wrapper
28
28
  */
29
- export declare function AgentRuntimeLexicalSidebarExample(): import("react/jsx-runtime").JSX.Element;
30
- export default AgentRuntimeLexicalSidebarExample;
29
+ export declare function AgentRuntimeLexicalAgentSidebarExample(): import("react/jsx-runtime").JSX.Element;
30
+ export default AgentRuntimeLexicalAgentSidebarExample;