@jupyterlite/ai 0.9.0-a4 → 0.9.0

package/README.md

@@ -52,13 +52,25 @@ The process is different for each provider, so you may refer to their documentat
 
 ![screenshot showing the dialog to add a new provider](https://github.com/user-attachments/assets/823c71c6-5807-44c8-80b6-2e59379a65d5)
 
+### Using a generic OpenAI-compatible provider
+
+The Generic provider allows you to connect to any OpenAI-compatible API endpoint, including local servers like Ollama and LiteLLM.
+
+1. In JupyterLab, open the AI settings panel and go to the **Providers** section
+2. Click on "Add a new provider"
+3. Select the **Generic (OpenAI-compatible)** provider
+4. Configure the following settings:
+   - **Base URL**: The base URL of your API endpoint (suggestions are provided for common local servers)
+   - **Model**: The model name to use
+   - **API Key**: Your API key (if required by the provider)
+
 ### Using Ollama
 
 [Ollama](https://ollama.com/) allows you to run open-weight LLMs locally on your machine.
 
 #### Setting up Ollama
 
-1. Install Ollama following the instructions at https://ollama.com/download
+1. Install Ollama following the instructions at <https://ollama.com/download>
 2. Pull a model, for example:
 
 ```bash
@@ -71,21 +83,11 @@ ollama pull llama3.2
 
 1. In JupyterLab, open the AI settings panel and go to the **Providers** section
 2. Click on "Add a new provider"
-3. Select the **Ollama** provider
+3. Select the **Generic (OpenAI-compatible)** provider
 4. Configure the following settings:
+   - **Base URL**: Select `http://localhost:11434/v1` from the suggestions (or enter manually)
    - **Model**: The model name you pulled (e.g., `llama3.2`)
-
-### Using a generic OpenAI-compatible provider
-
-The Generic provider allows you to connect to any OpenAI-compatible API endpoint.
-
-1. In JupyterLab, open the AI settings panel and go to the **Providers** section
-2. Click on "Add a new provider"
-3. Select the **Generic** provider
-4. Configure the following settings:
-   - **Base URL**: The base URL of your API endpoint
-   - **Model**: The model name to use
-   - **API Key**: Your API key (if required by the provider)
+   - **API Key**: Leave empty (not required for Ollama)
 
 ### Using LiteLLM Proxy
 
@@ -97,7 +99,7 @@ Using LiteLLM Proxy with jupyterlite-ai provides flexibility to switch between d
 
 1. Install LiteLLM:
 
-Follow the instructions at https://docs.litellm.ai/docs/simple_proxy.
+Follow the instructions at <https://docs.litellm.ai/docs/simple_proxy>.
 
 2. Create a `litellm_config.yaml` file with your model configuration:
 
@@ -144,7 +146,7 @@ Providers are based on the [Vercel AI SDK](https://sdk.vercel.ai/docs/introducti
 
 ### Registering a Custom Provider
 
-**Example: Registering a custom OpenAI-compatible provider**
+#### Example: Registering a custom OpenAI-compatible provider
 
 ```typescript
 import {
@@ -192,7 +194,7 @@ The provider configuration object requires the following properties:
 - `supportsBaseURL`: Whether the provider supports a custom base URL
 - `factory`: Function that creates and returns a language model (the registry automatically wraps it for chat usage)
 
-**Example: Using a custom fetch function**
+#### Example: Using a custom fetch function
 
 You can provide a custom `fetch` function to the provider, which is useful for adding custom headers, handling authentication, or routing requests through a proxy:
 
@@ -253,75 +255,4 @@ pip uninstall jupyterlite-ai
 
 ## Contributing
 
-### Development install
-
-Note: You will need NodeJS to build the extension package.
-
-The `jlpm` command is JupyterLab's pinned version of
-[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
-`yarn` or `npm` in lieu of `jlpm` below.
-
-```bash
-# Clone the repo to your local environment
-# Change directory to the jupyterlite_ai directory
-# Install package in development mode
-pip install -e "."
-# Link your development version of the extension with JupyterLab
-jupyter labextension develop . --overwrite
-# Rebuild extension Typescript source after making changes
-jlpm build
-```
-
-You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
-
-```bash
-# Watch the source directory in one terminal, automatically rebuilding when needed
-jlpm watch
-# Run JupyterLab in another terminal
-jupyter lab
-```
-
-With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
-
-By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
-
-```bash
-jupyter lab build --minimize=False
-```
-
-### Running UI tests
-
-The UI tests use Playwright and can be configured with environment variables:
-
-- `PWVIDEO`: Controls video recording during tests (default: `retain-on-failure`)
-  - `on`: Record video for all tests
-  - `off`: Do not record video
-  - `retain-on-failure`: Only keep videos for failed tests
-- `PWSLOWMO`: Adds a delay (in milliseconds) between Playwright actions for debugging (default: `0`)
-
-Example usage:
-
-```bash
-# Record all test videos
-PWVIDEO=on jlpm playwright test
-
-# Slow down test execution by 500ms per action
-PWSLOWMO=500 jlpm playwright test
-
-# Combine both options
-PWVIDEO=on PWSLOWMO=1000 jlpm playwright test
-```
-
-### Development uninstall
-
-```bash
-pip uninstall jupyterlite-ai
-```
-
-In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
-command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
-folder is located. Then you can remove the symlink named `@jupyterlite/ai` within that folder.
-
-### Packaging the extension
-
-See [RELEASE](RELEASE.md)
+See [CONTRIBUTING](CONTRIBUTING.md)

package/lib/chat-model.js

@@ -524,7 +524,91 @@ ${toolsList}
                 const code = cell.source || '';
                 const cellType = cell.cell_type;
                 const lang = cellType === 'code' ? kernelLang : cellType;
-                return `**Cell [${cellInfo.id}] (${cellType}):**\n\`\`\`${lang}\n${code}\n\`\`\``;
+                const DISPLAY_PRIORITY = [
+                    'application/vnd.jupyter.widget-view+json',
+                    'application/javascript',
+                    'text/html',
+                    'image/svg+xml',
+                    'image/png',
+                    'image/jpeg',
+                    'text/markdown',
+                    'text/latex',
+                    'text/plain'
+                ];
+                function extractDisplay(data) {
+                    for (const mime of DISPLAY_PRIORITY) {
+                        if (!(mime in data)) {
+                            continue;
+                        }
+                        const value = data[mime];
+                        if (!value) {
+                            continue;
+                        }
+                        switch (mime) {
+                            case 'application/vnd.jupyter.widget-view+json':
+                                return `Widget: ${value.model_id ?? 'unknown model'}`;
+                            case 'image/png':
+                                return `![image](data:image/png;base64,${value.slice(0, 100)}...)`;
+                            case 'image/jpeg':
+                                return `![image](data:image/jpeg;base64,${value.slice(0, 100)}...)`;
+                            case 'image/svg+xml':
+                                return String(value).slice(0, 500) + '...\n[svg truncated]';
+                            case 'text/html':
+                                return (String(value).slice(0, 1000) +
+                                    (String(value).length > 1000 ? '\n...[truncated]' : ''));
+                            case 'text/markdown':
+                            case 'text/latex':
+                            case 'text/plain': {
+                                let text = Array.isArray(value)
+                                    ? value.join('')
+                                    : String(value);
+                                if (text.length > 2000) {
+                                    text = text.slice(0, 2000) + '\n...[truncated]';
+                                }
+                                return text;
+                            }
+                            default:
+                                return JSON.stringify(value).slice(0, 2000);
+                        }
+                    }
+                    return JSON.stringify(data).slice(0, 2000);
+                }
+                let outputs = '';
+                if (cellType === 'code' && Array.isArray(cell.outputs)) {
+                    outputs = cell.outputs
+                        .map((output) => {
+                        if (output.output_type === 'stream') {
+                            return output.text;
+                        }
+                        else if (output.output_type === 'error') {
+                            const err = output;
+                            return `${err.ename}: ${err.evalue}\n${(err.traceback || []).join('\n')}`;
+                        }
+                        else if (output.output_type === 'execute_result' ||
+                            output.output_type === 'display_data') {
+                            const data = output.data;
+                            if (!data) {
+                                return '';
+                            }
+                            try {
+                                return extractDisplay(data);
+                            }
+                            catch (e) {
+                                console.error('Cannot extract cell output', e);
+                                return '';
+                            }
+                        }
+                        return '';
+                    })
+                        .filter(Boolean)
+                        .join('\n---\n');
+                    if (outputs.length > 2000) {
+                        outputs = outputs.slice(0, 2000) + '\n...[truncated]';
+                    }
+                }
+                return (`**Cell [${cellInfo.id}] (${cellType}):**\n` +
+                    `\`\`\`${lang}\n${code}\n\`\`\`` +
+                    (outputs ? `\n**Outputs:**\n\`\`\`text\n${outputs}\n\`\`\`` : ''));
             })
                 .filter(Boolean)
                 .join('\n\n');

package/lib/components/completion-status.d.ts

@@ -0,0 +1,20 @@
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+/**
+ * The completion status props.
+ */
+interface ICompletionStatusProps {
+    /**
+     * The settings model.
+     */
+    settingsModel: AISettingsModel;
+}
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export declare class CompletionStatusWidget extends ReactWidget {
+    constructor(options: ICompletionStatusProps);
+    render(): JSX.Element;
+    private _props;
+}
+export {};

package/lib/components/completion-status.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
+const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
+/**
+ * The completion status component.
+ */
+function CompletionStatus(props) {
+    const [disabled, setDisabled] = useState(true);
+    const [title, setTitle] = useState('');
+    /**
+     * Handle changes in the settings.
+     */
+    useEffect(() => {
+        const stateChanged = (model) => {
+            if (model.config.useSameProviderForChatAndCompleter) {
+                setDisabled(false);
+                setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+            }
+            else if (model.config.activeCompleterProvider) {
+                setDisabled(false);
+                setTitle(`Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`);
+            }
+            else {
+                setDisabled(true);
+                setTitle('No completion');
+            }
+        };
+        props.settingsModel.stateChanged.connect(stateChanged);
+        stateChanged(props.settingsModel);
+        return () => {
+            props.settingsModel.stateChanged.disconnect(stateChanged);
+        };
+    }, [props.settingsModel]);
+    return (React.createElement(jupyternautIcon.react, { className: disabled ? COMPLETION_DISABLED_CLASS : '', top: '2px', width: '16px', stylesheet: 'statusBar', title: title }));
+}
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export class CompletionStatusWidget extends ReactWidget {
+    constructor(options) {
+        super();
+        this.addClass(COMPLETION_STATUS_CLASS);
+        this._props = options;
+    }
+    render() {
+        return React.createElement(CompletionStatus, { ...this._props });
+    }
+    _props;
+}

package/lib/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

package/lib/components/index.js

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

package/lib/index.js

@@ -8,6 +8,7 @@ import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IKernelSpecManager } from '@jupyterlab/services';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IStatusBar } from '@jupyterlab/statusbar';
 import { settingsIcon, Toolbar, ToolbarButton } from '@jupyterlab/ui-components';
 import { ISecretsManager, SecretsManager } from 'jupyter-secrets-manager';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
