@datalayer/agent-runtimes 1.0.29 → 1.3.10

package/lib/examples/AgentGuardrailsExample.js

@@ -15,9 +15,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   `approval: manual`, a banner appears with Approve / Reject buttons
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
+import { Text, Button, Heading, Label, Flash, ProgressBar, } from '@primer/react';
 import { ShieldCheckIcon, CheckIcon, XIcon, DotFillIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { buildOtelWebSocketUrl } from '@datalayer/core/lib/otel';
@@ -25,6 +25,7 @@ import { useCoreStore } from '../state/substates';
 import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
+import { waitForAgent } from './utils/waitForAgent';
 import { parseAgentStreamMessage } from '../types/stream';
 import { getAgentspecs } from '../specs/agents';
 import { subscribeOtelWs } from '../context/otelWsPool';
@@ -33,7 +34,10 @@ import { useAIAgentsWebSocket } from '../hooks';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { agentRuntimeStore } from '../stores';
+import { AgentGuardrailsPlugin } from '../loop/plugins/agent-guardrails';
+import { createChatExtrasPlugin } from '../loop/plugins/chat-extras';
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'guardrails-example-agent';
 const AGENTSPEC_ID = 'example-guardrails';
@@ -215,21 +219,39 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
     const [runBudgetUsd, setRunBudgetUsd] = useState(DEFAULT_RUN_BUDGET_USD);
     const [totalTokens, setTotalTokens] = useState(0);
     const [otelRunCostUsd, setOtelRunCostUsd] = useState(null);
+    // The chat column is the shared loop; the example's live over-budget banner
+    // reaches it through the chat-extras channel. Declared here — above the
+    // early returns below — so these hooks run in the same order every render,
+    // and the banner is recomputed from the cost state the effect depends on.
+    const { plugin: extrasPlugin, setExtras } = useMemo(() => createChatExtrasPlugin(), []);
+    const chatPlugins = useMemo(() => [AgentGuardrailsPlugin, extrasPlugin], [extrasPlugin]);
+    useEffect(() => {
+        const cost = Math.max(snapshotRunCostUsd, otelRunCostUsd ?? 0);
+        const over = runBudgetUsd != null && runBudgetUsd > 0 && cost > runBudgetUsd;
+        setExtras({
+            errorBanner: over
+                ? {
+                    variant: 'danger',
+                    message: `Run budget exceeded: $${cost.toFixed(4)} / $${(runBudgetUsd ?? 0).toFixed(2)}. Start a new run or adjust the budget before sending more messages.`,
+                }
+                : undefined,
+        });
+    }, [snapshotRunCostUsd, otelRunCostUsd, runBudgetUsd, setExtras]);
     const [otelCumulativeCostUsd, setOtelCumulativeCostUsd] = useState(null);
     const [otelSampleTimestamp, setOtelSampleTimestamp] = useState(null);
     // Tool approval queue
     const [approvals, setApprovals] = useState([]);
     const [approvalLoading, setApprovalLoading] = useState(null);
     const agentBaseUrl = useExampleAgentRuntimesUrl();
-    const otelBaseUrl = configuration?.otelInUrl ||
-        OTEL_IN_BASE_URL_ENV ||
+    const otelBaseUrl = OTEL_IN_BASE_URL_ENV ||
         configuration?.otelUrl ||
         configuration?.aiAgentsUrl ||
         OTEL_BASE_URL_ENV ||
         AI_AGENTS_URL_ENV ||
         agentBaseUrl;
-    const podName = agentId;
+    const runtimeName = agentId;
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     // Authenticated fetch helper (for sidecar endpoints)
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
@@ -241,56 +263,28 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
     }), [token]);
     useEffect(() => {
         let isCancelled = false;
+        const controller = new AbortController();
         const createLocalAgent = async () => {
             setRuntimeStatus('launching');
             setIsReady(false);
             setHookError(null);
             setIsReconnectedAgent(false);
             try {
-                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                    method: 'POST',
-                    body: JSON.stringify({
-                        name: agentName,
-                        description: 'Agent with cost budget and tool approval guardrails',
-                        agent_library: 'pydantic-ai',
-                        transport: 'vercel-ai',
-                        agent_spec_id: AGENTSPEC_ID,
-                        enable_skills: true,
-                        tools: [],
-                    }),
+                // The Loop creates the agent from the capacity plugin's blueprint as
+                // it mounts; the page only waits until the server has it, so its own
+                // sockets and reads address an agent that exists.
+                const found = await waitForAgent(agentBaseUrl, agentName, {
+                    signal: controller.signal,
                 });
-                let resolvedAgentId = agentName;
-                let isAlreadyRunning = false;
-                if (response.ok) {
-                    const data = await response.json();
-                    resolvedAgentId = data?.id || agentName;
-                }
-                else {
-                    const contentType = response.headers.get('content-type') || '';
-                    let detail = '';
-                    if (contentType.includes('application/json')) {
-                        const data = await response.json().catch(() => null);
-                        detail =
-                            (typeof data?.detail === 'string' && data.detail) ||
-                                (typeof data?.message === 'string' && data.message) ||
-                                '';
-                    }
-                    else {
-                        detail = await response.text();
-                    }
-                    if (response.status === 409 || /already exists/i.test(detail || '')) {
-                        isAlreadyRunning = true;
-                    }
-                    else {
-                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
-                    }
-                }
-                if (!isCancelled) {
-                    setAgentId(resolvedAgentId);
-                    setIsReconnectedAgent(isAlreadyRunning);
-                    setIsReady(true);
-                    setRuntimeStatus('ready');
+                if (isCancelled)
+                    return;
+                if (!found) {
+                    throw new Error(`The agent '${agentName}' did not appear on ${agentBaseUrl}.`);
                 }
+                setAgentId(agentName);
+                setIsReconnectedAgent(false);
+                setIsReady(true);
+                setRuntimeStatus('ready');
             }
             catch (error) {
                 if (!isCancelled) {
@@ -302,6 +296,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
         void createLocalAgent();
         return () => {
             isCancelled = true;
+            controller.abort();
         };
     }, [agentBaseUrl, agentName, authFetch]);
     const handleGuardrailsStreamMessage = useCallback((message) => {
@@ -385,50 +380,24 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
         return unsubscribe;
     }, [agentId, isReady, otelBaseUrl, token]);
     // ── Approve / Reject ─────────────────────────────────────────────────────
-    const handleApprove = useCallback(async (requestId) => {
-        if (!agentBaseUrl)
-            return;
+    // The banner's buttons answer the run the way the chat's own card does:
+    // the decision goes through the chat, which continues the held tool call.
+    // (The `/tool-approvals/{id}/approve` route only records a decision for
+    // the websocket approvals; a tool held by the guardrail waits on the run.)
+    const decide = useCallback((requestId, approved) => {
         setApprovalLoading(requestId);
-        try {
-            await authFetch(`${agentBaseUrl}/api/v1/tool-approvals/${requestId}/approve`, { method: 'POST' });
-            setApprovals(prev => prev.filter(a => a.id !== requestId));
-        }
-        catch {
-            /* ok */
-        }
-        finally {
-            setApprovalLoading(null);
-        }
-    }, [agentBaseUrl, authFetch]);
-    const handleReject = useCallback(async (requestId) => {
-        if (!agentBaseUrl)
-            return;
-        setApprovalLoading(requestId);
-        try {
-            await authFetch(`${agentBaseUrl}/api/v1/tool-approvals/${requestId}/reject`, {
-                method: 'POST',
-                body: JSON.stringify({ reason: 'User rejected' }),
-            });
-            setApprovals(prev => prev.filter(a => a.id !== requestId));
-        }
-        catch {
-            /* ok */
-        }
-        finally {
-            setApprovalLoading(null);
-        }
-    }, [agentBaseUrl, authFetch]);
+        const approval = approvals.find(a => a.id === requestId);
+        agentRuntimeStore.getState().requestToolDecision({
+            approvalId: requestId,
+            approved,
+            toolName: approval?.tool_name,
+        });
+        setApprovals(prev => prev.filter(a => a.id !== requestId));
+        setApprovalLoading(null);
+    }, [approvals]);
+    const handleApprove = useCallback((requestId) => decide(requestId, true), [decide]);
+    const handleReject = useCallback((requestId) => decide(requestId, false), [decide]);
     // ── Loading / Error ──────────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
-        return (_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: "Launching guardrails example agent..." })] }));
-    }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
@@ -436,12 +405,9 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
     const cumulativeCostUsd = otelCumulativeCostUsd;
     const isOverRunBudget = runBudgetUsd != null && runBudgetUsd > 0 && runCostUsd > runBudgetUsd;
     const runBudgetDisplayUsd = runBudgetUsd != null ? runBudgetUsd.toFixed(2) : '0.00';
