@datalayer/agent-runtimes 0.0.2

package/lib/examples/AgUiSharedStateExample.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AgUiSharedStateExample
+ *
+ * Demonstrates bidirectional state synchronization between the frontend
+ * and the AI agent using AG-UI. This example shows a recipe builder where
+ * both the user and the AI can modify the shared state.
+ *
+ * Backend: /api/v1/examples/shared_state/
+ */
+import React from 'react';
+/**
+ * AgUiSharedStateExample Component
+ *
+ * Demonstrates bidirectional shared state with AG-UI.
+ * Both the frontend and the AI agent can modify the recipe state,
+ * with changes synchronized via STATE_SNAPSHOT events.
+ *
+ * Features demonstrated:
+ * - Bidirectional state synchronization
+ * - StateDeps for passing state to agent
+ * - STATE_SNAPSHOT for receiving state from agent
+ * - Editable UI that updates shared state
+ */
+declare const AgUiSharedStateExample: React.FC;
+export default AgUiSharedStateExample;

package/lib/examples/AgUiSharedStateExample.js

@@ -0,0 +1,181 @@
+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.
+ */
+/**
+ * AgUiSharedStateExample
+ *
+ * Demonstrates bidirectional state synchronization between the frontend
+ * and the AI agent using AG-UI. This example shows a recipe builder where
+ * both the user and the AI can modify the shared state.
+ *
+ * Backend: /api/v1/examples/shared_state/
+ */
+import { useState, useCallback } from 'react';
+import { Text, Button, TextInput, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/chat';
+import { PlusIcon, XIcon, BeakerIcon, ClockIcon, PersonIcon, } from '@primer/octicons-react';
+// AG-UI endpoint for shared state example
+const SHARED_STATE_ENDPOINT = 'http://localhost:8765/api/v1/examples/shared_state/';
+const DEFAULT_RECIPE = {
+    title: '',
+    description: '',
+    ingredients: [],
+    instructions: [],
+    servings: 4,
+    prepTime: '',
+    cookTime: '',
+};
+/**
+ * IngredientsList Component
+ * Editable list of ingredients
+ */
+const IngredientsList = ({ ingredients, onAdd, onRemove }) => {
+    const [newIngredient, setNewIngredient] = useState('');
+    const handleAdd = () => {
+        if (newIngredient.trim()) {
+            onAdd(newIngredient.trim());
+            setNewIngredient('');
+        }
+    };
+    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Ingredients" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, marginBottom: 2 }, children: [_jsx(TextInput, { value: newIngredient, onChange: e => setNewIngredient(e.target.value), placeholder: "Add an ingredient...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), ingredients.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No ingredients yet" })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', padding: 0, margin: 0 }, children: ingredients.map((ingredient, index) => (_jsxs(Box, { as: "li", sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        padding: 1,
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                        '&:last-child': { borderBottom: 'none' },
+                    }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: ingredient }), _jsx(Button, { variant: "invisible", size: "small", onClick: () => onRemove(index), "aria-label": "Remove", children: _jsx(XIcon, { size: 12 }) })] }, index))) }))] }));
+};
+/**
+ * InstructionsList Component
+ * Editable list of cooking instructions
+ */
+const InstructionsList = ({ instructions, onAdd, onRemove }) => {
+    const [newInstruction, setNewInstruction] = useState('');
+    const handleAdd = () => {
+        if (newInstruction.trim()) {
+            onAdd(newInstruction.trim());
+            setNewInstruction('');
+        }
+    };
+    return (_jsxs(Box, { children: [_jsx(Text, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', marginBottom: 2 }, children: "Instructions" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, marginBottom: 2 }, children: [_jsx(TextInput, { value: newInstruction, onChange: e => setNewInstruction(e.target.value), placeholder: "Add an instruction...", onKeyDown: e => e.key === 'Enter' && handleAdd(), sx: { flex: 1 } }), _jsx(Button, { onClick: handleAdd, leadingVisual: PlusIcon, size: "small", children: "Add" })] }), instructions.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: "No instructions yet" })) : (_jsx(Box, { as: "ol", sx: { paddingLeft: 3, margin: 0 }, children: instructions.map((instruction, index) => (_jsxs(Box, { as: "li", sx: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'flex-start',
+                        marginBottom: 2,
+                    }, children: [_jsx(Text, { sx: { fontSize: 1, flex: 1 }, children: instruction }), _jsx(Button, { variant: "invisible", size: "small", onClick: () => onRemove(index), "aria-label": "Remove", children: _jsx(XIcon, { size: 12 }) })] }, index))) }))] }));
+};
+/**
+ * RecipeDisplay Component
+ * Main recipe editor/display
+ */
+const RecipeDisplay = ({ recipe, onUpdate }) => {
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { children: [_jsx(TextInput, { value: recipe.title, onChange: e => onUpdate({ title: e.target.value }), placeholder: "Recipe title...", sx: {
+                            fontSize: 2,
+                            fontWeight: 'bold',
+                            marginBottom: 2,
+                            width: '100%',
+                        } }), _jsx(TextInput, { as: "textarea", value: recipe.description, onChange: e => onUpdate({ description: e.target.value }), placeholder: "Recipe description...", sx: { width: '100%', minHeight: '60px', resize: 'vertical' } })] }), _jsxs(Box, { sx: { display: 'flex', gap: 4, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PersonIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Servings:" }), _jsx(TextInput, { type: "number", value: recipe.servings, onChange: e => onUpdate({ servings: parseInt(e.target.value) || 0 }), sx: { width: '60px' }, min: 1 })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Prep:" }), _jsx(TextInput, { value: recipe.prepTime, onChange: e => onUpdate({ prepTime: e.target.value }), placeholder: "30 min", sx: { width: '80px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(BeakerIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Cook:" }), _jsx(TextInput, { value: recipe.cookTime, onChange: e => onUpdate({ cookTime: e.target.value }), placeholder: "1 hour", sx: { width: '80px' } })] })] }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: ['1fr', '1fr 1fr'],
+                    gap: 4,
+                }, children: [_jsx(IngredientsList, { ingredients: recipe.ingredients, onAdd: ingredient => onUpdate({ ingredients: [...recipe.ingredients, ingredient] }), onRemove: index => onUpdate({
+                            ingredients: recipe.ingredients.filter((_, i) => i !== index),
+                        }) }), _jsx(InstructionsList, { instructions: recipe.instructions, onAdd: instruction => onUpdate({ instructions: [...recipe.instructions, instruction] }), onRemove: index => onUpdate({
+                            instructions: recipe.instructions.filter((_, i) => i !== index),
+                        }) })] })] }));
+};
+/**
+ * AgUiSharedStateExample Component
+ *
+ * Demonstrates bidirectional shared state with AG-UI.
+ * Both the frontend and the AI agent can modify the recipe state,
+ * with changes synchronized via STATE_SNAPSHOT events.
+ *
+ * Features demonstrated:
+ * - Bidirectional state synchronization
+ * - StateDeps for passing state to agent
+ * - STATE_SNAPSHOT for receiving state from agent
+ * - Editable UI that updates shared state
+ */
+const AgUiSharedStateExample = () => {
+    const [recipe, setRecipe] = useState(DEFAULT_RECIPE);
+    // Handle state updates from AG-UI
+    const handleStateUpdate = useCallback((state) => {
+        const s = state;
+        if (s) {
+            setRecipe(prev => ({
+                ...prev,
+                ...s,
+                ingredients: s.ingredients || prev.ingredients,
+                instructions: s.instructions || prev.instructions,
+            }));
+        }
+    }, []);
+    // Handle local updates
+    const handleLocalUpdate = useCallback((updates) => {
+        setRecipe(prev => ({ ...prev, ...updates }));
+    }, []);
+    // Clear recipe
+    const handleClear = useCallback(() => {
+        setRecipe(DEFAULT_RECIPE);
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '900px',
+                        margin: '0 auto',
+                    }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'flex-start',
+                                marginBottom: 4,
+                            }, children: [_jsxs(Box, { children: [_jsx(Text, { as: "h1", sx: {
+                                                fontSize: 4,
+                                                fontWeight: 'bold',
+                                                marginBottom: 2,
+                                            }, children: "AG-UI: Shared State Example" }), _jsx(Text, { as: "p", sx: {
+                                                fontSize: 2,
+                                                color: 'fg.muted',
+                                            }, children: "Build a recipe together with AI. Both you and the agent can edit the recipe." })] }), _jsx(Button, { variant: "danger", onClick: handleClear, children: "Clear Recipe" })] }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                marginBottom: 4,
+                            }, children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center',
+                                        marginBottom: 3,
+                                    }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold' }, children: "Recipe Builder" }), _jsx(Label, { variant: "accent", children: "Shared State" })] }), _jsx(RecipeDisplay, { recipe: recipe, onUpdate: handleLocalUpdate })] }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This demonstrates bidirectional shared state with AG-UI. The recipe state is shared between the frontend and the AI agent. When you make changes, they're available to the agent. When the agent updates the recipe (via", _jsx("code", { children: "display_recipe" }), " tool), it emits STATE_SNAPSHOT events that update the frontend."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "Try these prompts:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                marginTop: 1,
+                                                fontSize: 1,
+                                                color: 'fg.muted',
+                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: "#be185d", onStateUpdate: handleStateUpdate, suggestions: [
+                        {
+                            title: 'Pasta recipe',
+                            message: 'Help me create a simple pasta recipe.',
+                        },
+                        {
+                            title: 'Add ingredient',
+                            message: 'Add tomatoes to the recipe.',
+                        },
+                    ] })] }) }));
+};
+export default AgUiSharedStateExample;