@@ -16,9 +17,9 @@ import { ProviderRegistry } from './providers/provider-registry';
 import { ApprovalButtons } from './approval-buttons';
 import { ChatModelRegistry } from './chat-model-registry';
 import { CommandIds, IAgentManagerFactory, IProviderRegistry, IToolRegistry, SECRETS_NAMESPACE, IAISettingsModel, IChatModelRegistry, IDiffManager } from './tokens';
-import { anthropicProvider, googleProvider, mistralProvider, openaiProvider, ollamaProvider, genericProvider } from './providers/built-in-providers';
+import { anthropicProvider, googleProvider, mistralProvider, openaiProvider, genericProvider } from './providers/built-in-providers';
 import { AICompletionProvider } from './completion';
-import { clearItem, createModelSelectItem, createToolSelectItem, stopItem, TokenUsageWidget } from './components';
+import { clearItem, createModelSelectItem, createToolSelectItem, stopItem, CompletionStatusWidget, TokenUsageWidget } from './components';
 import { AISettingsModel } from './models/settings-model';
 import { DiffManager } from './diff-manager';
 import { ToolRegistry } from './tools/tool-registry';
@@ -87,18 +88,6 @@ const openaiProviderPlugin = {
         providerRegistry.registerProvider(openaiProvider);
     }
 };