-    const overBudgetBanner = isOverRunBudget
-        ? {
-            variant: 'danger',
-            message: `Run budget exceeded: $${runCostUsd.toFixed(4)} / $${runBudgetDisplayUsd}. Start a new run or adjust the budget before sending more messages.`,
-        }
-        : undefined;
+    // The over-budget banner now rides the chat-extras channel (wired above);
+    // its render-time copy is gone with the <Chat errorBanner> that used it.
+    void runBudgetDisplayUsd;
     const budgetForProgress = runBudgetUsd && runBudgetUsd > 0 ? runBudgetUsd : 1;
     const usagePercentRaw = (runCostUsd / budgetForProgress) * 100;
     const costPercent = Math.min(usagePercentRaw, 100);
@@ -470,7 +436,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Guardrails Demo \u2014 ", podName] })] }), _jsx(Label, { variant: wsState === 'connected' ? 'success' : 'secondary', children: wsState }), _jsxs(Box, { sx: { flex: 1, maxWidth: 300 }, children: [_jsxs(Box, { sx: {
+                }, children: [isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Guardrails Demo \u2014 ", runtimeName] })] }), _jsx(Label, { variant: wsState === 'connected' ? 'success' : 'secondary', children: wsState }), _jsxs(Box, { sx: { flex: 1, maxWidth: 300 }, children: [_jsxs(Box, { sx: {
                                     display: 'flex',
                                     justifyContent: 'space-between',
                                     fontSize: 0,
@@ -487,21 +453,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
                             ? ` (over by $${overBudgetAmountUsd.toFixed(4)}).`
                             : '.', ' ', "Start a new run or increase the run budget before continuing."] }) })), approvals.map(req => (_jsx(Flash, { variant: "warning", sx: { mx: 3, mt: 2 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { flex: 1, fontSize: 1 }, children: [_jsx("strong", { children: req.tool_name }), " requests approval", req.tool_args
                                     ? ` — ${JSON.stringify(req.tool_args).slice(0, 120)}`
-                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Guardrails Agent", brandIcon: _jsx(ShieldCheckIcon, { size: 16 }), placeholder: "Ask something that triggers tools\u2026", description: "Cost guardrail with OTEL-backed gauge and hook-aware approvals (before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls)", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, errorBanner: overBudgetBanner, disableInputPrompt: isOverRunBudget, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
-                        { title: 'Update CRM', message: 'Update the CRM records for Q3' },
-                        {
-                            title: 'Trigger before_tool_execute',
-                            message: "Call runtime_sensitive_echo with text 'hello' and reason 'audit', then explain the before_tool_execute authorization decision.",
-                        },
-                        {
-                            title: 'Trigger deny policy',
-                            message: "Call runtime_sensitive_echo with text 'danger' and reason 'delete CRM rows', then explain why policy denied it.",
-                        },
-                        {
-                            title: 'Explain deferred flow',
-                            message: 'Explain how deferred_tool_calls and manual approvals interact in this guardrails run.',
-                        },
-                    ], submitOnSuggestionClick: true }) })] }));
+                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentHooksExample.d.ts

