@jupyterlite/ai 0.9.1 → 0.10.0

package/lib/widgets/ai-settings.d.ts

@@ -1,5 +1,6 @@
 import { IThemeManager } from '@jupyterlab/apputils';
 import { ReactWidget } from '@jupyterlab/ui-components';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { ISecretsManager } from 'jupyter-secrets-manager';
 import React from 'react';
 import { AgentManagerFactory } from '../agent';
@@ -24,6 +25,7 @@ export declare class AISettingsWidget extends ReactWidget {
     private _themeManager?;
     private _providerRegistry;
     private _secretsManager?;
+    private _trans;
 }
 /**
  * Namespace for AISettingsWidget types and interfaces
@@ -45,5 +47,9 @@ export declare namespace AISettingsWidget {
          * The token used to request the secrets manager.
          */
         token: symbol;
+        /**
+         * The application language translation bundle.
+         */
+        trans: TranslationBundle;
     }
 }

package/lib/widgets/ai-settings.js

@@ -46,9 +46,10 @@ export class AISettingsWidget extends ReactWidget {
         this._themeManager = options.themeManager;
         this._providerRegistry = options.providerRegistry;
         this._secretsManager = options.secretsManager;
+        this._trans = options.trans;
         this.id = 'jupyterlite-ai-settings';
-        this.title.label = 'AI Settings';
-        this.title.caption = 'Configure AI providers and behavior';
+        this.title.label = this._trans.__('AI Settings');
+        this.title.caption = this._trans.__('Configure AI providers and behavior');
         this.title.closable = true;
     }
     /**
@@ -56,22 +57,23 @@ export class AISettingsWidget extends ReactWidget {
      * @returns A React element containing the AI settings interface
      */
     render() {
-        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsManager: this._secretsManager }));
+        return (React.createElement(AISettingsComponent, { model: this._settingsModel, agentManagerFactory: this._agentManagerFactory, themeManager: this._themeManager, providerRegistry: this._providerRegistry, secretsManager: this._secretsManager, trans: this._trans }));
     }
     _settingsModel;
     _agentManagerFactory;
     _themeManager;
     _providerRegistry;
     _secretsManager;
+    _trans;
 }
 /**
  * The main AI settings component that provides configuration UI
  * @param props - Component props containing models and theme manager
  * @returns A React component for AI settings configuration
  */
-const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager }) => {
+const AISettingsComponent = ({ model, agentManagerFactory, themeManager, providerRegistry, secretsManager, trans }) => {
     if (!model) {
-        return React.createElement("div", null, "Settings model not available");
+        return React.createElement("div", null, trans.__('Settings model not available'));
     }
     const [config, setConfig] = useState(model.config || {});
     const [theme, setTheme] = useState(() => createJupyterLabTheme(themeManager));
@@ -358,28 +360,28 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
             } },
             React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
                 React.createElement(Settings, { color: "primary", sx: { fontSize: 24 } }),
-                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, "AI Settings")),
+                React.createElement(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600 } }, trans.__('AI Settings'))),
             React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider', mb: 2 } },
                 React.createElement(Tabs, { value: activeTab, onChange: (_, newValue) => setActiveTab(newValue) },
-                    React.createElement(Tab, { label: "Providers" }),
-                    React.createElement(Tab, { label: "Behavior" }),
-                    React.createElement(Tab, { label: "MCP Servers" }))),
+                    React.createElement(Tab, { label: trans.__('Providers') }),
+                    React.createElement(Tab, { label: trans.__('Behavior') }),
+                    React.createElement(Tab, { label: trans.__('MCP Servers') }))),
             activeTab === 0 && (React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                 config.providers.length > 0 && (React.createElement(Card, { elevation: 2 },
                     React.createElement(CardContent, null,
-                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Default Providers"),
+                        React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Default Providers')),
                         React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                             React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, "Chat Provider"),
-                                React.createElement(Select, { value: config.defaultProvider, label: "Chat Provider", onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
+                                React.createElement(InputLabel, null, trans.__('Chat Provider')),
+                                React.createElement(Select, { value: config.defaultProvider, label: trans.__('Chat Provider'), onChange: e => model.setActiveProvider(e.target.value) }, config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name))))),
                             React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSameProviderForChatAndCompleter, onChange: e => handleConfigUpdate({
                                         useSameProviderForChatAndCompleter: e.target.checked
-                                    }), color: "primary" }), label: "Use same provider for chat and completions" }),
+                                    }), color: "primary" }), label: trans.__('Use same provider for chat and completions') }),
                             !config.useSameProviderForChatAndCompleter && (React.createElement(FormControl, { fullWidth: true },
-                                React.createElement(InputLabel, null, "Completion Provider"),
-                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: "Completion Provider", className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
+                                React.createElement(InputLabel, null, trans.__('Completion Provider')),
+                                React.createElement(Select, { value: config.activeCompleterProvider || '', label: trans.__('Completion Provider'), className: "jp-ai-completion-provider-select", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
                                     React.createElement(MenuItem, { value: "" },
-                                        React.createElement("em", null, "No completion")),
+                                        React.createElement("em", null, trans.__('No completion'))),
                                     config.providers.map(provider => (React.createElement(MenuItem, { key: provider.id, value: provider.id }, provider.name)))))))))),
                 React.createElement(Card, { elevation: 2 },
                     React.createElement(CardContent, null,
@@ -390,9 +392,9 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                 mb: 2
                             } },
                             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