package/lib/examples/AgUiToolsBasedGenUIExample.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AgUiToolsBasedGenUIExample
+ *
+ * Demonstrates tool-based generative UI where the backend calls tools
+ * that render UI components. Unlike frontend tools, these are backend
+ * tools that return structured data to be rendered on the frontend.
+ *
+ * Backend: /api/v1/examples/agentic_generative_ui/
+ */
+import React from 'react';
+/**
+ * AgUiToolsBasedGenUIExample Component
+ *
+ * Demonstrates tool-based generative UI with AG-UI.
+ * The agent uses tools (create_plan, update_plan_step) that emit
+ * STATE_SNAPSHOT and STATE_DELTA events to update the UI.
+ *
+ * Features demonstrated:
+ * - STATE_SNAPSHOT events for full state updates
+ * - STATE_DELTA events with JSON Patch for incremental updates
+ * - Real-time UI updates as agent works
+ * - Interactive step selection with Confirm/Reject buttons
+ */
+declare const AgUiToolsBasedGenUIExample: React.FC;
+export default AgUiToolsBasedGenUIExample;

package/lib/examples/AgUiToolsBasedGenUIExample.js

@@ -0,0 +1,257 @@
+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.
+ */
+/**
+ * AgUiToolsBasedGenUIExample
+ *
+ * Demonstrates tool-based generative UI where the backend calls tools
+ * that render UI components. Unlike frontend tools, these are backend
+ * tools that return structured data to be rendered on the frontend.
+ *
+ * Backend: /api/v1/examples/agentic_generative_ui/
+ */
+import { useState, useCallback } from 'react';
+import { Text, ProgressBar, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { ChatFloating } from '../components/chat';
+import { CheckCircleIcon, CircleIcon, DotFillIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
+// AG-UI endpoint for agentic generative UI example
+const AGENTIC_GENERATIVE_UI_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_generative_ui/';
+/**
+ * PlanStepItem Component
+ * Renders a single plan step with status indicator and optional click handler
+ */
+const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
+    const statusIcon = {
+        pending: _jsx(CircleIcon, { size: 16 }),
+        in_progress: _jsx(DotFillIcon, { size: 16 }),
+        completed: _jsx(CheckCircleIcon, { size: 16 }),
+    };
+    const statusColor = {
+        pending: 'fg.muted',
+        in_progress: 'attention.fg',
+        completed: 'success.fg',
+    };
+    const isEnabled = step.enabled !== false;
+    return (_jsxs(Box, { as: isInteractive ? 'button' : 'div', onClick: isInteractive ? onClick : undefined, sx: {
+            display: 'flex',
+            gap: 2,
+            padding: 3,
+            borderRadius: 2,
+            backgroundColor: step.status === 'in_progress'
+                ? 'attention.subtle'
+                : step.status === 'completed'
+                    ? 'success.subtle'
+                    : isEnabled
+                        ? 'canvas.subtle'
+                        : 'canvas.default',
+            border: '1px solid',
+            borderColor: step.status === 'in_progress'
+                ? 'attention.muted'
+                : step.status === 'completed'
+                    ? 'success.muted'
+                    : isEnabled
+                        ? 'border.default'
+                        : 'border.muted',
+            cursor: isInteractive ? 'pointer' : 'default',
+            opacity: isEnabled ? 1 : 0.6,
+            transition: 'all 0.2s ease',
+            textAlign: 'left',
+            width: '100%',
+            '&:hover': isInteractive
+                ? {
+                    backgroundColor: step.status === 'completed' ? 'success.subtle' : 'canvas.inset',
+                    borderColor: 'accent.muted',
+                }
+                : {},
+        }, children: [_jsx(Box, { sx: {
+                    color: statusColor[step.status],
+                    flexShrink: 0,
+                    marginTop: '2px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 20,
+                    height: 20,
+                }, children: isInteractive ? (_jsx(Box, { sx: {
+                        width: 18,
+                        height: 18,
+                        borderRadius: 1,
+                        border: '2px solid',
+                        borderColor: isEnabled ? 'accent.fg' : 'border.muted',
+                        backgroundColor: isEnabled ? 'accent.fg' : 'transparent',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: isEnabled && _jsx(CheckIcon, { size: 12, fill: "white" }) })) : (statusIcon[step.status]) }), _jsx(Box, { sx: { flex: 1 }, children: _jsxs(Text, { sx: {
+                        fontWeight: 'medium',
+                        fontSize: 1,
+                        textDecoration: !isEnabled ? 'line-through' : 'none',
+                        color: !isEnabled ? 'fg.muted' : 'fg.default',
+                    }, children: [index + 1, ". ", step.description] }) }), step.status !== 'pending' && (_jsx(Box, { sx: {
+                    fontSize: 0,
+                    color: step.status === 'completed' ? 'success.fg' : 'attention.fg',
+                    textTransform: 'capitalize',
+                }, children: step.status === 'in_progress' ? 'In Progress' : step.status }))] }));
+};
+/**
+ * PlanDisplay Component
+ * Renders the full plan with progress, clickable items, and Confirm/Reject buttons
+ */
+const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onReject, decision, }) => {
+    if (!plan) {
+        return (_jsxs(Box, { sx: {
+                textAlign: 'center',
+                padding: 5,
+                color: 'fg.muted',
+                border: '2px dashed',
+                borderColor: 'border.muted',
+                borderRadius: 2,
+            }, children: [_jsx(Text, { sx: { fontSize: 2, display: 'block', marginBottom: 2 }, children: "\uD83D\uDCCB No plan created yet" }), _jsx(Text, { sx: { fontSize: 1, display: 'block' }, children: "Ask the AI to create a plan for you." }), _jsx(Text, { sx: {
+                        fontSize: 0,
+                        display: 'block',
+                        marginTop: 2,
+                        fontStyle: 'italic',
+                    }, children: "Try: \"Create a plan to learn machine learning\"" })] }));
+    }
+    const enabledSteps = plan.steps.filter(s => s.enabled !== false).length;
+    const completedSteps = plan.steps.filter(s => s.status === 'completed').length;
+    const totalSteps = plan.steps.length;
+    const progress = totalSteps > 0 ? (completedSteps / totalSteps) * 100 : 0;
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { marginBottom: 4 }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            marginBottom: 2,
+                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.default' }, children: "Select Steps" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: isInteractive
+                                    ? `${enabledSteps}/${totalSteps} selected`
+                                    : `${completedSteps}/${totalSteps} completed` })] }), _jsx(ProgressBar, { progress: progress })] }), _jsx(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2,
+                    marginBottom: 4,
+                }, children: plan.steps.map((step, index) => (_jsx(PlanStepItem, { step: step, index: index, isInteractive: isInteractive && !decision, onClick: () => onStepToggle?.(index) }, index))) }), isInteractive && !decision && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    gap: 3,
+                    paddingTop: 3,
+                    borderTop: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsxs(Button, { variant: "danger", onClick: onReject, size: "large", children: [_jsx(XIcon, { size: 16 }), _jsx(Text, { sx: { marginLeft: 1 }, children: "Reject" })] }), _jsxs(Button, { variant: "primary", onClick: onConfirm, size: "large", children: [_jsx(CheckIcon, { size: 16 }), _jsxs(Text, { sx: { marginLeft: 1 }, children: ["Confirm (", enabledSteps, ")"] })] })] })), decision && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    padding: 3,
+                    backgroundColor: decision === 'confirmed' ? 'success.subtle' : 'danger.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: decision === 'confirmed' ? 'success.muted' : 'danger.muted',
+                }, children: _jsx(Text, { sx: {
+                        fontWeight: 'semibold',
+                        color: decision === 'confirmed' ? 'success.fg' : 'danger.fg',
+                    }, children: decision === 'confirmed'
+                        ? `✓ Plan confirmed with ${enabledSteps} steps`
+                        : '✗ Plan rejected' }) }))] }));
+};
+/**
+ * AgUiToolsBasedGenUIExample Component
+ *
+ * Demonstrates tool-based generative UI with AG-UI.
+ * The agent uses tools (create_plan, update_plan_step) that emit
+ * STATE_SNAPSHOT and STATE_DELTA events to update the UI.
+ *
+ * Features demonstrated:
+ * - STATE_SNAPSHOT events for full state updates
+ * - STATE_DELTA events with JSON Patch for incremental updates
+ * - Real-time UI updates as agent works
+ * - Interactive step selection with Confirm/Reject buttons
+ */
+const AgUiToolsBasedGenUIExample = () => {
+    const [plan, setPlan] = useState(null);
+    const [decision, setDecision] = useState(null);
+    // Handle state updates from AG-UI events
+    const handleStateUpdate = useCallback((state) => {
+        const s = state;
+        if (s && s.steps && Array.isArray(s.steps)) {
+            // Initialize enabled state for new steps
+            const stepsWithEnabled = s.steps.map(step => ({
+                ...step,
+                enabled: step.enabled !== undefined ? step.enabled : true,
+            }));
+            setPlan({ steps: stepsWithEnabled });
+            // Reset decision when new plan arrives
+            setDecision(null);
+        }
+    }, []);
+    // Toggle step enabled state
+    const handleStepToggle = useCallback((index) => {
+        setPlan(prev => {
+            if (!prev)
+                return prev;
+            const newSteps = [...prev.steps];
+            newSteps[index] = {
+                ...newSteps[index],
+                enabled: !newSteps[index].enabled,
+            };
+            return { steps: newSteps };
+        });
+    }, []);
+    // Confirm the plan
+    const handleConfirm = useCallback(() => {
+        setDecision('confirmed');
+        // Here you could send the confirmed steps back to the agent
+        console.log('Plan confirmed with steps:', plan?.steps.filter(s => s.enabled !== false).map(s => s.description));
+    }, [plan]);
+    // Reject the plan
+    const handleReject = useCallback(() => {
+        setDecision('rejected');
+        console.log('Plan rejected');
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                minHeight: '100vh',
+                backgroundColor: 'canvas.default',
+                padding: 4,
+            }, children: [_jsxs(Box, { sx: {
+                        maxWidth: '800px',
+                        margin: '0 auto',
+                    }, children: [_jsx(Text, { as: "h1", sx: {
+                                fontSize: 4,
+                                fontWeight: 'bold',
+                                marginBottom: 2,
+                            }, children: "AG-UI: Tool-Based Generative UI Example" }), _jsx(Text, { as: "p", sx: {
+                                fontSize: 2,
+                                color: 'fg.muted',
+                                marginBottom: 4,
+                            }, children: "Watch the AI create and update a plan in real-time using STATE_SNAPSHOT and STATE_DELTA events." }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                marginBottom: 4,
+                                minHeight: '300px',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 3 }, children: "Generated Plan" }), _jsx(PlanDisplay, { plan: plan, isInteractive: true, onStepToggle: handleStepToggle, onConfirm: handleConfirm, onReject: handleReject, decision: decision })] }), _jsxs(Box, { sx: {
+                                padding: 4,
+                                backgroundColor: 'canvas.subtle',
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: ["This example shows how AG-UI enables tool-based generative UI. The agent has two tools: ", _jsx("code", { children: "create_plan" }), " emits a STATE_SNAPSHOT with the full plan, and", ' ', _jsx("code", { children: "update_plan_step" }), " emits STATE_DELTA events with JSON Patch operations for efficient incremental updates."] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'medium' }, children: "AG-UI Events Used:" }), _jsxs(Box, { as: "ul", sx: {
+                                                paddingLeft: 3,
+                                                marginTop: 1,
+                                                fontSize: 1,
+                                                color: 'fg.muted',
+                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: "#0969da", onStateUpdate: handleStateUpdate, suggestions: [
+                        {
+                            title: 'Project plan',
+                            message: 'Create a project plan for building a mobile app.',
+                        },
+                        {
+                            title: 'Marketing strategy',
+                            message: 'Generate a marketing strategy for a new product launch.',
+                        },
+                    ] })] }) }));
+};
+export default AgUiToolsBasedGenUIExample;