@@ -1,3 +1,14 @@
+/**
+ * Lifecycle hooks, demonstrated as a Loop capacity plugin.
+ *
+ * The capacity lives in `@datalayer/loop-plugin-agent-hooks`: the agentspec
+ * the agent is created from, and the openers worth asking it. This file is
+ * only the mounting — a reactor application assembled from the standard
+ * chat plugins plus that one capacity — where it used to be a bespoke
+ * chat component carrying the same facts as props.
+ *
+ * @module examples/AgentHooksExample
+ */
 import React from 'react';
 declare const AgentHooksExample: React.FC;
 export default AgentHooksExample;

package/lib/examples/AgentHooksExample.js

@@ -1,81 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/**
+ * Lifecycle hooks, demonstrated as a Loop capacity plugin.
+ *
+ * The capacity lives in `@datalayer/loop-plugin-agent-hooks`: the agentspec
+ * the agent is created from, and the openers worth asking it. This file is
+ * only the mounting — a reactor application assembled from the standard
+ * chat plugins plus that one capacity — where it used to be a bespoke
+ * chat component carrying the same facts as props.
+ *
+ * @module examples/AgentHooksExample
+ */
 import { useMemo } from 'react';
-import { Text, Spinner } from '@primer/react';
-import { SyncIcon } from '@primer/octicons-react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
-import { ErrorView } from './components';
-import { Chat } from '../chat';
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { LoopEmbed } from '../loop';
+import { AgentHooksPlugin } from '../loop/plugins/agent-hooks';
 setupPrimerPortals();