-                                React.createElement(Typography, { variant: "h6", component: "h2" }, "Configured Providers")),
-                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, "Add Provider")),
-                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, "No providers configured yet. Click \"Add Provider\" to get started.")) : (React.createElement(List, null, config.providers.map(provider => {
+                                React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Configured Providers'))),
+                            React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddDialog, size: "small" }, trans.__('Add Provider'))),
+                        config.providers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No providers configured yet. Click "Add Provider" to get started.'))) : (React.createElement(List, null, config.providers.map(provider => {
                             const isActive = config.defaultProvider === provider.id;
                             const isActiveCompleter = config.useSameProviderForChatAndCompleter
                                 ? isActive
@@ -418,8 +420,8 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                                 mb: 0.5
                                             } },
                                             React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, provider.name),
-                                            isActive && (React.createElement(Chip, { label: "Chat", size: "small", color: "primary", icon: React.createElement(CheckCircle, null) })),
-                                            isActiveCompleter && (React.createElement(Chip, { label: "Completion", size: "small", color: "secondary", icon: React.createElement(CheckCircle, null) }))),
+                                            isActive && (React.createElement(Chip, { label: trans.__('Chat'), size: "small", color: "primary", icon: React.createElement(CheckCircle, null) })),
+                                            isActiveCompleter && (React.createElement(Chip, { label: trans.__('Completion'), size: "small", color: "secondary", icon: React.createElement(CheckCircle, null) }))),
                                         React.createElement(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true },
                                             provider.provider,
                                             " \u2022 ",
@@ -428,67 +430,67 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                                 ` • ${provider.description}`),
                                         params &&
                                             (params.temperature !== undefined ||
-                                                params.maxTokens !== undefined ||
+                                                params.maxOutputTokens !== undefined ||
                                                 params.maxTurns !== undefined) && (React.createElement(Box, { sx: {
                                                 display: 'flex',
                                                 flexWrap: 'wrap',
                                                 gap: 1,
                                                 mt: 1
                                             } },
-                                            params.temperature !== undefined && (React.createElement(Chip, { label: `Temp: ${params.temperature}`, size: "small", variant: "outlined" })),
-                                            params.maxTokens !== undefined && (React.createElement(Chip, { label: `Tokens: ${params.maxTokens}`, size: "small", variant: "outlined" })),
-                                            params.maxTurns !== undefined && (React.createElement(Chip, { label: `Turns: ${params.maxTurns}`, size: "small", variant: "outlined" }))))),
+                                            params.temperature !== undefined && (React.createElement(Chip, { label: trans.__('Temp: %1', params.temperature), size: "small", variant: "outlined" })),
+                                            params.maxOutputTokens !== undefined && (React.createElement(Chip, { label: trans.__('Tokens: %1', params.maxOutputTokens), size: "small", variant: "outlined" })),
+                                            params.maxTurns !== undefined && (React.createElement(Chip, { label: trans.__('Turns: %1', params.maxTurns), size: "small", variant: "outlined" }))))),
                                     React.createElement(IconButton, { onClick: e => handleMenuClick(e, provider.id), size: "small" },
                                         React.createElement(MoreVert, null)))));
                         }))))),
                 secretsManager !== undefined && (React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.useSecretsManager, onChange: e => handleConfigUpdate({
                             useSecretsManager: e.target.checked
                         }), color: "primary", sx: { alignSelf: 'flex-start' } }), label: React.createElement("div", null,
-                        React.createElement("span", null, "Use the secrets manager to manage API keys"),
-                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, "The secrets are stored in plain text in settings"))) })))),
+                        React.createElement("span", null, trans.__('Use the secrets manager to manage API keys')),
+                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, trans.__('The secrets are stored in plain text in settings')))) })))),
             activeTab === 1 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, "Behavior Settings"),