-/**
- * Ollama provider plugin
- */
-const ollamaProviderPlugin = {
-    id: '@jupyterlite/ai:ollama-provider',
-    description: 'Register Ollama provider',
-    autoStart: true,
-    requires: [IProviderRegistry],
-    activate: (app, providerRegistry) => {
-        providerRegistry.registerProvider(ollamaProvider);
-    }
-};
 /**
  * Generic provider plugin
  */
@@ -480,6 +469,7 @@ const agentManagerFactory = SecretsManager.sign(SECRETS_NAMESPACE, token => ({
         });
         settingsWidget.id = 'jupyterlite-ai-settings';
         settingsWidget.title.icon = settingsIcon;
+        settingsWidget.title.iconClass = 'jp-ai-settings-icon';
         // Build the completion provider
         if (completionManager) {
             const completionProvider = new AICompletionProvider({
@@ -500,6 +490,7 @@ const agentManagerFactory = SecretsManager.sign(SECRETS_NAMESPACE, token => ({
             label: 'AI Settings',
             caption: 'Configure AI providers and behavior',
             icon: settingsIcon,
+            iconClass: 'jp-ai-settings-icon',
             execute: () => {
                 // Check if the widget already exists in shell
                 let widget = Array.from(app.shell.widgets('main')).find(w => w.id === 'jupyterlite-ai-settings');
@@ -644,13 +635,30 @@ const inputToolbarFactory = {
         };
     }
 };
+const completionStatus = {
+    id: '@jupyterlite/ai:completion-status',
+    description: 'The completion status displayed in the status bar',
+    autoStart: true,
+    requires: [IAISettingsModel],
+    optional: [IStatusBar],
+    activate: (app, settingsModel, statusBar) => {
+        if (!statusBar) {
+            return;
+        }
+        const item = new CompletionStatusWidget({ settingsModel });
+        statusBar?.registerStatusItem('completionState', {
+            item,
+            align: 'right',
+            rank: 10
+        });
+    }
+};
 export default [
     providerRegistryPlugin,
     anthropicProviderPlugin,
     googleProviderPlugin,
     mistralProviderPlugin,
     openaiProviderPlugin,
-    ollamaProviderPlugin,
     genericProviderPlugin,
     settingsModel,
     diffManager,
@@ -658,7 +666,8 @@ export default [
     plugin,
     toolRegistry,
     agentManagerFactory,
-    inputToolbarFactory
+    inputToolbarFactory,
+    completionStatus
 ];
 // Export extension points for other extensions to use
 export * from './tokens';

package/lib/models/settings-model.js

@@ -166,7 +166,7 @@ Rules:
         }
         return this._config.activeCompleterProvider
             ? this.getProvider(this._config.activeCompleterProvider)
-            : this.getDefaultProvider();
+            : undefined;
     }
     async addProvider(providerConfig) {
         const id = `${providerConfig.provider}-${Date.now()}`;
@@ -219,6 +219,11 @@ Rules:
             return;
         }
         Object.assign(provider, updates);
+        Object.keys(provider).forEach(key => {
+            if (key !== 'id' && updates[key] === undefined) {
+                delete provider[key];
+            }
+        });
         await this.saveSetting('providers', this._config.providers);
     }
     async setActiveProvider(id) {
@@ -298,6 +303,9 @@ Rules:
                 if (value !== undefined) {
                     await this._settings.set(key, value);
                 }
+                else {
+                    await this._settings.remove(key);
+                }
             }
         }
         catch (error) {

package/lib/providers/built-in-providers.d.ts

@@ -15,10 +15,6 @@ export declare const mistralProvider: IProviderInfo;
  * OpenAI provider
  */
 export declare const openaiProvider: IProviderInfo;
-/**
- * Ollama provider
- */
-export declare const ollamaProvider: IProviderInfo;
 /**
  * Generic OpenAI-compatible provider
  */

package/lib/providers/built-in-providers.js

@@ -2,7 +2,7 @@ import { createAnthropic } from '@ai-sdk/anthropic';
 import { createGoogleGenerativeAI } from '@ai-sdk/google';
 import { createMistral } from '@ai-sdk/mistral';
 import { createOpenAI } from '@ai-sdk/openai';
-import { createOllama } from 'ollama-ai-provider-v2';
+import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
 /**
  * Anthropic provider
  */
@@ -194,25 +194,6 @@ export const openaiProvider = {
         return openai(modelName);
     }
 };
-/**
- * Ollama provider
- */
-export const ollamaProvider = {
-    id: 'ollama',
-    name: 'Ollama',
-    apiKeyRequirement: 'none',
-    defaultModels: [],
-    supportsBaseURL: true,
-    supportsHeaders: true,
-    factory: (options) => {
-        const ollama = createOllama({
-            baseURL: options.baseURL || 'http://localhost:11434/api',
-            ...(options.headers && { headers: options.headers })
-        });
-        const modelName = options.model || 'phi3';
-        return ollama(modelName);
-    }
-};
 /**
  * Generic OpenAI-compatible provider
  */
@@ -225,13 +206,24 @@ export const genericProvider = {
     supportsHeaders: true,
     supportsToolCalling: true,
     description: 'Uses /chat/completions endpoint',
+    baseUrls: [
+        {
+            url: 'http://localhost:4000',
+            description: 'Default for local LiteLLM server'
+        },
+        {
+            url: 'http://localhost:11434/v1',
+            description: 'Default for local Ollama server'
+        }
+    ],
     factory: (options) => {
-        const openai = createOpenAI({
+        const openaiCompatible = createOpenAICompatible({
+            name: options.provider,
             apiKey: options.apiKey || 'dummy',
-            ...(options.baseURL && { baseURL: options.baseURL }),
+            baseURL: options.baseURL ?? '',
             ...(options.headers && { headers: options.headers })
         });
         const modelName = options.model || 'gpt-4o';
-        return openai(modelName);
+        return openaiCompatible(modelName);
     }
 };

package/lib/tokens.d.ts

@@ -130,6 +130,13 @@ export interface IProviderInfo {
      * Optional description shown in the UI
      */
     description?: string;
+    /**
+     * Optional URL suggestions
+     */
+    baseUrls?: {
+        url: string;
+        description?: string;
+    }[];
     /**
      * Factory function for creating language models
      */

package/lib/widgets/ai-settings.js

@@ -353,6 +353,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                 overflow: 'auto',
                 p: 2,
                 pb: 4,
+                boxSizing: 'border-box',
                 fontSize: '0.9rem'
             } },
             React.createElement(Box, { sx: { mb: 2, display: 'flex', alignItems: 'center', gap: 2 } },
@@ -376,9 +377,9 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                                     }), color: "primary" }), label: "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", onChange: e => model.setActiveCompleterProvider(e.target.value || undefined) },
+                                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(MenuItem, { value: "" },
-                                        React.createElement("em", null, "Use chat provider")),
+                                        React.createElement("em", null, "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,
@@ -444,7 +445,7 @@ const AISettingsComponent = ({ model, agentManagerFactory, themeManager, provide
                             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 will be stored in plain text in settings"))) })))),
+                        !config.useSecretsManager && (React.createElement(Alert, { severity: "warning", icon: React.createElement(Error, null), sx: { mb: 2 } }, "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"),

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

@@ -1,7 +1,7 @@
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
+import { Accordion, AccordionDetails, AccordionSummary, Autocomplete, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, InputAdornment, InputLabel, MenuItem, Select, Slider, Switch, TextField, Typography } from '@mui/material';
 import React from 'react';
 /**
  * Default parameter values for provider configuration
@@ -28,9 +28,10 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                 label: info.name,
                 models: info.defaultModels,
                 apiKeyRequirement: info.apiKeyRequirement,
-                allowCustomModel: id === 'ollama' || id === 'generic', // Ollama and Generic allow custom models
+                allowCustomModel: id === 'generic', // Generic allows custom models
                 supportsBaseURL: info.supportsBaseURL,
-                description: info.description
+                description: info.description,
+                baseUrls: info.baseUrls
             };
         });
     }, [providerRegistry]);
@@ -124,11 +125,17 @@ export const ProviderConfigDialog = ({ open, onClose, onSave, initialConfig, mod
                         endAdornment: (React.createElement(InputAdornment, { position: "end" },
                             React.createElement(IconButton, { onClick: () => setShowApiKey(!showApiKey), edge: "end" }, showApiKey ? React.createElement(VisibilityOff, null) : React.createElement(Visibility, null))))
                     } })),
-                selectedProvider?.supportsBaseURL && (React.createElement(TextField, { fullWidth: true, label: "Base URL (Optional)", value: baseURL, onChange: e => setBaseURL(e.target.value), placeholder: provider === 'ollama'
-                        ? 'http://localhost:11434/api'
-                        : 'Custom API endpoint', helperText: provider === 'ollama'
-                        ? 'Ollama server endpoint'
-                        : 'Custom API base URL (e.g., for LiteLLM proxy). Leave empty to use default provider endpoint.' })),
+                selectedProvider?.supportsBaseURL && (React.createElement(Autocomplete, { freeSolo: true, fullWidth: true, options: (selectedProvider.baseUrls ?? []).map(option => option.url), value: baseURL || '', onChange: (_, value) => {
+                        if (value && typeof value === 'string') {
+                            setBaseURL(value);
+                        }
+                    }, inputValue: baseURL || '', renderOption: (props, option) => {
+                        const urlOption = (selectedProvider.baseUrls ?? []).find(u => u.url === option);
+                        return (React.createElement(Box, { component: "li", ...props, key: option },
+                            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 })),
                 React.createElement(Accordion, { expanded: expandedAdvanced, onChange: (_, isExpanded) => setExpandedAdvanced(isExpanded), sx: {
                         mt: 2,
                         bgcolor: 'transparent',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.9.0-a4",
+    "version": "0.9.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -58,6 +58,7 @@
         "@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",
         "@jupyter/chat": "^0.18.2",
         "@jupyterlab/application": "^4.0.0",
         "@jupyterlab/apputils": "^4.5.6",
@@ -71,6 +72,7 @@
         "@jupyterlab/rendermime": "^4.4.6",
         "@jupyterlab/services": "^7.4.6",
         "@jupyterlab/settingregistry": "^4.0.0",
+        "@jupyterlab/statusbar": "^4.4.6",
         "@jupyterlab/ui-components": "^4.4.6",
         "@lumino/commands": "^2.3.2",
         "@lumino/coreutils": "^2.2.1",
@@ -86,7 +88,6 @@
         "@openai/agents-extensions": "^0.1.5",
         "ai": "^5.0.60",
         "jupyter-secrets-manager": "^0.4.0",
-        "ollama-ai-provider-v2": "^1.4.1",
         "zod": "^3.25.76"
     },
     "devDependencies": {

package/src/chat-model.ts

@@ -24,6 +24,8 @@ import { AISettingsModel } from './models/settings-model';
 
 import { ITokenUsage } from './tokens';
 
+import * as nbformat from '@jupyterlab/nbformat';
+
 /**
  * AI Chat Model implementation that provides chat functionality with OpenAI agents,
  * tool integration, and MCP server support.
@@ -646,7 +648,107 @@ ${toolsList}
           const cellType = cell.cell_type;
           const lang = cellType === 'code' ? kernelLang : cellType;
 
-          return `**Cell [${cellInfo.id}] (${cellType}):**\n\`\`\`${lang}\n${code}\n\`\`\``;
+          const DISPLAY_PRIORITY = [
+            'application/vnd.jupyter.widget-view+json',
+            'application/javascript',
+            'text/html',
+            'image/svg+xml',
+            'image/png',
+            'image/jpeg',
+            'text/markdown',
+            'text/latex',
+            'text/plain'
+          ];
+
+          function extractDisplay(data: any): string {
+            for (const mime of DISPLAY_PRIORITY) {
+              if (!(mime in data)) {
+                continue;
+              }
+
+              const value = data[mime];
+              if (!value) {
+                continue;
+              }
+
+              switch (mime) {
+                case 'application/vnd.jupyter.widget-view+json':
+                  return `Widget: ${(value as any).model_id ?? 'unknown model'}`;
+
+                case 'image/png':
+                  return `![image](data:image/png;base64,${value.slice(0, 100)}...)`;
+
+                case 'image/jpeg':
+                  return `![image](data:image/jpeg;base64,${value.slice(0, 100)}...)`;
+
+                case 'image/svg+xml':
+                  return String(value).slice(0, 500) + '...\n[svg truncated]';
+
+                case 'text/html':
+                  return (
+                    String(value).slice(0, 1000) +
+                    (String(value).length > 1000 ? '\n...[truncated]' : '')
+                  );
+
+                case 'text/markdown':
+                case 'text/latex':
+                case 'text/plain': {
+                  let text = Array.isArray(value)
+                    ? value.join('')
+                    : String(value);
+                  if (text.length > 2000) {
+                    text = text.slice(0, 2000) + '\n...[truncated]';
+                  }
+                  return text;
+                }
+
+                default:
+                  return JSON.stringify(value).slice(0, 2000);
+              }
+            }
+
+            return JSON.stringify(data).slice(0, 2000);
+          }
+
+          let outputs = '';
+          if (cellType === 'code' && Array.isArray(cell.outputs)) {
+            outputs = cell.outputs
+              .map((output: nbformat.IOutput) => {
+                if (output.output_type === 'stream') {
+                  return (output as nbformat.IStream).text;
+                } else if (output.output_type === 'error') {
+                  const err = output as nbformat.IError;
+                  return `${err.ename}: ${err.evalue}\n${(err.traceback || []).join('\n')}`;
+                } else if (
+                  output.output_type === 'execute_result' ||
+                  output.output_type === 'display_data'
+                ) {
+                  const data = (output as nbformat.IDisplayData).data;
+                  if (!data) {
+                    return '';
+                  }
+                  try {
+                    return extractDisplay(data);
+                  } catch (e) {
+                    console.error('Cannot extract cell output', e);
+                    return '';
+                  }
+                }
+                return '';
+              })
+              .filter(Boolean)
+              .join('\n---\n');
+
+            if (outputs.length > 2000) {
+              outputs = outputs.slice(0, 2000) + '\n...[truncated]';
+            }
+          }
+
+          return (
+            `**Cell [${cellInfo.id}] (${cellType}):**\n` +
+            `\`\`\`${lang}\n${code}\n\`\`\`` +
+            (outputs ? `\n**Outputs:**\n\`\`\`text\n${outputs}\n\`\`\`` : '')
+          );
         })
         .filter(Boolean)
         .join('\n\n');

package/src/components/completion-status.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { AISettingsModel } from '../models/settings-model';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { jupyternautIcon } from '../icons';
+
+const COMPLETION_STATUS_CLASS = 'jp-ai-completion-status';
+const COMPLETION_DISABLED_CLASS = 'jp-ai-completion-disabled';
+
+/**
+ * The completion status props.
+ */
+interface ICompletionStatusProps {
+  /**
+   * The settings model.
+   */
+  settingsModel: AISettingsModel;
+}
+
+/**
+ * The completion status component.
+ */
+function CompletionStatus(props: ICompletionStatusProps): JSX.Element {
+  const [disabled, setDisabled] = useState<boolean>(true);
+  const [title, setTitle] = useState<string>('');
+
+  /**
+   * Handle changes in the settings.
+   */
+  useEffect(() => {
+    const stateChanged = (model: AISettingsModel) => {
+      if (model.config.useSameProviderForChatAndCompleter) {
+        setDisabled(false);
+        setTitle(`Completion using ${model.getDefaultProvider()?.model}`);
+      } else if (model.config.activeCompleterProvider) {
+        setDisabled(false);
+        setTitle(
+          `Completion using ${model.getProvider(model.config.activeCompleterProvider)?.model}`
+        );
+      } else {
+        setDisabled(true);
+        setTitle('No completion');
+      }
+    };
+
+    props.settingsModel.stateChanged.connect(stateChanged);
+
+    stateChanged(props.settingsModel);
+    return () => {
+      props.settingsModel.stateChanged.disconnect(stateChanged);
+    };
+  }, [props.settingsModel]);
+
+  return (
+    <jupyternautIcon.react
+      className={disabled ? COMPLETION_DISABLED_CLASS : ''}
+      top={'2px'}
+      width={'16px'}
+      stylesheet={'statusBar'}
+      title={title}
+    />
+  );
+}
+
+/**
+ * The completion status widget that will be added to the status bar.
+ */
+export class CompletionStatusWidget extends ReactWidget {
+  constructor(options: ICompletionStatusProps) {
+    super();
+    this.addClass(COMPLETION_STATUS_CLASS);
+    this._props = options;
+  }
+
+  render(): JSX.Element {
+    return <CompletionStatus {...this._props} />;
+  }
+
+  private _props: ICompletionStatusProps;
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './clear-button';
+export * from './completion-status';
 export * from './model-select';
 export * from './stop-button';
 export * from './token-usage-display';

package/src/index.ts

@@ -36,6 +36,8 @@ import { IKernelSpecManager, KernelSpec } from '@jupyterlab/services';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { IStatusBar } from '@jupyterlab/statusbar';
+
 import {
   settingsIcon,
   Toolbar,
@@ -72,7 +74,6 @@ import {
   googleProvider,
   mistralProvider,
   openaiProvider,
-  ollamaProvider,
   genericProvider
 } from './providers/built-in-providers';
 
@@ -83,6 +84,7 @@ import {
   createModelSelectItem,
   createToolSelectItem,
   stopItem,
+  CompletionStatusWidget,
   TokenUsageWidget
 } from './components';
 
@@ -189,19 +191,6 @@ const openaiProviderPlugin: JupyterFrontEndPlugin<void> = {
   }
 };
 
-/**
- * Ollama provider plugin
- */
-const ollamaProviderPlugin: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlite/ai:ollama-provider',
-  description: 'Register Ollama provider',
-  autoStart: true,
-  requires: [IProviderRegistry],
-  activate: (app: JupyterFrontEnd, providerRegistry: IProviderRegistry) => {
-    providerRegistry.registerProvider(ollamaProvider);
-  }
-};
-
 /**
  * Generic provider plugin
  */
@@ -698,6 +687,7 @@ const agentManagerFactory: JupyterFrontEndPlugin<AgentManagerFactory> =
       });
       settingsWidget.id = 'jupyterlite-ai-settings';
       settingsWidget.title.icon = settingsIcon;
+      settingsWidget.title.iconClass = 'jp-ai-settings-icon';
 
       // Build the completion provider
       if (completionManager) {
@@ -723,6 +713,7 @@ const agentManagerFactory: JupyterFrontEndPlugin<AgentManagerFactory> =
         label: 'AI Settings',
         caption: 'Configure AI providers and behavior',
         icon: settingsIcon,
+        iconClass: 'jp-ai-settings-icon',
         execute: () => {
           // Check if the widget already exists in shell
           let widget = Array.from(app.shell.widgets('main')).find(
@@ -930,13 +921,35 @@ const inputToolbarFactory: JupyterFrontEndPlugin<IInputToolbarRegistryFactory> =
     }
   };
 
+const completionStatus: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlite/ai:completion-status',
+  description: 'The completion status displayed in the status bar',
+  autoStart: true,
+  requires: [IAISettingsModel],
+  optional: [IStatusBar],
+  activate: (
+    app: JupyterFrontEnd,
+    settingsModel: AISettingsModel,
+    statusBar: IStatusBar | null
+  ) => {
+    if (!statusBar) {
+      return;
+    }
+    const item = new CompletionStatusWidget({ settingsModel });
+    statusBar?.registerStatusItem('completionState', {
+      item,
+      align: 'right',
+      rank: 10
+    });
+  }
+};
+
 export default [
   providerRegistryPlugin,
   anthropicProviderPlugin,
   googleProviderPlugin,
   mistralProviderPlugin,
   openaiProviderPlugin,
-  ollamaProviderPlugin,
   genericProviderPlugin,
   settingsModel,
   diffManager,
@@ -944,7 +957,8 @@ export default [
   plugin,
   toolRegistry,
   agentManagerFactory,
-  inputToolbarFactory
+  inputToolbarFactory,
+  completionStatus
 ];
 
 // Export extension points for other extensions to use

package/src/models/settings-model.ts

@@ -241,7 +241,7 @@ Rules:
     }
     return this._config.activeCompleterProvider
       ? this.getProvider(this._config.activeCompleterProvider)
-      : this.getDefaultProvider();
+      : undefined;
   }
 
   async addProvider(
@@ -311,6 +311,11 @@ Rules:
     }
 
     Object.assign(provider, updates);
+    Object.keys(provider).forEach(key => {
+      if (key !== 'id' && updates[key] === undefined) {
+        delete provider[key];
+      }
+    });
     await this.saveSetting('providers', this._config.providers);
   }
 