-const AGENTSPEC_ID = 'example-hooks';
 const AGENT_NAME = 'hooks-example-agent';
 const AgentHooksExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
+    // Unique per mount, so two tabs do not fight over one server-side agent.
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
-    const { agentId, error, status, isReady } = useExampleAgentRuntime({
-        exampleId: 'AgentHooksExample',
-        agentName,
-        specId: AGENTSPEC_ID,
-        agentConfig: {
-            protocol: 'vercel-ai',
-            agentSpecId: AGENTSPEC_ID,
-        },
-    });
-    const isCreating = !isReady && status !== 'error';
-    if (isCreating) {
-        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: '100%',
-                    gap: 3,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENTSPEC_ID, "..."] })] }) }));
-    }
-    if (error || !agentId) {
-        return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start hooks agent", detail: error || 'No agent ID returned' }) }));
-    }
-    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, title: "Hooks Agent", brandIcon: _jsx(SyncIcon, { size: 16 }), placeholder: "Ask about lifecycle hooks...", description: "Demonstrates lifecycle hooks and pydantic-style tool hooks: before_tool_execute, after_tool_execute, on_tool_execute_error, deferred_tool_calls", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
-            {
-                title: 'Read the pre-hook marker file',
-                message: 'Use execute_code to read /tmp/agent_runtimes_pre_hook_demo.txt and show its contents.',
-            },
-            {
-                title: 'Verify hook variables',
-                message: 'Use execute_code to run this verification:\n```python\nassert isinstance(hook_name, str) and hook_name == "example-hooks:pre", f"❌ hook_name wrong: {hook_name!r}"\nassert isinstance(hook_ran_at, str) and len(hook_ran_at) > 0, f"❌ hook_ran_at wrong: {hook_ran_at!r}"\nassert isinstance(hook_env, dict) and len(hook_env) > 0, f"❌ hook_env wrong: {hook_env!r}"\nprint("✅ hook_name =", hook_name)\nprint("✅ hook_ran_at =", hook_ran_at)\nprint("✅ hook_env =", hook_env)\n```\nThrow an exception with a ❌ message if any variable is missing or has the wrong type, print ✅ lines if all pass.',
-            },
-            {
-                title: "Verify 'rich' was installed",
-                message: 'Use execute_code to import rich and print its version — the pre-hook installed it via pip.',
-            },
-            {
-                title: 'Explain the hook lifecycle',
-                message: 'What pre-hooks and post-hooks are configured for this agent, and when does each run?',
-            },
-            {
-                title: 'Trigger function + python tool hooks',
-                message: "Call runtime_sensitive_echo with text 'hello' and reason 'audit', then explain which before_tool_execute hooks ran (function and python).",
-            },
-            {
-                title: 'Trigger deny in python hook',
-                message: "Call runtime_sensitive_echo with text 'danger' and reason 'delete notebook', then explain why local Python policy denied it.",
-            },
-            {
-                title: 'Read tool approval audit log',
-                message: 'Use execute_code to show the latest entries from /tmp/agent_runtimes_tool_approvals_audit.jsonl and summarize decision and execution status.',
-            },
-            {
-                title: 'Explain deferred hook handling',
-                message: 'Explain how deferred_tool_calls works with approval-required tools and when inline resolution is used in this run.',
-            },
-        ], submitOnSuggestionClick: true }));
+    const plugins = useMemo(() => [AgentHooksPlugin], []);
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed
+            // The examples Vite server has no /api proxy; the page origin would
+            // send agent creation to port 3000 and fail loudly.
+            , { 
+                // The examples Vite server has no /api proxy; the page origin would
+                // send agent creation to port 3000 and fail loudly.
+                serverUrl: resolveExampleAgentRuntimesUrl('local'), 
+                // Hooks run server-side in the pydantic-ai loop, so the agent lives
+                // on the Local target; the control stays visible so the target is
+                // never one the reader cannot see or move off.
+                target: "local", showAgentVariants: true, agentId: agentName, 
+                // The conversation is the demonstration; no editor beside it.
+                editors: false, showHeader: true, plugins: plugins }) }) }));
 };
 export default AgentHooksExample;