+                    React.createElement(Typography, { variant: "h6", component: "h2", gutterBottom: true }, trans.__('Behavior Settings')),
                     React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.toolsEnabled, onChange: e => handleConfigUpdate({
                                     toolsEnabled: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Enable Tools"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Allow the AI to use tools like notebook operations, code execution, and file management")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Enable Tools')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Allow the AI to use tools like notebook operations, code execution, and file management'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.sendWithShiftEnter, onChange: e => handleConfigUpdate({
                                     sendWithShiftEnter: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Send with Shift+Enter"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Use Shift+Enter to send messages (Enter creates new line)")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Send with Shift+Enter')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Use Shift+Enter to send messages (Enter creates new line)'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showTokenUsage, onChange: e => handleConfigUpdate({
                                     showTokenUsage: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show Token Usage"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Display token usage information in the chat toolbar")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Token Usage')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Display token usage information in the chat toolbar'))) }),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showCellDiff, onChange: e => handleConfigUpdate({
                                     showCellDiff: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show Cell Diff"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Show diff view when AI modifies cell content")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show Cell Diff')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies cell content'))) }),
                         config.showCellDiff && (React.createElement(FormControl, { sx: { ml: 4 } },
-                            React.createElement(InputLabel, null, "Diff Display Mode"),
-                            React.createElement(Select, { value: config.diffDisplayMode, label: "Diff Display Mode", onChange: e => handleConfigUpdate({
+                            React.createElement(InputLabel, null, trans.__('Diff Display Mode')),
+                            React.createElement(Select, { value: config.diffDisplayMode, label: trans.__('Diff Display Mode'), onChange: e => handleConfigUpdate({
                                     diffDisplayMode: e.target.value
                                 }) },
-                                React.createElement(MenuItem, { value: "split" }, "Split View"),
-                                React.createElement(MenuItem, { value: "unified" }, "Unified View")))),
+                                React.createElement(MenuItem, { value: "split" }, trans.__('Split View')),
+                                React.createElement(MenuItem, { value: "unified" }, trans.__('Unified View'))))),
                         React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: config.showFileDiff, onChange: e => handleConfigUpdate({
                                     showFileDiff: e.target.checked
                                 }), color: "primary" }), label: React.createElement(Box, null,
-                                React.createElement(Typography, { variant: "body1" }, "Show File Diff"),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Show diff view when AI modifies file content")) }),
+                                React.createElement(Typography, { variant: "body1" }, trans.__('Show File Diff')),
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Show diff view when AI modifies file content'))) }),
                         React.createElement(Divider, { sx: { my: 1 } }),
-                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "System Prompt", value: systemPromptValue, onChange: e => handleSystemPromptChange(e.target.value), placeholder: "Define the AI's behavior and personality...", helperText: "Instructions that define how the AI should behave and respond" }),
-                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: "Completion System Prompt", value: completionPromptValue, onChange: e => handleCompletionPromptChange(e.target.value), placeholder: "Define how the AI should generate code completions...", helperText: "Instructions that define how the AI should generate code completions" }),
+                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('System Prompt'), value: systemPromptValue, onChange: e => handleSystemPromptChange(e.target.value), placeholder: trans.__("Define the AI's behavior and personality..."), helperText: trans.__('Instructions that define how the AI should behave and respond') }),
+                        React.createElement(TextField, { fullWidth: true, multiline: true, rows: 3, label: trans.__('Completion System Prompt'), value: completionPromptValue, onChange: e => handleCompletionPromptChange(e.target.value), placeholder: trans.__('Define how the AI should generate code completions...'), helperText: trans.__('Instructions that define how the AI should generate code completions') }),
                         React.createElement(Divider, { sx: { my: 2 } }),
                         React.createElement(Box, null,
-                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, "Commands Requiring Approval"),
-                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, "Commands that require user approval before AI can execute them"),
+                            React.createElement(Typography, { variant: "body1", gutterBottom: true }, trans.__('Commands Requiring Approval')),
+                            React.createElement(Typography, { variant: "caption", color: "text.secondary", gutterBottom: true, sx: { display: 'block' } }, trans.__('Commands that require user approval before AI can execute them')),
                             React.createElement(List, { sx: { mb: 2, maxHeight: 200, overflow: 'auto' } }, config.commandsRequiringApproval.map((command, index) => (React.createElement(ListItem, { key: index, divider: true },
                                 React.createElement(ListItemText, { primary: command }),
                                 React.createElement(ListItemSecondaryAction, null,
@@ -502,7 +504,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             });
                                         }, size: "small" },
                                         React.createElement(Delete, null))))))),
