@datalayer/agent-runtimes 0.0.2

package/lib/components/vercel-ai-elements/reasoning.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { BrainIcon, ChevronDownIcon } from 'lucide-react';
+import { createContext, memo, useContext, useEffect, useState } from 'react';
+import { Streamdown } from 'streamdown';
+import { Shimmer } from './shimmer';
+const ReasoningContext = createContext(null);
+export const useReasoning = () => {
+    const context = useContext(ReasoningContext);
+    if (!context) {
+        throw new Error('Reasoning components must be used within Reasoning');
+    }
+    return context;
+};
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+export const Reasoning = memo(({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+        prop: open,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+        prop: durationProp,
+        defaultProp: undefined,
+    });
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState(null);
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+        if (isStreaming) {
+            if (startTime === null) {
+                setStartTime(Date.now());
+            }
+        }
+        else if (startTime !== null) {
+            setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+            setStartTime(null);
+        }
+    }, [isStreaming, startTime, setDuration]);
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    useEffect(() => {
+        if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+            // Add a small delay before closing to allow user to see the content
+            const timer = setTimeout(() => {
+                setIsOpen(false);
+                setHasAutoClosed(true);
+            }, AUTO_CLOSE_DELAY);
+            return () => clearTimeout(timer);
+        }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+    const handleOpenChange = (newOpen) => {
+        setIsOpen(newOpen);
+    };
+    return (_jsx(ReasoningContext.Provider, { value: { isStreaming, isOpen, setIsOpen, duration }, children: _jsx(Collapsible, { className: cn('not-prose mb-4', className), onOpenChange: handleOpenChange, open: isOpen, ...props, children: children }) }));
+});
+const defaultGetThinkingMessage = (isStreaming, duration) => {
+    if (isStreaming || duration === 0) {
+        return _jsx(Shimmer, { duration: 1, children: "Thinking..." });
+    }
+    if (duration === undefined) {
+        return _jsx("p", { children: "Thought for a few seconds" });
+    }
+    return _jsxs("p", { children: ["Thought for ", duration, " seconds"] });
+};
+export const ReasoningTrigger = memo(({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+    return (_jsx(CollapsibleTrigger, { className: cn('flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BrainIcon, { className: "size-4" }), getThinkingMessage(isStreaming, duration), _jsx(ChevronDownIcon, { className: cn('size-4 transition-transform', isOpen ? 'rotate-180' : 'rotate-0') })] })) }));
+});
+export const ReasoningContent = memo(({ className, children, ...props }) => (_jsx(CollapsibleContent, { className: cn('mt-4 text-sm', 'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props, children: _jsx(Streamdown, { ...props, children: children }) })));
+Reasoning.displayName = 'Reasoning';
+ReasoningTrigger.displayName = 'ReasoningTrigger';
+ReasoningContent.displayName = 'ReasoningContent';

package/lib/components/vercel-ai-elements/shimmer.d.ts

@@ -0,0 +1,9 @@
+import { type ElementType } from 'react';
+export type TextShimmerProps = {
+    children: string;
+    as?: ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+};
+export declare const Shimmer: import("react").MemoExoticComponent<({ children, as: Component, className, duration, spread, }: TextShimmerProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/components/vercel-ai-elements/shimmer.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { motion } from 'motion/react';
+import { memo, useMemo, } from 'react';
+const ShimmerComponent = ({ children, as: Component = 'p', className, duration = 2, spread = 2, }) => {
+    const MotionComponent = motion.create(Component);
+    const dynamicSpread = useMemo(() => (children?.length ?? 0) * spread, [children, spread]);
+    return (_jsx(MotionComponent, { animate: { backgroundPosition: '0% center' }, className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', '[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]', className), initial: { backgroundPosition: '100% center' }, style: {
+            '--spread': `${dynamicSpread}px`,
+            backgroundImage: 'var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))',
+        }, transition: {
+            repeat: Number.POSITIVE_INFINITY,
+            duration,
+            ease: 'linear',
+        }, children: children }));
+};
+export const Shimmer = memo(ShimmerComponent);

package/lib/components/vercel-ai-elements/sources.d.ts

@@ -0,0 +1,12 @@
+import { CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import type { ComponentProps } from 'react';
+export type SourcesProps = ComponentProps<'div'>;
+export declare const Sources: ({ className, ...props }: SourcesProps) => import("react/jsx-runtime").JSX.Element;
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    count: number;
+};
+export declare const SourcesTrigger: ({ className, count, children, ...props }: SourcesTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const SourcesContent: ({ className, ...props }: SourcesContentProps) => import("react/jsx-runtime").JSX.Element;
+export type SourceProps = ComponentProps<'a'>;
+export declare const Source: ({ href, title, children, ...props }: SourceProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/sources.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { BookIcon, ChevronDownIcon } from 'lucide-react';
+export const Sources = ({ className, ...props }) => (_jsx(Collapsible, { className: cn('not-prose mb-4 text-primary text-xs', className), ...props }));
+export const SourcesTrigger = ({ className, count, children, ...props }) => (_jsx(CollapsibleTrigger, { className: cn('flex items-center gap-2', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "font-medium", children: ["Used ", count, " sources"] }), _jsx(ChevronDownIcon, { className: "h-4 w-4" })] })) }));
+export const SourcesContent = ({ className, ...props }) => (_jsx(CollapsibleContent, { className: cn('mt-3 flex w-fit flex-col gap-2', 'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props }));
+export const Source = ({ href, title, children, ...props }) => (_jsx("a", { className: "flex items-center gap-2", href: href, rel: "noreferrer", target: "_blank", ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(BookIcon, { className: "h-4 w-4" }), _jsx("span", { className: "block font-medium", children: title })] })) }));

package/lib/components/vercel-ai-elements/suggestion.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { ComponentProps } from 'react';
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+export declare const Suggestions: ({ className, children, ...props }: SuggestionsProps) => import("react/jsx-runtime").JSX.Element;
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+    suggestion: string;
+    onClick?: (suggestion: string) => void;
+};
+export declare const Suggestion: ({ suggestion, onClick, className, variant, size, children, ...props }: SuggestionProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/vercel-ai-elements/suggestion.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@/components/ui/button';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+export const Suggestions = ({ className, children, ...props }) => (_jsxs(ScrollArea, { className: "w-full overflow-x-auto whitespace-nowrap", ...props, children: [_jsx("div", { className: cn('flex w-max flex-nowrap items-center gap-2', className), children: children }), _jsx(ScrollBar, { className: "hidden", orientation: "horizontal" })] }));
+export const Suggestion = ({ suggestion, onClick, className, variant = 'outline', size = 'sm', children, ...props }) => {
+    const handleClick = () => {
+        onClick?.(suggestion);
+    };
+    return (_jsx(Button, { className: cn('cursor-pointer rounded-full px-4', className), onClick: handleClick, size: size, type: "button", variant: variant, ...props, children: children || suggestion }));
+};

package/lib/components/vercel-ai-elements/tool.d.ts

@@ -0,0 +1,23 @@
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
+import type { ToolUIPart } from 'ai';
+import type { ComponentProps } from 'react';
+export type ToolProps = ComponentProps<typeof Collapsible>;
+export declare const Tool: ({ className, ...props }: ToolProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolHeaderProps = {
+    title?: string;
+    type: ToolUIPart['type'];
+    state: ToolUIPart['state'];
+    className?: string;
+};
+export declare const ToolHeader: ({ className, title, type, state, ...props }: ToolHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+export declare const ToolContent: ({ className, ...props }: ToolContentProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolInputProps = ComponentProps<'div'> & {
+    input: ToolUIPart['input'];
+};
+export declare const ToolInput: ({ className, input, ...props }: ToolInputProps) => import("react/jsx-runtime").JSX.Element;
+export type ToolOutputProps = ComponentProps<'div'> & {
+    output: ToolUIPart['output'];
+    errorText: ToolUIPart['errorText'];
+};
+export declare const ToolOutput: ({ className, output, errorText, ...props }: ToolOutputProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/vercel-ai-elements/tool.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '@/components/ui/badge';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from 'lucide-react';
+import { isValidElement } from 'react';
+import { CodeBlock } from './code-block';
+export const Tool = ({ className, ...props }) => (_jsx(Collapsible, { className: cn('not-prose mb-4 w-full rounded-md border', className), ...props }));
+const getStatusBadge = (status) => {
+    const labels = {
+        'input-streaming': 'Pending',
+        'input-available': 'Running',
+        'approval-requested': 'Awaiting Approval',
+        'approval-responded': 'Responded',
+        'output-available': 'Completed',
+        'output-error': 'Error',
+        'output-denied': 'Denied',
+    };
+    const icons = {
+        'input-streaming': _jsx(CircleIcon, { className: "size-4" }),
+        'input-available': _jsx(ClockIcon, { className: "size-4 animate-pulse" }),
+        'approval-requested': _jsx(ClockIcon, { className: "size-4 text-yellow-600" }),
+        'approval-responded': _jsx(CheckCircleIcon, { className: "size-4 text-blue-600" }),
+        'output-available': _jsx(CheckCircleIcon, { className: "size-4 text-green-600" }),
+        'output-error': _jsx(XCircleIcon, { className: "size-4 text-red-600" }),
+        'output-denied': _jsx(XCircleIcon, { className: "size-4 text-orange-600" }),
+    };
+    return (_jsxs(Badge, { className: "gap-1.5 rounded-full text-xs", variant: "secondary", children: [icons[status], labels[status]] }));
+};
+export const ToolHeader = ({ className, title, type, state, ...props }) => (_jsxs(CollapsibleTrigger, { className: cn('flex w-full items-center justify-between gap-4 p-3', className), ...props, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WrenchIcon, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "font-medium text-sm", children: title ?? type.split('-').slice(1).join('-') }), getStatusBadge(state)] }), _jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })] }));
+export const ToolContent = ({ className, ...props }) => (_jsx(CollapsibleContent, { className: cn('data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in', className), ...props }));
+export const ToolInput = ({ className, input, ...props }) => (_jsxs("div", { className: cn('space-y-2 overflow-hidden p-4', className), ...props, children: [_jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: "Parameters" }), _jsx("div", { className: "rounded-md bg-muted/50", children: _jsx(CodeBlock, { code: JSON.stringify(input, null, 2), language: "json" }) })] }));
+export const ToolOutput = ({ className, output, errorText, ...props }) => {
+    if (!(output || errorText)) {
+        return null;
+    }
+    let Output = _jsx("div", { children: output });
+    if (typeof output === 'object' && !isValidElement(output)) {
+        Output = (_jsx(CodeBlock, { code: JSON.stringify(output, null, 2), language: "json" }));
+    }
+    else if (typeof output === 'string') {
+        Output = _jsx(CodeBlock, { code: output, language: "json" });
+    }
+    return (_jsxs("div", { className: cn('space-y-2 p-4', className), ...props, children: [_jsx("h4", { className: "font-medium text-muted-foreground text-xs uppercase tracking-wide", children: errorText ? 'Error' : 'Result' }), _jsxs("div", { className: cn('overflow-x-auto rounded-md text-xs [&_table]:w-full', errorText
+                    ? 'bg-destructive/10 text-destructive'
+                    : 'bg-muted/50 text-foreground'), children: [errorText && _jsx("div", { children: errorText }), Output] })] }));
+};

package/lib/examples/A2UiRestaurantExample.d.ts

@@ -0,0 +1,25 @@
+/**
+ * A2UiRestaurantExample
+ *
+ * Demonstrates A2UI (Agent-to-UI) protocol integration with a pydantic-ai
+ * restaurant finder agent. The agent generates A2UI JSON messages that are
+ * rendered into React components.
+ *
+ * Features:
+ * - A2UI protocol message processing
+ * - Dynamic UI generation from agent responses
+ * - Restaurant search and booking interface
+ * - Dark/light theme support
+ *
+ * Backend: /api/v1/a2ui/restaurant/
+ */
+import React from 'react';
+/**
+ * A2UiRestaurantExample - Main example component
+ *
+ * Demonstrates A2UI protocol integration with pydantic-ai.
+ * The agent generates A2UI JSON messages for restaurant search,
+ * display, and booking functionality.
+ */
+declare const A2UiRestaurantExample: React.FC;
+export default A2UiRestaurantExample;

package/lib/examples/A2UiRestaurantExample.js

@@ -0,0 +1,305 @@
+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.
+ */
+/**
+ * A2UiRestaurantExample
+ *
+ * Demonstrates A2UI (Agent-to-UI) protocol integration with a pydantic-ai
+ * restaurant finder agent. The agent generates A2UI JSON messages that are
+ * rendered into React components.
+ *
+ * Features:
+ * - A2UI protocol message processing
+ * - Dynamic UI generation from agent responses
+ * - Restaurant search and booking interface
+ * - Dark/light theme support
+ *
+ * Backend: /api/v1/a2ui/restaurant/
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { Text, Spinner, TextInput, Button } from '@primer/react';
+import { A2UIProvider, A2UIRenderer, useA2UI } from '../renderers/a2ui';
+// A2UI endpoint for pydantic-ai restaurant agent
+const A2UI_RESTAURANT_ENDPOINT = 'http://localhost:8765/api/v1/a2ui/restaurant/';
+const LOADING_TEXT_LINES = [
+    'Finding the best spots for you...',
+    'Checking reviews...',
+    'Looking for open tables...',
+    'Almost there...',
+];
+/**
+ * Custom hook for A2UI restaurant client communication.
+ */
+function useA2UIRestaurantClient() {
+    const { surfaces, processMessages, clearSurfaces, sendAction } = useA2UI();
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    /**
+     * Send a message to the A2UI backend and process the response.
+     */
+    const makeRequest = useCallback(async (message) => {
+        let messages;
+        try {
+            setIsLoading(true);
+            setError(null);
+            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ query: message }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Request failed');
+            }
+            const data = (await response.json());
+            if ('error' in data) {
+                throw new Error(data.error);
+            }
+            messages = [];
+            for (const item of data) {
+                // Handle both Python SDK (with root wrapper) and JS SDK (direct) formats
+                const part = item.root || item;
+                if (part.kind === 'text')
+                    continue;
+                if (part.data) {
+                    messages.push(part.data);
+                }
+            }
+            clearSurfaces();
+            processMessages(messages);
+            return messages;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            console.error('A2UI request error:', err);
+            throw err;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [processMessages, clearSurfaces]);
+    /**
+     * Handle A2UI actions (button clicks, form submissions, etc.)
+     */
+    const handleAction = useCallback(async (action) => {
+        try {
+            setIsLoading(true);
+            setError(null);
+            const response = await fetch(A2UI_RESTAURANT_ENDPOINT, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    action: action.actionId,
+                    context: action.context,
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Action failed');
+            }
+            const data = (await response.json());
+            if ('error' in data) {
+                throw new Error(data.error);
+            }
+            const messages = [];
+            for (const item of data) {
+                const part = item.root || item;
+                if (part.kind === 'text')
+                    continue;
+                if (part.data) {
+                    messages.push(part.data);
+                }
+            }
+            clearSurfaces();
+            processMessages(messages);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            setError(errorMessage);
+            console.error('A2UI action error:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [processMessages, clearSurfaces]);
+    return {
+        surfaces,
+        isLoading,
+        error,
+        makeRequest,
+        handleAction,
+        sendAction,
+    };
+}
+/**
+ * Restaurant search interface component
+ */
+function RestaurantSearch({ onSearch, isLoading, defaultValue = 'Top 5 Chinese restaurants in New York', }) {
+    const [inputValue, setInputValue] = useState(defaultValue);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        if (inputValue.trim() && !isLoading) {
+            onSearch(inputValue.trim());
+        }
+    }, [inputValue, isLoading, onSearch]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 4,
+            padding: 4,
+            maxWidth: '600px',
+            margin: '0 auto',
+        }, children: [_jsx(Box, { sx: {
+                    width: '100%',
+                    height: '200px',
+                    borderRadius: '12px',
+                    background: 'linear-gradient(135deg, #117A65 0%, #1ABC9C 100%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginBottom: 2,
+                }, children: _jsx(Text, { sx: {
+                        fontSize: '4rem',
+                    }, children: "\uD83C\uDF7D\uFE0F" }) }), _jsx(Text, { as: "h1", sx: {
+                    fontSize: '2rem',
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    marginBottom: 2,
+                }, children: "Restaurant Finder" }), _jsx(Text, { sx: {
+                    color: 'fg.muted',
+                    textAlign: 'center',
+                    marginBottom: 3,
+                }, children: "Powered by A2UI protocol and pydantic-ai" }), _jsx("form", { onSubmit: handleSubmit, style: { width: '100%' }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: "Search for restaurants...", disabled: isLoading, sx: { flex: 1 }, block: true }), _jsx(Button, { type: "submit", disabled: isLoading || !inputValue.trim(), children: isLoading ? _jsx(Spinner, { size: "small" }) : 'Search' })] }) })] }));
+}
+/**
+ * Loading state component with animated text
+ */
+function LoadingState() {
+    const [loadingTextIndex, setLoadingTextIndex] = useState(0);
+    const loadingIntervalRef = useRef(null);
+    useEffect(() => {
+        loadingIntervalRef.current = window.setInterval(() => {
+            setLoadingTextIndex(prev => (prev + 1) % LOADING_TEXT_LINES.length);
+        }, 2000);
+        return () => {
+            if (loadingIntervalRef.current) {
+                clearInterval(loadingIntervalRef.current);
+            }
+        };
+    }, []);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '300px',
+            gap: 3,
+        }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: '1.1rem' }, children: LOADING_TEXT_LINES[loadingTextIndex] })] }));
+}
+/**
+ * Results display component with A2UI renderer
+ */
+function ResultsDisplay({ surfaces, onBack, }) {
+    return (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-start', marginBottom: 3 }, children: _jsx(Button, { variant: "invisible", onClick: onBack, children: "\u2190 New Search" }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: Array.from(surfaces.entries()).map(([surfaceId]) => (_jsx(A2UIRenderer, { surfaceId: surfaceId, className: "a2ui-surface" }, surfaceId))) })] }));
+}
+/**
+ * Error display component
+ */
+function ErrorDisplay({ error, onRetry, }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 4,
+            gap: 3,
+        }, children: [_jsxs(Text, { sx: { color: 'danger.fg', fontSize: '1.2rem' }, children: ["\u26A0\uFE0F ", error] }), _jsx(Button, { onClick: onRetry, children: "Try Again" })] }));
+}
+/**
+ * Main A2UI Restaurant content component
+ * (needs to be inside A2UIProvider to use hooks)
+ */
+function A2UIRestaurantContent() {
+    const { surfaces, isLoading, error, makeRequest } = useA2UIRestaurantClient();
+    const [hasData, setHasData] = useState(false);
+    const [lastQuery, setLastQuery] = useState('');
+    const handleSearch = useCallback(async (query) => {
+        setLastQuery(query);
+        try {
+            await makeRequest(query);
+            setHasData(true);
+        }
+        catch {
+            // Error is already set in the hook
+        }
+    }, [makeRequest]);
+    const handleBack = useCallback(() => {
+        setHasData(false);
+    }, []);
+    const handleRetry = useCallback(() => {
+        if (lastQuery) {
+            handleSearch(lastQuery);
+        }
+    }, [lastQuery, handleSearch]);
+    // Show error state
+    if (error && !isLoading) {
+        return _jsx(ErrorDisplay, { error: error, onRetry: handleRetry });
+    }
+    // Show loading state
+    if (isLoading) {
+        return _jsx(LoadingState, {});
+    }
+    // Show search or results
+    if (!hasData) {
+        return _jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading });
+    }
+    return _jsx(ResultsDisplay, { surfaces: surfaces, onBack: handleBack });
+}
+/**
+ * A2UiRestaurantExample - Main example component
+ *
+ * Demonstrates A2UI protocol integration with pydantic-ai.
+ * The agent generates A2UI JSON messages for restaurant search,
+ * display, and booking functionality.
+ */
+const A2UiRestaurantExample = () => {
+    // Handle A2UI actions globally
+    const handleAction = useCallback((action) => {
+        console.log('A2UI Action:', action);
+        // Actions are handled in the content component
+    }, []);
+    return (_jsx(DatalayerThemeProvider, { theme: datalayerTheme, colorMode: "day", children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '100vh',
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsxs(Box, { sx: {
+                            padding: 3,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.subtle',
+                        }, children: [_jsx(Text, { as: "h1", sx: {
+                                    fontSize: '1.25rem',
+                                    fontWeight: 'bold',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "pydantic-ai agent with A2UI protocol rendering" })] }), _jsx(Box, { sx: { flex: 1, padding: 3 }, children: _jsx(A2UIRestaurantContent, {}) }), _jsx(Box, { sx: {
+                            padding: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            backgroundColor: 'canvas.subtle',
+                            textAlign: 'center',
+                        }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", A2UI_RESTAURANT_ENDPOINT] }) })] }) }) }));
+};
+export default A2UiRestaurantExample;

package/lib/examples/AgUiAgenticExample.d.ts

@@ -0,0 +1,25 @@
+/**
+ * AgUiAgenticExample
+ *
+ * Demonstrates a floating chat popup that connects to the AG-UI
+ * Agentic Chat example backend. The agent has access to tools like
+ * getting the current time.
+ *
+ * This is the simplest AG-UI example showing basic chat with tool use.
+ *
+ * Backend: /api/v1/examples/agentic_chat/
+ */
+import React from 'react';
+/**
+ * AgUiAgenticExample Component
+ *
+ * Shows a floating chat button that opens a chat popup connected to
+ * the Agentic Chat AG-UI example.
+ *
+ * Features demonstrated:
+ * - Basic AG-UI SSE streaming
+ * - Tool calling (current_time tool)
+ * - Floating popup interface
+ */
+declare const AgUiAgenticExample: React.FC;
+export default AgUiAgenticExample;