@datalayer/agent-runtimes 0.0.7 → 0.0.8

package/lib/examples/AgentSpaceFormExample.d.ts

@@ -1,3 +1,6 @@
+import React from 'react';
+import type { Transport } from '../components/chat';
+import { type AgentLibrary } from './components';
 /**
  * Agent Runtime Example Component
  *
@@ -10,13 +13,78 @@
  * - Real-time streaming responses
  * - Permission request handling
  * - Connection state management
+ * - **OAuth Identity** - Connect GitHub accounts to give agents access to repositories
+ * - **Token Identity** - Connect Kaggle accounts for dataset and notebook access
  *
  * Usage:
  * 1. Start the agent-runtimes server: `npm run start:acp`
  * 2. The UI will automatically connect to the ACP server
  * 3. Select your agent library and transport
  * 4. Enter the WebSocket URL and Agent ID (or use defaults)
- * 5. Click Connect and start chatting!
+ * 5. Connect your GitHub account for repository access
+ * 6. Connect your Kaggle account for dataset access
+ * 7. Click Connect and start chatting!
  */
-declare const AgentSpaceFormExample: React.FC;
+/**
+ * OAuth provider configuration
+ */
+interface OAuthProviderInput {
+    type: 'oauth';
+    clientId: string;
+    scopes?: string[];
+}
+/**
+ * Token-based provider configuration
+ */
+interface TokenProviderInput {
+    type: 'token';
+    token: string;
+    displayName?: string;
+    iconUrl?: string;
+}
+/**
+ * Unified identity provider input (OAuth or token-based)
+ */
+type IdentityProviderInput = OAuthProviderInput | TokenProviderInput;
+/**
+ * Identity providers configuration map.
+ * Supports multiple OAuth providers (github, google, etc.) and
+ * multiple token-based providers (kaggle, huggingface, etc.)
+ */
+type IdentityProvidersInput = {
+    [provider: string]: IdentityProviderInput;
+};
+type AgentSpaceFormExampleProps = {
+    initialWsUrl?: string;
+    initialBaseUrl?: string;
+    initialAgentName?: string;
+    initialAgentLibrary?: AgentLibrary;
+    initialTransport?: Transport;
+    initialModel?: string;
+    initialEnableCodemode?: boolean;
+    initialAllowDirectToolCalls?: boolean;
+    initialEnableToolReranker?: boolean;
+    initialSelectedMcpServers?: string[];
+    autoSelectMcpServers?: boolean;
+    /**
+     * Identity providers configuration.
+     * Supports both OAuth and token-based providers.
+     *
+     * @example
+     * ```tsx
+     * identityProviders={{
+     *   github: { type: 'oauth', clientId: 'xxx', scopes: ['repo'] },
+     *   google: { type: 'oauth', clientId: 'yyy' },
+     *   kaggle: { type: 'token', token: 'zzz' },
+     *   huggingface: { type: 'token', token: 'aaa', displayName: 'HuggingFace' },
+     * }}
+     * ```
+     */
+    identityProviders?: IdentityProvidersInput;
+    /** @deprecated Use identityProviders instead */
+    githubClientId?: string;
+    /** @deprecated Use identityProviders instead */
+    kaggleToken?: string;
+};
+declare const AgentSpaceFormExample: React.FC<AgentSpaceFormExampleProps>;
 export default AgentSpaceFormExample;

package/lib/examples/AgentSpaceFormExample.js