-                            React.createElement(TextField, { fullWidth: true, label: "Add New Command", placeholder: "e.g., notebook:run-cell", onKeyDown: e => {
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Add New Command'), placeholder: trans.__('e.g., notebook:run-cell'), onKeyDown: e => {
                                     if (e.key === 'Enter') {
                                         const value = e.target.value.trim();
                                         if (value &&
@@ -517,7 +519,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                             e.target.value = '';
                                         }
                                     }
-                                }, helperText: "Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code" })))))),
+                                }, helperText: trans.__('Press Enter to add a command. Common commands: notebook:run-cell, console:execute, fileeditor:run-code') })))))),
             activeTab === 2 && (React.createElement(Card, { elevation: 2 },
                 React.createElement(CardContent, null,
                     React.createElement(Box, { sx: {
@@ -528,10 +530,10 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         } },
                         React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                             React.createElement(Cable, { color: "primary" }),
-                            React.createElement(Typography, { variant: "h6", component: "h2" }, "Remote MCP Servers")),
-                        React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, "Add Server")),
-                    React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, "Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources."),
-                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, "No MCP servers configured yet. Click \"Add Server\" to connect to remote MCP services.")) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true },
+                            React.createElement(Typography, { variant: "h6", component: "h2" }, trans.__('Remote MCP Servers'))),
+                        React.createElement(Button, { variant: "contained", startIcon: React.createElement(Add, null), onClick: openAddMCPDialog, size: "small" }, trans.__('Add Server'))),
+                    React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 } }, trans.__("Configure remote Model Context Protocol (MCP) servers to extend the AI's capabilities with external tools and data sources.")),
+                    config.mcpServers.length === 0 ? (React.createElement(Alert, { severity: "info" }, trans.__('No MCP servers configured yet. Click "Add Server" to connect to remote MCP services.'))) : (React.createElement(List, null, config.mcpServers.map(server => (React.createElement(ListItem, { key: server.id, divider: true },
                         React.createElement(ListItemText, { primary: React.createElement(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
@@ -546,16 +548,13 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                         enabled: e.target.checked
                                     }), size: "small", color: "primary" })), secondary: React.createElement(Box, null,
                                 React.createElement(Typography, { variant: "body2", color: "text.secondary" }, server.url),
-                                server.enabled && agentManagerFactory && (React.createElement(Typography, { variant: "caption", color: "text.secondary" },
-                                    "Status:",
-                                    ' ',
-                                    agentManagerFactory.isMCPServerConnected(server.name)
-                                        ? 'Connected'
-                                        : 'Connection failed'))) }),
+                                server.enabled && agentManagerFactory && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Status: %1', agentManagerFactory.isMCPServerConnected(server.name)
+                                    ? trans.__('Connected')
+                                    : trans.__('Connection failed'))))) }),
                         React.createElement(ListItemSecondaryAction, null,
                             React.createElement(IconButton, { onClick: e => handleMCPMenuClick(e, server.id), size: "small" },
                                 React.createElement(MoreVert, null))))))))))),
-            React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField }),
+            React.createElement(ProviderConfigDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSave: editingProvider ? handleEditProvider : handleAddProvider, initialConfig: editingProvider, mode: editingProvider ? 'edit' : 'add', providerRegistry: providerRegistry, handleSecretField: handleSecretField, trans: trans }),
             React.createElement(Menu, { anchorEl: menuAnchor, open: Boolean(menuAnchor), onClose: handleMenuClose },
                 React.createElement(MenuItem, { onClick: () => {
                         const provider = config.providers.find(p => p.id === menuProviderId);
@@ -564,11 +563,11 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         }
                     } },
                     React.createElement(Edit, { sx: { mr: 1 } }),
-                    "Edit"),
+                    trans.__('Edit')),
                 React.createElement(MenuItem, { onClick: () => handleDeleteProvider(menuProviderId), sx: { color: 'error.main' } },
                     React.createElement(Delete, { sx: { mr: 1 } }),
-                    "Delete")),
-            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add' }),
+                    trans.__('Delete'))),
+            React.createElement(MCPServerDialog, { open: mcpDialogOpen, onClose: () => setMcpDialogOpen(false), onSave: editingMCPServer ? handleEditMCPServer : handleAddMCPServer, initialConfig: editingMCPServer, mode: editingMCPServer ? 'edit' : 'add', trans: trans }),
             React.createElement(Menu, { anchorEl: mcpMenuAnchor, open: Boolean(mcpMenuAnchor), onClose: handleMCPMenuClose },
                 React.createElement(MenuItem, { onClick: () => {
                         const server = config.mcpServers.find(s => s.id === mcpMenuServerId);
@@ -577,17 +576,17 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                         }
                     } },
                     React.createElement(Edit, { sx: { mr: 1 } }),
-                    "Edit"),
+                    trans.__('Edit')),
                 React.createElement(MenuItem, { onClick: () => handleDeleteMCPServer(mcpMenuServerId), sx: { color: 'error.main' } },
                     React.createElement(Delete, { sx: { mr: 1 } }),
-                    "Delete")))));
+                    trans.__('Delete'))))));
 };
 /**
  * Dialog component for adding/editing MCP server configurations
  * @param props - Component props for the MCP server dialog
  * @returns A React component for MCP server configuration
  */