@@ -416,6 +421,8 @@ Rules:
         // Only save the specific setting that changed
         if (value !== undefined) {
           await this._settings.set(key, value as any);
+        } else {
+          await this._settings.remove(key);
         }
       }
     } catch (error) {

package/src/providers/built-in-providers.ts

@@ -2,7 +2,7 @@ import { createAnthropic } from '@ai-sdk/anthropic';
 import { createGoogleGenerativeAI } from '@ai-sdk/google';
 import { createMistral } from '@ai-sdk/mistral';
 import { createOpenAI } from '@ai-sdk/openai';
-import { createOllama } from 'ollama-ai-provider-v2';
+import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
 
 import type { IProviderInfo } from '../tokens';
 import type { IModelOptions } from './models';
@@ -202,26 +202,6 @@ export const openaiProvider: IProviderInfo = {
   }
 };
 
-/**
- * Ollama provider
- */
-export const ollamaProvider: IProviderInfo = {
-  id: 'ollama',
-  name: 'Ollama',
-  apiKeyRequirement: 'none',
-  defaultModels: [],
-  supportsBaseURL: true,
-  supportsHeaders: true,
-  factory: (options: IModelOptions) => {
-    const ollama = createOllama({
-      baseURL: options.baseURL || 'http://localhost:11434/api',
-      ...(options.headers && { headers: options.headers })
-    });
-    const modelName = options.model || 'phi3';
-    return ollama(modelName);
-  }
-};
-
 /**
  * Generic OpenAI-compatible provider
  */