@@ -4,16 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 /// <reference types="vite/client" />
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { PageLayout, IconButton } from '@primer/react';
 import { SidebarCollapseIcon, SidebarExpandIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { Blankslate } from '@primer/react/experimental';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { datalayerTheme, DatalayerThemeProvider } from '@datalayer/core';
+import { DatalayerThemeProvider } from '@datalayer/core';
 import { Chat } from '../components/chat';
 import { useAgentsStore } from './stores/examplesStore';
+import { useIdentity } from '../identity';
 import { MockFileBrowser, MainContent, Header, FooterMetrics, AgentConfiguration, } from './components';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -31,49 +32,151 @@ const queryClient = new QueryClient({
 const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
 const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
 const DEFAULT_AGENT_ID = 'demo-agent';
-/**
- * Agent Runtime Example Component
- *
- * Demonstrates the multi-transport, multi-agent architecture of agent-runtimes.
- *
- * Features:
- * - Agent library selection (Pydantic AI, LangChain, Simple AI)
- * - Transport selection (ACP, AG-UI, A2A)
- * - Configurable WebSocket URL and Agent ID
- * - Real-time streaming responses
- * - Permission request handling
- * - Connection state management
- *
- * Usage:
- * 1. Start the agent-runtimes server: `npm run start:acp`
- * 2. The UI will automatically connect to the ACP server
- * 3. Select your agent library and transport
- * 4. Enter the WebSocket URL and Agent ID (or use defaults)
- * 5. Click Connect and start chatting!
- */
-const AgentSpaceFormExample = () => {
-    const [wsUrl, setWsUrl] = useState(DEFAULT_WS_URL);
-    const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
-    const [agentName, setAgentName] = useState(DEFAULT_AGENT_ID);
+// GitHub OAuth client ID - set via environment variable for security
+// For development, you can create a GitHub OAuth App at:
+// https://github.com/settings/developers
+const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID || 'demo-client-id';
+// Kaggle API token - set via environment variable
+// Get your token at: https://www.kaggle.com/settings/account (API section)
+// Download kaggle.json and use the "key" value
+const KAGGLE_TOKEN = import.meta.env.VITE_KAGGLE_TOKEN || '';
+const MOCK_SKILLS = [];
+// Skills are now fetched dynamically from the backend API (/api/v1/skills)
+// when Codemode is enabled. The AgentConfiguration component handles this.
+// Build default identity providers from env vars (backward compatibility)
+const DEFAULT_IDENTITY_PROVIDERS = {
+    ...(GITHUB_CLIENT_ID
+        ? {
+            github: {
+                type: 'oauth',
+                clientId: GITHUB_CLIENT_ID,
+                scopes: ['read:user', 'user:email', 'repo'],
+            },
+        }
+        : {}),
+    ...(KAGGLE_TOKEN
+        ? {
+            kaggle: {
+                type: 'token',
+                token: KAGGLE_TOKEN,
+                displayName: 'Kaggle',
+                iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
+            },
+        }
+        : {}),
+};
+const AgentSpaceFormExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'ag-ui', initialModel = 'bedrock:us.anthropic.claude-sonnet-4-5-20250929-v1:0', initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
+// Deprecated props - merged into identityProviders for backward compat
+githubClientId, kaggleToken, }) => {
+    const [wsUrl, setWsUrl] = useState(initialWsUrl);
+    const [baseUrl, setBaseUrl] = useState(initialBaseUrl);
+    const [agentName, setAgentName] = useState(initialAgentName);
     const [selectedAgentId, setSelectedAgentId] = useState('new-agent');
-    const [agentLibrary, setAgentLibrary] = useState('pydantic-ai');
-    const [transport, setTransport] = useState('ag-ui');
+    const [agentLibrary, setAgentLibrary] = useState(initialAgentLibrary);
+    const [transport, setTransport] = useState(initialTransport);
     const [extensions, setExtensions] = useState([]);
-    const [model, setModel] = useState('openai:gpt-4o-mini');
+    const [model, setModel] = useState(initialModel);
     const [isConfigured, setIsConfigured] = useState(false);
     // Agent capabilities state (moved from Header toggles)
-    const [enableSkills, setEnableSkills] = useState(false);
-    const [enableCodemode, setEnableCodemode] = useState(false);
-    const [allowDirectToolCalls, setAllowDirectToolCalls] = useState(false);
-    const [enableToolReranker, setEnableToolReranker] = useState(false);
-    const [selectedMcpServers, setSelectedMcpServers] = useState([]);
-    // Handle codemode change - clear MCP servers when enabled
+    const [selectedSkills, setSelectedSkills] = useState([]);
+    const [enableCodemode, setEnableCodemode] = useState(initialEnableCodemode);
+    const [allowDirectToolCalls, setAllowDirectToolCalls] = useState(initialAllowDirectToolCalls);
+    const [enableToolReranker, setEnableToolReranker] = useState(initialEnableToolReranker);
+    const [selectedMcpServers, setSelectedMcpServers] = useState(initialSelectedMcpServers);
+    const autoSelectRef = useRef(false);
+    const enableSkills = selectedSkills.length > 0;
+    // Merge deprecated props into identityProviders for backward compatibility
+    const mergedIdentityProviders = React.useMemo(() => {
+        const merged = { ...identityProviders };
+        // Add deprecated githubClientId if provided and not already in config
+        if (githubClientId && !merged.github) {
+            merged.github = {
+                type: 'oauth',
+                clientId: githubClientId,
+                scopes: ['read:user', 'user:email', 'repo'],
+            };
+        }
+        // Add deprecated kaggleToken if provided and not already in config
+        if (kaggleToken && !merged.kaggle) {
+            merged.kaggle = {
+                type: 'token',
+                token: kaggleToken,
+                displayName: 'Kaggle',
+                iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
+            };
+        }
+        return merged;
+    }, [identityProviders, githubClientId, kaggleToken]);
+    // Extract OAuth providers for useIdentity hook (token providers are handled separately)
+    const oauthProvidersConfig = React.useMemo(() => {
+        const providers = {};
+        for (const [provider, config] of Object.entries(mergedIdentityProviders)) {
+            if (config.type === 'oauth') {
+                providers[provider] = {
+                    clientId: config.clientId,
+                    scopes: config.scopes,
+                };
+            }
+        }
+        return Object.keys(providers).length > 0 ? providers : undefined;
+    }, [mergedIdentityProviders]);
+    // Extract token-based providers for auto-connection
+    const tokenProviders = React.useMemo(() => {
+        const providers = [];
+        for (const [provider, config] of Object.entries(mergedIdentityProviders)) {
+            if (config.type === 'token') {
+                providers.push({
+                    provider,
+                    token: config.token,
+                    displayName: config.displayName,
+                    iconUrl: config.iconUrl,
+                });
+            }
+        }
+        return providers;
+    }, [mergedIdentityProviders]);
+    // Identity state - pass OAuth providers to configure them before callback is processed
+    const { connectWithToken, isConnected: isIdentityConnected } = useIdentity({
+        providers: oauthProvidersConfig,
+        autoHandleCallback: true,
+    });
+    // Track which token providers we've attempted to connect
+    const connectedTokenProvidersRef = useRef(new Set());
+    // Auto-connect all token-based providers if available and not already connected
+    useEffect(() => {
+        for (const { provider, token, displayName, iconUrl } of tokenProviders) {
+            // Skip if we've already attempted to connect this provider
+            if (connectedTokenProvidersRef.current.has(provider)) {
+                continue;
+            }
+            // Skip if already connected
+            if (isIdentityConnected(provider)) {
+                connectedTokenProvidersRef.current.add(provider);
+                continue;
+            }
+            // Mark as attempted
+            connectedTokenProvidersRef.current.add(provider);
+            connectWithToken(provider, token, { displayName, iconUrl })
+                .then(() => {
+                console.log(`[AgentSpaceFormExample] ${provider} connected with token`);
+            })
+                .catch(err => {
+                console.error(`[AgentSpaceFormExample] Failed to connect ${provider}:`, err);
+                // Remove from attempted set so we can retry
+                connectedTokenProvidersRef.current.delete(provider);
+            });
+        }
+    }, [tokenProviders, connectWithToken, isIdentityConnected]);
+    // Handle identity connect/disconnect
+    const handleIdentityConnect = useCallback((identity) => {
+        console.log('[AgentSpaceFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
+    }, []);
+    const handleIdentityDisconnect = useCallback((provider) => {
+        console.log('[AgentSpaceFormExample] Identity disconnected:', provider);
+    }, []);
+    // Handle codemode change - keep MCP server selections to scope codemode tools
     const handleEnableCodemodeChange = (enabled) => {
         setEnableCodemode(enabled);
-        if (enabled) {
-            // Clear selected MCP servers when codemode is enabled
-            setSelectedMcpServers([]);
-        }
         if (!enabled) {
             setAllowDirectToolCalls(false);
             setEnableToolReranker(false);
@@ -102,6 +205,35 @@ const AgentSpaceFormExample = () => {
             setAgentName(currentAgent.id);
         }
     }, [currentAgent]);
+    // Auto-select MCP servers for codemode when requested
+    useEffect(() => {
+        if (!autoSelectMcpServers || autoSelectRef.current)
+            return;
+        if (!enableCodemode)
+            return;
+        if (selectedMcpServers.length > 0)
+            return;
+        if (!baseUrl)
+            return;
+        const loadServers = async () => {
+            try {
+                const response = await fetch(`${baseUrl}/api/v1/configure`);
+                if (!response.ok)
+                    return;
+                const data = await response.json();
+                const servers = data?.mcpServers || [];
+                const available = servers.filter((s) => s.isAvailable);
+                if (available.length > 0) {
+                    setSelectedMcpServers([available[0].id]);
+                    autoSelectRef.current = true;
+                }
+            }
+            catch {
+                // no-op
+            }
+        };
+        void loadServers();
+    }, [autoSelectMcpServers, enableCodemode, selectedMcpServers, baseUrl]);
     const handleAgentSelect = (agentId) => {
         setSelectedAgentId(agentId);
         setCreateError(null);
@@ -141,7 +273,8 @@ const AgentSpaceFormExample = () => {
                     enable_codemode: enableCodemode,
                     allow_direct_tool_calls: allowDirectToolCalls,
                     enable_tool_reranker: enableToolReranker,
-                    selected_mcp_servers: enableCodemode ? [] : selectedMcpServers,
+                    selected_mcp_servers: selectedMcpServers,
+                    skills: selectedSkills,
                 }),
             });
             if (!response.ok) {
@@ -174,6 +307,7 @@ const AgentSpaceFormExample = () => {
         allowDirectToolCalls,
         enableToolReranker,
         selectedMcpServers,
+        selectedSkills,
     ]);
     /**
      * Delete an agent via the API
@@ -239,7 +373,7 @@ const AgentSpaceFormExample = () => {
         }
         setIsConfigured(false);
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { theme: datalayerTheme, children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: selectedAgentId === 'new-agent' ? undefined : currentAgent?.name, agentDescription: selectedAgentId === 'new-agent'
                             ? undefined
                             : currentAgent?.description, agentStatus: currentAgent?.status, richEditor: richEditor, durable: durable, showContextTree: showContextTree, isNewAgent: selectedAgentId === 'new-agent', isConfigured: isConfigured, onSessionChange: setActiveSession, onRichEditorChange: setRichEditor, onDurableChange: setDurable, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
@@ -284,9 +418,9 @@ const AgentSpaceFormExample = () => {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         p: 2,
-                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableSkills: enableSkills, enableCodemode: enableCodemode, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, selectedMcpServers: selectedMcpServers, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableSkillsChange: setEnableSkills, onEnableCodemodeChange: handleEnableCodemodeChange, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedMcpServersChange: setSelectedMcpServers })) : (
+                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentName: agentName, model: model, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: setBaseUrl, onAgentNameChange: setAgentName, onModelChange: setModel, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
                                     /* Chat Interface */
-                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", showModelSelector: true, showToolsMenu: true, initialModel: model, initialMcpServers: selectedMcpServers, suggestions: [
+                                    _jsx(Box, { sx: { flex: 1 }, children: _jsx(Chat, { transport: currentAgent?.transport || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, agentId: currentAgent?.id || agentName, title: currentAgent?.name || agentName || 'AI Assistant', autoConnect: true, autoFocus: true, placeholder: "Type your message to the agent...", height: "calc(100vh - 250px)", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, codemodeEnabled: enableCodemode, initialModel: model, initialMcpServers: selectedMcpServers, initialSkills: selectedSkills, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, suggestions: [
                                                 {
                                                     title: '👋 Say hello',
                                                     message: 'Hello! What can you help me with today?',

package/lib/examples/CopilotKitLexicalExample.js

@@ -114,6 +114,7 @@ function SimpleKernelPluginsInner() {
 }
 const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, }) {
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const [_isLinkEditMode, setIsLinkEditMode] = useState(false);
     const onRef = (_floatingAnchorElem) => {
         if (_floatingAnchorElem !== null) {
             setFloatingAnchorElem(_floatingAnchorElem);
@@ -145,7 +146,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                         padding: 3,
                         backgroundColor: 'canvas.default',
                         minHeight: '600px',
-                    }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
+                    }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
 });
 function LexicalWithTools({ content, serviceManager, }) {
     // Get all actions for this lexical document

package/lib/examples/components/AgentConfiguration.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Agent } from '../stores/examplesStore';
 import type { Transport, Extension } from '../../components/chat';
+import type { OAuthProvider, Identity } from '../../identity';
 /**
  * MCP Server Tool type
  */
@@ -9,6 +10,11 @@ export interface MCPServerTool {
     description?: string;
     enabled: boolean;
 }
+export interface SkillOption {
+    id: string;
+    name: string;
+    description?: string;
+}
 /**
  * MCP Server configuration from backend
  */
@@ -65,11 +71,20 @@ interface AgentConfigurationProps {
     selectedAgentId: string;
     isCreatingAgent?: boolean;
     createError?: string | null;
-    enableSkills?: boolean;
     enableCodemode?: boolean;
     allowDirectToolCalls?: boolean;
     enableToolReranker?: boolean;
+    availableSkills?: SkillOption[];
+    selectedSkills?: string[];
     selectedMcpServers?: string[];
+    identityProviders?: {
+        [K in OAuthProvider]?: {
+            clientId: string;
+            scopes?: string[];
+        };
+    };
+    onIdentityConnect?: (identity: Identity) => void;
+    onIdentityDisconnect?: (provider: OAuthProvider) => void;
     onAgentLibraryChange: (library: AgentLibrary) => void;
     onTransportChange: (transport: Transport) => void;
     onExtensionsChange: (extensions: Extension[]) => void;
@@ -79,10 +94,10 @@ interface AgentConfigurationProps {
     onModelChange: (model: string) => void;
     onAgentSelect: (agentId: string) => void;
     onConnect: () => void;
-    onEnableSkillsChange?: (enabled: boolean) => void;
     onEnableCodemodeChange?: (enabled: boolean) => void;
     onAllowDirectToolCallsChange?: (enabled: boolean) => void;
     onEnableToolRerankerChange?: (enabled: boolean) => void;
+    onSelectedSkillsChange?: (skills: string[]) => void;
     onSelectedMcpServersChange?: (servers: string[]) => void;
 }
 /**