-const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode }) => {
+const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode, trans }) => {
     const [name, setName] = useState(initialConfig?.name || '');
     const [url, setUrl] = useState(initialConfig?.url || '');
     const [enabled, setEnabled] = useState(initialConfig?.enabled ?? true);
@@ -631,15 +630,17 @@ const MCPServerDialog = ({ open, onClose, onSave, initialConfig, mode }) => {
     };
     const canSave = name.trim() && url.trim() && _isValidUrl(url.trim());
     return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true },
-        React.createElement(DialogTitle, null, mode === 'add' ? 'Add MCP Server' : 'Edit MCP Server'),
+        React.createElement(DialogTitle, null, mode === 'add'
+            ? trans.__('Add MCP Server')
+            : trans.__('Edit MCP Server')),
         React.createElement(DialogContent, null,
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
-                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: "Server Name", value: name, onChange: e => setName(e.target.value), placeholder: "My MCP Server", helperText: "A friendly name to identify this MCP server" }),
-                React.createElement(TextField, { fullWidth: true, label: "Server URL", value: url, onChange: e => setUrl(e.target.value), placeholder: "https://example.com/mcp", helperText: "The HTTP/HTTPS URL of the MCP server", error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
-                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: "Enable this server" }))),
+                React.createElement(TextField, { autoFocus: true, fullWidth: true, label: trans.__('Server Name'), value: name, onChange: e => setName(e.target.value), placeholder: trans.__('My MCP Server'), helperText: trans.__('A friendly name to identify this MCP server') }),
+                React.createElement(TextField, { fullWidth: true, label: trans.__('Server URL'), value: url, onChange: e => setUrl(e.target.value), placeholder: trans.__('https://example.com/mcp'), helperText: trans.__('The HTTP/HTTPS URL of the MCP server'), error: Boolean(url.trim() && !_isValidUrl(url.trim())) }),
+                React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: enabled, onChange: e => setEnabled(e.target.checked), color: "primary" }), label: trans.__('Enable this server') }))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onClose }, "Cancel"),
-            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? 'Add' : 'Save'))));
+            React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
+            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !canSave }, mode === 'add' ? trans.__('Add') : trans.__('Save')))));
 };
 var Private;
 (function (Private) {

package/lib/widgets/main-area-chat.d.ts

@@ -1,5 +1,6 @@
 import { ChatWidget } from '@jupyter/chat';
 import { MainAreaWidget } from '@jupyterlab/apputils';
+import type { TranslationBundle } from '@jupyterlab/translation';
 import { CommandRegistry } from '@lumino/commands';
 import { AIChatModel } from '../chat-model';
 import { AISettingsModel } from '../models/settings-model';
@@ -7,6 +8,7 @@ export declare namespace MainAreaChat {
     interface IOptions extends MainAreaWidget.IOptions<ChatWidget> {
         commands: CommandRegistry;
         settingsModel: AISettingsModel;
+        trans: TranslationBundle;
     }
 }
 /**

package/lib/widgets/main-area-chat.js

@@ -10,6 +10,7 @@ export class MainAreaChat extends MainAreaWidget {
     constructor(options) {
         super(options);
         this.title.label = this.content.model.name;
+        const { trans } = options;
         // add the move to side button.
         this.toolbar.addItem('moveToSide', new CommandToolbarButton({
             commands: options.commands,
@@ -24,12 +25,14 @@ export class MainAreaChat extends MainAreaWidget {
         const tokenUsageWidget = new TokenUsageWidget({
             tokenUsageChanged: this.model.tokenUsageChanged,
             settingsModel: options.settingsModel,
-            initialTokenUsage: this.model.agentManager.tokenUsage
+            initialTokenUsage: this.model.agentManager.tokenUsage,
+            translator: trans
         });
         this.toolbar.addItem('token-usage', tokenUsageWidget);
         // Add the approval button, tied to the chat widget.
         this._approvalButtons = new ApprovalButtons({
-            chatPanel: this.content
+            chatPanel: this.content,
+            agentManager: this.model.agentManager
         });
     }
     dispose() {

package/lib/widgets/provider-config-dialog.d.ts

@@ -1,3 +1,4 @@
+import type { TranslationBundle } from '@jupyterlab/translation';
 import React from 'react';
 import { IProviderConfig } from '../models/settings-model';
 import type { IProviderRegistry } from '../tokens';
@@ -9,6 +10,7 @@ interface IProviderConfigDialogProps {
     mode: 'add' | 'edit';
     providerRegistry: IProviderRegistry;
     handleSecretField: (input: HTMLInputElement, provider: string, fieldName: string) => Promise<void>;
+    trans: TranslationBundle;
 }
 export declare const ProviderConfigDialog: React.FC<IProviderConfigDialogProps>;
 export {};

package/lib/widgets/provider-config-dialog.js

@@ -8,7 +8,7 @@ import React from 'react';
  */
 const DEFAULT_TEMPERATURE = 0.7;
 const DEFAULT_MAX_TURNS = 25;
-export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mode, providerRegistry, handleSecretField }) => {
+export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mode, providerRegistry, handleSecretField, trans }) => {
     const apiKeyRef = React.useRef();
     const [name, setName] = React.useState(initialConfig?.name || '');
     const [provider, setProvider] = React.useState(initialConfig?.provider || 'anthropic');
@@ -88,40 +88,42 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
         model &&
         (selectedProvider?.apiKeyRequirement !== 'required' || apiKey);
     return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true },