package/lib/examples/AgentInferenceProviderExample.js

@@ -11,7 +11,8 @@ import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { createAgentInferencePlugin } from '../loop/plugins/agent-inference';
 import { useAIAgentsWebSocket } from '../hooks';
 const AGENTSPEC_ID = 'example-inference';
 const AGENT_NAME = 'inference-provider-example-agent';
@@ -106,28 +107,15 @@ const AgentInferenceProviderExampleInner = () => {
                 status: configureResponse.status,
                 provider: nextProvider,
             });
-            const name = uniqueAgentId(`${AGENT_NAME}-${nextProvider}`);
-            const createResponse = await authFetch(`${baseUrl}/api/v1/agents`, {
-                method: 'POST',
-                body: JSON.stringify({
-                    name,
-                    transport: 'vercel-ai',
-                    agent_spec_id: AGENTSPEC_ID,
-                    inferenceProvider: nextProvider,
-                }),
-            });
-            if (!createResponse.ok) {
-                const detail = await createResponse.text();
-                throw new Error(detail || `Failed to create agent (${createResponse.status})`);
-            }
-            const payload = (await createResponse.json());
-            const nextAgentId = payload.id || name;
+            // A new agent for the provider: the Loop creates it from the
+            // capacity plugin's blueprint, provider included, when it mounts.
+            const nextAgentId = uniqueAgentId(`${AGENT_NAME}-${nextProvider}`);
             if (requestEpoch !== requestEpochRef.current) {
                 return;
             }
             currentAgentRef.current = nextAgentId;
             setAgentId(nextAgentId);
-            appendProviderEvent('agent.created', 'Launched local agent runtime', {
+            appendProviderEvent('agent.launched', 'Agent launched by the Loop', {
                 agentId: nextAgentId,
                 agentSpecId: AGENTSPEC_ID,
                 inferenceProvider: nextProvider,
@@ -166,6 +154,7 @@ const AgentInferenceProviderExampleInner = () => {
     const onProviderChange = useCallback((next) => {
         setProvider(next);
     }, []);
+    const plugins = useMemo(() => [createAgentInferencePlugin(provider)], [provider]);
     useAIAgentsWebSocket({
         enabled: Boolean(agentId) && !isLaunching,
         baseUrl,
@@ -246,20 +235,7 @@ const AgentInferenceProviderExampleInner = () => {
                                 borderRadius: 2,
                                 overflow: 'hidden',
                                 bg: 'canvas.default',
-                            }, children: agentId && !isLaunching ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: baseUrl, agentId: agentId, authToken: token ?? undefined, title: "Agent Inference Provider Example", subtitle: `Spec: ${AGENTSPEC_ID}`, placeholder: "Ask the inference provider something...", showHeader: true, kernelIndicatorPlacement: "right", showNewChatButton: true, showClearButton: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, onMessageSent: content => {
-                                    appendProviderEvent('provider.request', `Sent message via ${provider}`, {
-                                        provider,
-                                        agentId,
-                                        content,
-                                    });
-                                }, onMessageReceived: message => {
-                                    appendProviderEvent('provider.message', 'Received stream message', message);
-                                }, suggestions: [
-                                    {
-                                        title: 'Compare providers',
-                                        message: 'Give me a short 3-point comparison between local and datalayer inference providers.',
-                                    },
-                                ], submitOnSuggestionClick: true })) : (_jsxs(Box, { sx: {
+                            }, children: agentId && !isLaunching ? (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentId)) : (_jsxs(Box, { sx: {
                                     height: '100%',
                                     display: 'flex',
                                     alignItems: 'center',

package/lib/examples/AgentLoopExample.d.ts

@@ -2,9 +2,11 @@ import { ServiceManager } from '@jupyterlab/services';
 interface AgentLoopExampleInnerProps {
     serviceManager?: ServiceManager.IManager;
 }
-export declare function AgentLoopExampleInner({ serviceManager, }: AgentLoopExampleInnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentLoopExampleInner({ serviceManager, }: AgentLoopExampleInnerProps): import("react").JSX.Element;
 /**
  * Main example component with Jupyter provider wrapper.
  */
-export declare function AgentLoopExample(): import("react/jsx-runtime").JSX.Element;
+export declare function AgentLoopExample({ serviceManager, }: {
+    serviceManager?: ServiceManager.IManager;
+}): import("react").JSX.Element;
 export default AgentLoopExample;