package/lib/examples/AgentRuntimeCustomExample.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Agent Runtime Custom Example Component
+ *
+ * Demonstrates the unified Chat component with Simple transport
+ * and all necessary providers:
+ * - QueryClientProvider for data fetching
+ */
+declare const AgentRuntimeCustomExample: React.FC;
+export default AgentRuntimeCustomExample;

package/lib/examples/AgentRuntimeCustomExample.js

@@ -0,0 +1,68 @@
+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 { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { Chat } from '../components/chat';
+// Create a query client for React Query
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            gcTime: 1000 * 60 * 10, // 10 minutes
+            retry: 1,
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+/**
+ * Agent Runtime Custom Example Component
+ *
+ * Demonstrates the unified Chat component with Simple transport
+ * and all necessary providers:
+ * - QueryClientProvider for data fetching
+ */
+const AgentRuntimeCustomExample = () => {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100vh',
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsxs(Box, { as: "header", sx: {
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            padding: 3,
+                        }, children: [_jsx(Text, { sx: {
+                                    fontSize: 3,
+                                    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: {
+                            flex: 1,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: _jsx(Chat, { transport: "vercel-ai-jupyter", showModelSelector: true, showToolsMenu: true, height: "100%", suggestions: [
+                                {
+                                    title: '👋 Say hello',
+                                    message: 'Hello! What can you help me with today?',
+                                },
+                                {
+                                    title: '💡 Explain concepts',
+                                    message: 'Can you explain how AI agents work?',
+                                },
+                                {
+                                    title: '🔧 Help with code',
+                                    message: 'Can you help me write some Python code?',
+                                },
+                                {
+                                    title: '📊 Data analysis',
+                                    message: 'How do I analyze data with pandas?',
+                                },
+                            ] }) })] }) }) }));
+};
+export default AgentRuntimeCustomExample;

package/lib/examples/AgentRuntimeLexical2Example.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Chat Lexical Example - Floating popup chat with Lexical editor.
+ *
+ * This example demonstrates using the chat popup component with:
+ * - Floating popup window that appears in a corner
+ * - Lexical editor integration
+ * - Frontend tool execution
+ * - Escape to close, click outside to close
+ * - Keyboard shortcuts
+ *
+ * To run this example, create a .env file with:
+ * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ *
+ * @module examples/ChatLexicalExample
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import type { ServiceManager } from '@jupyterlab/services';
+import '@datalayer/jupyter-lexical/style/index.css';
+import './lexical/lexical-theme.css';
+/**
+ * Chat Lexical Example with Simple integration
+ */
+interface ChatLexicalExampleProps {
+    serviceManager?: ServiceManager.IManager;
+}
+export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main example component with Simple wrapper
+ */
+export declare function AgentRuntimePopupLexicalExample(): import("react/jsx-runtime").JSX.Element;
+export default AgentRuntimePopupLexicalExample;