-        React.createElement(DialogTitle, null, mode === 'add' ? 'Add New Provider' : 'Edit Provider'),
+        React.createElement(DialogTitle, null, mode === 'add'
+            ? trans.__('Add New Provider')
+            : trans.__('Edit Provider')),
         React.createElement(DialogContent, null,
             React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2, pt: 1 } },
-                React.createElement(TextField, { fullWidth: true, label: "Provider Name", value: name, onChange: e => setName(e.target.value), placeholder: "e.g., My Anthropic Config, Work Provider", helperText: "A friendly name to identify this provider configuration", required: true }),
+                React.createElement(TextField, { fullWidth: true, label: trans.__('Provider Name'), value: name, onChange: e => setName(e.target.value), placeholder: trans.__('e.g., My Anthropic Config, Work Provider'), helperText: trans.__('A friendly name to identify this provider configuration'), required: true }),
                 React.createElement(FormControl, { fullWidth: true, required: true },
-                    React.createElement(InputLabel, null, "Provider Type"),
-                    React.createElement(Select, { value: provider, label: "Provider Type", onChange: e => setProvider(e.target.value) }, providerOptions.map(option => (React.createElement(MenuItem, { key: option.value, value: option.value },
+                    React.createElement(InputLabel, null, trans.__('Provider Type')),
+                    React.createElement(Select, { value: provider, label: trans.__('Provider Type'), onChange: e => setProvider(e.target.value) }, providerOptions.map(option => (React.createElement(MenuItem, { key: option.value, value: option.value },
                         React.createElement(Box, null,
                             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                                 option.label,
-                                option.apiKeyRequirement === 'required' && (React.createElement(Chip, { size: "small", label: "API Key", color: "default", variant: "outlined" }))),
+                                option.apiKeyRequirement === 'required' && (React.createElement(Chip, { size: "small", label: trans.__('API Key'), color: "default", variant: "outlined" }))),
                             option.description && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, option.description)))))))),