@@ -234,13 +214,24 @@ export const genericProvider: IProviderInfo = {
   supportsHeaders: true,
   supportsToolCalling: true,
   description: 'Uses /chat/completions endpoint',
+  baseUrls: [
+    {
+      url: 'http://localhost:4000',
+      description: 'Default for local LiteLLM server'
+    },
+    {
+      url: 'http://localhost:11434/v1',
+      description: 'Default for local Ollama server'
+    }
+  ],
   factory: (options: IModelOptions) => {
-    const openai = createOpenAI({
+    const openaiCompatible = createOpenAICompatible({
+      name: options.provider,
       apiKey: options.apiKey || 'dummy',
-      ...(options.baseURL && { baseURL: options.baseURL }),
+      baseURL: options.baseURL ?? '',
       ...(options.headers && { headers: options.headers })
     });
     const modelName = options.model || 'gpt-4o';
-    return openai(modelName);
+    return openaiCompatible(modelName);
   }
 };

package/src/tokens.ts

@@ -159,6 +159,11 @@ export interface IProviderInfo {
    */
   description?: string;
 
+  /**
+   * Optional URL suggestions
+   */
+  baseUrls?: { url: string; description?: string }[];
+
   /**
    * Factory function for creating language models
    */

package/src/widgets/ai-settings.tsx

@@ -527,6 +527,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
           overflow: 'auto',
           p: 2,
           pb: 4,
+          boxSizing: 'border-box',
           fontSize: '0.9rem'
         }}
       >
@@ -600,6 +601,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                         <Select
                           value={config.activeCompleterProvider || ''}
                           label="Completion Provider"
+                          className="jp-ai-completion-provider-select"
                           onChange={e =>
                             model.setActiveCompleterProvider(
                               e.target.value || undefined
@@ -607,7 +609,7 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                           }
                         >
                           <MenuItem value="">
-                            <em>Use chat provider</em>
+                            <em>No completion</em>
                           </MenuItem>
                           {config.providers.map(provider => (
                             <MenuItem key={provider.id} value={provider.id}>
@@ -793,9 +795,9 @@ const AISettingsComponent: React.FC<IAISettingsComponentProps> = ({
                 label={
                   <div>
                     <span>Use the secrets manager to manage API keys</span>
-                    {config.useSecretsManager && (
+                    {!config.useSecretsManager && (
                       <Alert severity="warning" icon={<Error />} sx={{ mb: 2 }}>
-                        The secrets will be stored in plain text in settings
+                        The secrets are stored in plain text in settings
                       </Alert>
                     )}
                   </div>

package/src/widgets/provider-config-dialog.tsx

@@ -5,6 +5,7 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
+  Autocomplete,
   Box,
   Button,
   Chip,
@@ -83,9 +84,10 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
         label: info.name,
         models: info.defaultModels,
         apiKeyRequirement: info.apiKeyRequirement,
-        allowCustomModel: id === 'ollama' || id === 'generic', // Ollama and Generic allow custom models
+        allowCustomModel: id === 'generic', // Generic allows custom models
         supportsBaseURL: info.supportsBaseURL,
-        description: info.description
+        description: info.description,
+        baseUrls: info.baseUrls
       };
     });
   }, [providerRegistry]);
@@ -279,21 +281,46 @@ export const ProviderConfigDialog: React.FC<IProviderConfigDialogProps> = ({
             )}
 
           {selectedProvider?.supportsBaseURL && (
-            <TextField
+            <Autocomplete
+              freeSolo
               fullWidth
-              label="Base URL (Optional)"
-              value={baseURL}
-              onChange={e => setBaseURL(e.target.value)}
-              placeholder={
-                provider === 'ollama'
-                  ? 'http://localhost:11434/api'
-                  : 'Custom API endpoint'
-              }
-              helperText={
-                provider === 'ollama'
-                  ? 'Ollama server endpoint'
-                  : 'Custom API base URL (e.g., for LiteLLM proxy). Leave empty to use default provider endpoint.'
-              }
+              options={(selectedProvider.baseUrls ?? []).map(
+                option => option.url
+              )}
+              value={baseURL || ''}
+              onChange={(_, value) => {
+                if (value && typeof value === 'string') {
+                  setBaseURL(value);
+                }
+              }}
+              inputValue={baseURL || ''}
+              renderOption={(props, option) => {
+                const urlOption = (selectedProvider.baseUrls ?? []).find(
+                  u => u.url === option
+                );
+                return (
+                  <Box component="li" {...props} key={option}>
+                    <Box>
+                      <Typography variant="body2">{option}</Typography>
+                      {urlOption?.description && (
+                        <Typography variant="caption" color="text.secondary">
+                          {urlOption.description}
+                        </Typography>
+                      )}
+                    </Box>
+                  </Box>
+                );
+              }}
+              renderInput={params => (
+                <TextField
+                  {...params}
+                  fullWidth
+                  label="Base URL"
+                  placeholder="https://api.example.com/v1"
+                  onChange={e => setBaseURL(e.target.value)}
+                />
+              )}
+              clearOnBlur={false}
             />
           )}
 

package/style/base.css

@@ -371,6 +371,11 @@
   transform: rotate(180deg);
 }
 
+.jp-ai-settings-icon {
+  align-items: center;
+  display: flex;
+}
+
 .jp-chat-sidepanel .jp-chat-add span.jp-ToolbarButtonComponent-label {
   display: none;
 }
@@ -379,3 +384,12 @@
   stroke: var(--jp-inverse-layout-color3);
   stroke-width: 2;
 }
+
+/* Disabled color for the completion status */
+.jp-ai-completion-status .jp-ai-completion-disabled circle {
+  fill: var(--jp-layout-color3);
+}
+
+.jp-ai-completion-status .jp-ai-completion-disabled path {
+  fill: var(--jp-layout-color2);
+}