-                selectedProvider?.allowCustomModel ? (React.createElement(TextField, { fullWidth: true, label: "Model", value: model, onChange: e => setModel(e.target.value), placeholder: "Enter model name", helperText: "Enter any compatible model name", required: true })) : (React.createElement(FormControl, { fullWidth: true, required: true },
-                    React.createElement(InputLabel, null, "Model"),
-                    React.createElement(Select, { value: model, label: "Model", onChange: e => setModel(e.target.value) }, selectedProvider?.models.map(modelOption => (React.createElement(MenuItem, { key: modelOption, value: modelOption },
+                selectedProvider?.allowCustomModel ? (React.createElement(TextField, { fullWidth: true, label: trans.__('Model'), value: model, onChange: e => setModel(e.target.value), placeholder: trans.__('Enter model name'), helperText: trans.__('Enter any compatible model name'), required: true })) : (React.createElement(FormControl, { fullWidth: true, required: true },
+                    React.createElement(InputLabel, null, trans.__('Model')),
+                    React.createElement(Select, { value: model, label: trans.__('Model'), onChange: e => setModel(e.target.value) }, selectedProvider?.models.map(modelOption => (React.createElement(MenuItem, { key: modelOption, value: modelOption },
                         React.createElement(Box, null,
                             React.createElement(Typography, { variant: "body1" }, modelOption),
                             React.createElement(Typography, { variant: "caption", color: "text.secondary" }, modelOption.includes('sonnet')
-                                ? 'Balanced performance'
+                                ? trans.__('Balanced performance')
                                 : modelOption.includes('opus')
-                                    ? 'Advanced reasoning'
+                                    ? trans.__('Advanced reasoning')
                                     : modelOption.includes('haiku')
-                                        ? 'Fast and lightweight'
+                                        ? trans.__('Fast and lightweight')
                                         : modelOption.includes('large')
-                                            ? 'Most capable model'
+                                            ? trans.__('Most capable model')
                                             : modelOption.includes('small')
-                                                ? 'Fast and efficient'
+                                                ? trans.__('Fast and efficient')
                                                 : modelOption.includes('codestral')
-                                                    ? 'Code-specialized'
-                                                    : 'General purpose')))))))),
+                                                    ? trans.__('Code-specialized')
+                                                    : trans.__('General purpose'))))))))),
                 selectedProvider &&
                     selectedProvider?.apiKeyRequirement !== 'none' && (React.createElement(TextField, { fullWidth: true, inputRef: apiKeyRef, label: selectedProvider?.apiKeyRequirement === 'required'
-                        ? 'API Key'
-                        : 'API Key (Optional)', type: showApiKey ? 'text' : 'password', value: apiKey, onChange: e => setApiKey(e.target.value), placeholder: "Enter your API key...", required: selectedProvider?.apiKeyRequirement === 'required', InputProps: {
+                        ? trans.__('API Key')
+                        : trans.__('API Key (Optional)'), type: showApiKey ? 'text' : 'password', value: apiKey, onChange: e => setApiKey(e.target.value), placeholder: trans.__('Enter your API key...'), required: selectedProvider?.apiKeyRequirement === 'required', InputProps: {
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
                             React.createElement(IconButton, { onClick: () => setShowApiKey(!showApiKey), edge: "end" }, showApiKey ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null))))
                     } })),
@@ -135,7 +137,7 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                             React.createElement(Box, null,
                                 React.createElement(Typography, { variant: "body2" }, option),
                                 urlOption?.description && (React.createElement(Typography, { variant: "caption", color: "text.secondary" }, urlOption.description)))));
-                    }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, label: "Base URL", placeholder: "https://api.example.com/v1", onChange: e => setBaseURL(e.target.value) })), clearOnBlur: false })),
+                    }, renderInput: params => (React.createElement(TextField, { ...params, fullWidth: true, label: trans.__('Base URL'), placeholder: "https://api.example.com/v1", onChange: e => setBaseURL(e.target.value) })), clearOnBlur: false })),
                 React.createElement(Accordion, { expanded: expandedAdvanced, onChange: (_, isExpanded) => setExpandedAdvanced(isExpanded), sx: {
                         mt: 2,
                         bgcolor: 'transparent',
@@ -145,40 +147,38 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                         borderRadius: 1
                     } },
                     React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMore, null) },
-                        React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, "Advanced Settings")),
+                        React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, trans.__('Advanced Settings'))),
                     React.createElement(AccordionDetails, { sx: { bgcolor: 'transparent' } },
                         React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
                             React.createElement(Box, null,
-                                React.createElement(Typography, { gutterBottom: true },
-                                    "Temperature: ",
-                                    parameters.temperature ?? 'Default'),
+                                React.createElement(Typography, { gutterBottom: true }, trans.__('Temperature: %1', parameters.temperature ?? trans.__('Default'))),
                                 React.createElement(Slider, { value: parameters.temperature ?? DEFAULT_TEMPERATURE, onChange: (_, value) => setParameters({
                                         ...parameters,
                                         temperature: value
                                     }), min: 0, max: 2, step: 0.1, valueLabelDisplay: "auto" }),
-                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, "Temperature for the model (lower values are more deterministic)")),
-                            React.createElement(TextField, { fullWidth: true, label: "Max Tokens (Optional)", type: "number", value: parameters.maxTokens ?? '', onChange: e => setParameters({
+                                React.createElement(Typography, { variant: "caption", color: "text.secondary" }, trans.__('Temperature for the model (lower values are more deterministic)'))),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Max Tokens (Optional)'), type: "number", value: parameters.maxOutputTokens ?? '', onChange: e => setParameters({
                                     ...parameters,
-                                    maxTokens: e.target.value
+                                    maxOutputTokens: e.target.value
                                         ? Number(e.target.value)
                                         : undefined
-                                }), placeholder: "Leave empty for provider default", helperText: "Maximum length of AI responses", inputProps: { min: 1 } }),
-                            React.createElement(TextField, { fullWidth: true, label: "Max Turns (Optional)", type: "number", value: parameters.maxTurns ?? '', onChange: e => setParameters({
+                                }), placeholder: trans.__('Leave empty for provider default'), helperText: trans.__('Maximum length of AI responses'), inputProps: { min: 1 } }),
+                            React.createElement(TextField, { fullWidth: true, label: trans.__('Max Turns (Optional)'), type: "number", value: parameters.maxTurns ?? '', onChange: e => setParameters({
                                     ...parameters,
                                     maxTurns: e.target.value
                                         ? Number(e.target.value)
                                         : undefined
-                                }), placeholder: `Default: ${DEFAULT_MAX_TURNS}`, helperText: "Maximum number of tool execution turns", inputProps: { min: 1, max: 100 } }),
-                            React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 2, mb: 1 } }, "Completion Options"),
+                                }), placeholder: trans.__('Default: %1', DEFAULT_MAX_TURNS), helperText: trans.__('Maximum number of tool execution turns'), inputProps: { min: 1, max: 100 } }),
+                            React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 2, mb: 1 } }, trans.__('Completion Options')),
                             React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: parameters.supportsFillInMiddle ?? false, onChange: e => setParameters({
                                         ...parameters,
                                         supportsFillInMiddle: e.target.checked
-                                    }) }), label: "Fill-in-the-middle support" }),
+                                    }) }), label: trans.__('Fill-in-the-middle support') }),
                             React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: parameters.useFilterText ?? false, onChange: e => setParameters({
                                         ...parameters,
                                         useFilterText: e.target.checked
-                                    }) }), label: "Use filter text" })))))),
+                                    }) }), label: trans.__('Use filter text') })))))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onClose }, "Cancel"),
-            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !isValid }, mode === 'add' ? 'Add Provider' : 'Save Changes'))));
+            React.createElement(Button, { onClick: onClose }, trans.__('Cancel')),
+            React.createElement(Button, { onClick: handleSave, variant: "contained", disabled: !isValid }, mode === 'add' ? trans.__('Add Provider') : trans.__('Save Changes')))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.9.1",
+    "version": "0.10.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -51,14 +51,17 @@
         "stylelint:check": "stylelint --cache \"style/**/*.css\"",
         "watch": "run-p watch:src watch:labextension",
         "watch:src": "tsc -w --sourceMap",
-        "watch:labextension": "jupyter labextension watch ."
+        "watch:labextension": "jupyter labextension watch .",
+        "docs": "jupyter book start",
+        "docs:build": "sed -e 's/\\[@/[/g' -e 's/@/\\@/g' CHANGELOG.md > docs/_changelog_content.md && jupyter book build --html"
     },
     "dependencies": {
-        "@ai-sdk/anthropic": "^2.0.30",
-        "@ai-sdk/google": "^2.0.19",
-        "@ai-sdk/mistral": "^2.0.17",
-        "@ai-sdk/openai": "^2.0.44",
-        "@ai-sdk/openai-compatible": "^1.0.26",
+        "@ai-sdk/anthropic": "^3.0.1",
+        "@ai-sdk/google": "^3.0.1",
+        "@ai-sdk/mcp": "^1.0.1",
+        "@ai-sdk/mistral": "^3.0.1",
+        "@ai-sdk/openai": "^3.0.1",
+        "@ai-sdk/openai-compatible": "^2.0.1",
         "@jupyter/chat": "^0.18.2",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/apputils": "^4.5.6",
@@ -81,14 +84,11 @@
         "@lumino/polling": "^2.1.4",
         "@lumino/signaling": "^2.1.4",
         "@lumino/widgets": "^2.7.1",
-        "@modelcontextprotocol/sdk": "^1.19.1",
         "@mui/icons-material": "^7",
         "@mui/material": "^7",
-        "@openai/agents": "^0.1.9",
-        "@openai/agents-extensions": "^0.1.5",
-        "ai": "^5.0.60",
+        "ai": "^6.0.0",
         "jupyter-secrets-manager": "^0.4.0",
-        "zod": "^3.25.76"
+        "zod": "^4.2.1"
     },
     "devDependencies": {
         "@jupyterlab/builder": "^4.0.0",