@jupyterlite/ai 0.3.0 → 0.5.0

package/lib/chat-handler.d.ts

@@ -1,6 +1,6 @@
-import { ChatModel, IChatHistory, IChatMessage, INewMessage } from '@jupyter/chat';
+import { ChatCommand, ChatModel, IChatCommandProvider, IChatHistory, IChatMessage, IInputModel, INewMessage } from '@jupyter/chat';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { IAIProvider } from './token';
+import { IAIProviderRegistry } from './tokens';
 export type ConnectionMessage = {
     type: 'connection';
     client_id: string;
@@ -22,7 +22,7 @@ export declare class ChatHandler extends ChatModel {
     getHistory(): Promise<IChatHistory>;
     dispose(): void;
     messageAdded(message: IChatMessage): void;
-    private _aiProvider;
+    private _providerRegistry;
     private _personaName;
     private _prompt;
     private _errorMessage;
@@ -31,6 +31,12 @@ export declare class ChatHandler extends ChatModel {
 }
 export declare namespace ChatHandler {
     interface IOptions extends ChatModel.IOptions {
-        aiProvider: IAIProvider;
+        providerRegistry: IAIProviderRegistry;
+    }
+    class ClearCommandProvider implements IChatCommandProvider {
+        id: string;
+        private _slash_commands;
+        getChatCommands(inputModel: IInputModel): Promise<ChatCommand[]>;
+        handleChatCommand(command: ChatCommand, inputModel: IInputModel): Promise<void>;
     }
 }

package/lib/chat-handler.js

@@ -5,7 +5,6 @@
 import { ChatModel } from '@jupyter/chat';
 import { AIMessage, HumanMessage, mergeMessageRuns, SystemMessage } from '@langchain/core/messages';
 import { UUID } from '@lumino/coreutils';
-import { getErrorMessage } from './llm-models';
 import { chatSystemPrompt } from './provider';
 import { jupyternautLiteIcon } from './icons';
 /**
@@ -21,15 +20,19 @@ export class ChatHandler extends ChatModel {
         this._errorMessage = '';
         this._history = { messages: [] };
         this._defaultErrorMessage = 'AI provider not configured';
-        this._aiProvider = options.aiProvider;
-        this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
-        this._aiProvider.modelChange.connect(() => {
-            this._errorMessage = this._aiProvider.chatError;
-            this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
+        this._providerRegistry = options.providerRegistry;
+        this._prompt = chatSystemPrompt({
+            provider_name: this._providerRegistry.currentName
+        });
+        this._providerRegistry.providerChanged.connect(() => {
+            this._errorMessage = this._providerRegistry.chatError;
+            this._prompt = chatSystemPrompt({
+                provider_name: this._providerRegistry.currentName
+            });
         });
     }
     get provider() {
-        return this._aiProvider.chatModel;
+        return this._providerRegistry.currentChatModel;
     }
     /**
      * Getter and setter for the persona name.
@@ -74,7 +77,7 @@ export class ChatHandler extends ChatModel {
             type: 'msg'
         };
         this.messageAdded(msg);
-        if (this._aiProvider.chatModel === null) {
+        if (this._providerRegistry.currentChatModel === null) {
             const errorMsg = {
                 id: UUID.uuid4(),
                 body: `**${this._errorMessage ? this._errorMessage : this._defaultErrorMessage}**`,
@@ -105,7 +108,7 @@ export class ChatHandler extends ChatModel {
         };
         let content = '';
         try {
-            for await (const chunk of await this._aiProvider.chatModel.stream(messages)) {
+            for await (const chunk of await this._providerRegistry.currentChatModel.stream(messages)) {
                 content += (_a = chunk.content) !== null && _a !== void 0 ? _a : chunk;
                 botMsg.body = content;
                 this.messageAdded(botMsg);
@@ -114,7 +117,7 @@ export class ChatHandler extends ChatModel {
             return true;
         }
         catch (reason) {
-            const error = getErrorMessage(this._aiProvider.name, reason);
+            const error = this._providerRegistry.formatErrorMessage(reason);
             const errorMsg = {
                 id: UUID.uuid4(),
                 body: `**${error}**`,
@@ -139,3 +142,32 @@ export class ChatHandler extends ChatModel {
         super.messageAdded(message);
     }
 }
+(function (ChatHandler) {
+    class ClearCommandProvider {
+        constructor() {
+            this.id = '@jupyterlite/ai:clear-commands';
+            this._slash_commands = [
+                {
+                    name: '/clear',
+                    providerId: this.id,
+                    replaceWith: '/clear',
+                    description: 'Clear the chat'
+                }
+            ];
+        }
+        async getChatCommands(inputModel) {
+            var _a, _b;
+            const match = (_b = (_a = inputModel.currentWord) === null || _a === void 0 ? void 0 : _a.match(/^\/\w*/)) === null || _b === void 0 ? void 0 : _b[0];
+            if (!match) {
+                return [];
+            }
+            const commands = this._slash_commands.filter(cmd => cmd.name.startsWith(match));
+            return commands;
+        }
+        async handleChatCommand(command, inputModel) {
+            // no handling needed because `replaceWith` is set in each command.
+            return;
+        }
+    }
+    ChatHandler.ClearCommandProvider = ClearCommandProvider;
+})(ChatHandler || (ChatHandler = {}));

package/lib/completion-provider.d.ts

@@ -1,20 +1,12 @@
 import { CompletionHandler, IInlineCompletionContext, IInlineCompletionProvider } from '@jupyterlab/completer';
-import { BaseLanguageModel } from '@langchain/core/language_models/base';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
-import { IBaseCompleter, BaseCompleter } from './llm-models';
+import { IBaseCompleter } from './base-completer';
+import { IAIProviderRegistry } from './tokens';
 /**
  * The generic completion provider to register to the completion provider manager.
  */
 export declare class CompletionProvider implements IInlineCompletionProvider {
     readonly identifier = "@jupyterlite/ai";
     constructor(options: CompletionProvider.IOptions);
-    /**
-     * Set the completer.
-     *
-     * @param name - the name of the completer.
-     * @param settings - The settings associated to the completer.
-     */
-    setCompleter(name: string, settings: ReadonlyPartialJSONObject): void;
     /**
      * Get the current completer name.
      */
@@ -23,18 +15,13 @@ export declare class CompletionProvider implements IInlineCompletionProvider {
      * Get the current completer.
      */
     get completer(): IBaseCompleter | null;
-    /**
-     * Get the LLM completer.
-     */
-    get llmCompleter(): BaseLanguageModel | null;
     fetch(request: CompletionHandler.IRequest, context: IInlineCompletionContext): Promise<any>;
-    private _name;
+    private _providerRegistry;
     private _requestCompletion;
-    private _completer;
 }
 export declare namespace CompletionProvider {
-    interface IOptions extends BaseCompleter.IOptions {
-        name: string;
+    interface IOptions {
+        providerRegistry: IAIProviderRegistry;
         requestCompletion: () => void;
     }
 }

package/lib/completion-provider.js

@@ -1,57 +1,31 @@
-import { getCompleter } from './llm-models';
 /**
  * The generic completion provider to register to the completion provider manager.
  */
 export class CompletionProvider {
     constructor(options) {
         this.identifier = '@jupyterlite/ai';
-        this._name = 'None';
-        this._completer = null;
-        const { name, settings } = options;
+        this._providerRegistry = options.providerRegistry;
         this._requestCompletion = options.requestCompletion;
-        this.setCompleter(name, settings);
-    }
-    /**
-     * Set the completer.
-     *
-     * @param name - the name of the completer.
-     * @param settings - The settings associated to the completer.
-     */
-    setCompleter(name, settings) {
-        try {
-            this._completer = getCompleter(name, settings);
-            if (this._completer) {
-                this._completer.requestCompletion = this._requestCompletion;
+        this._providerRegistry.providerChanged.connect(() => {
+            if (this.completer) {
+                this.completer.requestCompletion = this._requestCompletion;
             }
-            this._name = this._completer === null ? 'None' : name;
-        }
-        catch (e) {
-            this._completer = null;
-            this._name = 'None';
-            throw e;
-        }
+        });
     }
     /**
      * Get the current completer name.
      */
     get name() {
-        return this._name;
+        return this._providerRegistry.currentName;
     }
     /**
      * Get the current completer.
      */
     get completer() {
-        return this._completer;
-    }
-    /**
-     * Get the LLM completer.
-     */
-    get llmCompleter() {
-        var _a;
-        return ((_a = this._completer) === null || _a === void 0 ? void 0 : _a.provider) || null;
+        return this._providerRegistry.currentCompleter;
     }
     async fetch(request, context) {
         var _a;
-        return (_a = this._completer) === null || _a === void 0 ? void 0 : _a.fetch(request, context);
+        return (_a = this.completer) === null || _a === void 0 ? void 0 : _a.fetch(request, context);
     }
 }

package/lib/{llm-models/anthropic-completer.d.ts → default-providers/Anthropic/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class AnthropicCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/anthropic-completer.js → default-providers/Anthropic/completer.js}

@@ -1,6 +1,6 @@
 import { ChatAnthropic } from '@langchain/anthropic';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class AnthropicCompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;

package/lib/{llm-models/chrome-completer.d.ts → default-providers/ChromeAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { LLM } from '@langchain/core/language_models/llms';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class ChromeCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     /**

package/lib/{llm-models/chrome-completer.js → default-providers/ChromeAI/completer.js}

@@ -1,6 +1,6 @@
 import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 /**
  * Regular expression to match the '```' string at the start of a string.
  * So the completions returned by the LLM can still be kept after removing the code block formatting.

package/lib/default-providers/ChromeAI/instructions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\n<i class=\"fas fa-exclamation-triangle\"></i> Support for ChromeAI is still experimental and only available in Google Chrome.\n\nYou can test ChromeAI is enabled in your browser by going to the following URL: <https://chromeai.org/>\n\nEnable the proper flags in Google Chrome.\n\n- chrome://flags/#prompt-api-for-gemini-nano\n  - Select: `Enabled`\n- chrome://flags/#optimization-guide-on-device-model\n  - Select: `Enabled BypassPrefRequirement`\n- chrome://components\n  - Click `Check for Update` on Optimization Guide On Device Model to download the model\n- [Optional] chrome://flags/#text-safety-classifier\n\n<img src=\"https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c\" alt=\"A screenshot showing how to enable the ChromeAI flag in Google Chrome\" width=\"500px\">\n\nThen restart Chrome for these changes to take effect.\n\n<i class=\"fas fa-exclamation-triangle\"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).\nDuring the download, ChromeAI may not be available via the extension.\n\n<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i> For more information about Chrome Built-in AI: <https://developer.chrome.com/docs/ai/get-started>\n";
+export default _default;

package/lib/default-providers/ChromeAI/instructions.js

@@ -0,0 +1,24 @@
+export default `
+<i class="fas fa-exclamation-triangle"></i> Support for ChromeAI is still experimental and only available in Google Chrome.
+
+You can test ChromeAI is enabled in your browser by going to the following URL: <https://chromeai.org/>
+
+Enable the proper flags in Google Chrome.
+
+- chrome://flags/#prompt-api-for-gemini-nano
+  - Select: \`Enabled\`
+- chrome://flags/#optimization-guide-on-device-model
+  - Select: \`Enabled BypassPrefRequirement\`
+- chrome://components
+  - Click \`Check for Update\` on Optimization Guide On Device Model to download the model
+- [Optional] chrome://flags/#text-safety-classifier
+
+<img src="https://github.com/user-attachments/assets/d48f46cc-52ee-4ce5-9eaf-c763cdbee04c" alt="A screenshot showing how to enable the ChromeAI flag in Google Chrome" width="500px">
+
+Then restart Chrome for these changes to take effect.
+
+<i class="fas fa-exclamation-triangle"></i> On first use, Chrome will download the on-device model, which can be as large as 22GB (according to their docs and at the time of writing).
+During the download, ChromeAI may not be available via the extension.
+
+<i class="fa fa-info-circle" aria-hidden="true"></i> For more information about Chrome Built-in AI: <https://developer.chrome.com/docs/ai/get-started>
+`;

package/lib/{llm-models/codestral-completer.d.ts → default-providers/MistralAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class CodestralCompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/codestral-completer.js → default-providers/MistralAI/completer.js}

@@ -1,7 +1,7 @@
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatMistralAI } from '@langchain/mistralai';
 import { Throttler } from '@lumino/polling';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 /**
  * The Mistral API has a rate limit of 1 request per second
  */

package/lib/default-providers/MistralAI/instructions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\n<i class=\"fas fa-exclamation-triangle\"></i> This extension is still very much experimental. It is not an official MistralAI extension.\n\n1. Go to <https://console.mistral.ai/api-keys/> and create an API key.\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png\" alt=\"Screenshot showing how to create an API key\" width=\"500px\">\n\n2. Open the JupyterLab settings and go to the **Ai providers** section to select the `MistralAI`\n   provider and the API key (required).\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png\" alt=\"Screenshot showing how to add the API key to the settings\" width=\"500px\">\n\n3. Open the chat, or use the inline completer\n\n    <img src=\"https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png\" alt=\"Screenshot showing how to use the chat\" width=\"500px\">\n";
+export default _default;

package/lib/default-providers/MistralAI/instructions.js

@@ -0,0 +1,16 @@
+export default `
+<i class="fas fa-exclamation-triangle"></i> This extension is still very much experimental. It is not an official MistralAI extension.
+
+1. Go to <https://console.mistral.ai/api-keys/> and create an API key.
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/1-api-key.png" alt="Screenshot showing how to create an API key" width="500px">
+
+2. Open the JupyterLab settings and go to the **Ai providers** section to select the \`MistralAI\`
+   provider and the API key (required).
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/2-jupyterlab-settings.png" alt="Screenshot showing how to add the API key to the settings" width="500px">
+
+3. Open the chat, or use the inline completer
+
+    <img src="https://raw.githubusercontent.com/jupyterlite/ai/refs/heads/main/img/3-usage.png" alt="Screenshot showing how to use the chat" width="500px">
+`;

package/lib/{llm-models/openai-completer.d.ts → default-providers/OpenAI/completer.d.ts}

@@ -1,6 +1,6 @@
 import { CompletionHandler, IInlineCompletionContext } from '@jupyterlab/completer';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
 export declare class OpenAICompleter implements IBaseCompleter {
     constructor(options: BaseCompleter.IOptions);
     get provider(): BaseChatModel;

package/lib/{llm-models/openai-completer.js → default-providers/OpenAI/completer.js}

@@ -1,6 +1,6 @@
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatOpenAI } from '@langchain/openai';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 export class OpenAICompleter {
     constructor(options) {
         this._prompt = COMPLETION_SYSTEM_PROMPT;

package/lib/default-providers/index.d.ts

@@ -0,0 +1,2 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+export declare const defaultProviderPlugins: JupyterFrontEndPlugin<void>[];

package/lib/default-providers/index.js

@@ -0,0 +1,60 @@
+import { ChatAnthropic } from '@langchain/anthropic';
+import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
+import { ChatMistralAI } from '@langchain/mistralai';
+import { ChatOpenAI } from '@langchain/openai';
+import { IAIProviderRegistry } from '../tokens';
+// Import completers
+import { AnthropicCompleter } from './Anthropic/completer';
+import { ChromeCompleter } from './ChromeAI/completer';
+import { CodestralCompleter } from './MistralAI/completer';
+import { OpenAICompleter } from './OpenAI/completer';
+// Import Settings
+import AnthropicSettings from './Anthropic/settings-schema.json';
+import ChromeAISettings from './ChromeAI/settings-schema.json';
+import MistralAISettings from './MistralAI/settings-schema.json';
+import OpenAISettings from './OpenAI/settings-schema.json';
+// Import instructions
+import ChromeAIInstructions from './ChromeAI/instructions';
+import MistralAIInstructions from './MistralAI/instructions';
+// Build the AIProvider list
+const AIProviders = [
+    {
+        name: 'Anthropic',
+        chatModel: ChatAnthropic,
+        completer: AnthropicCompleter,
+        settingsSchema: AnthropicSettings,
+        errorMessage: (error) => error.error.error.message
+    },
+    {
+        name: 'ChromeAI',
+        // TODO: fix
+        // @ts-expect-error: missing properties
+        chatModel: ChromeAI,
+        completer: ChromeCompleter,
+        instructions: ChromeAIInstructions,
+        settingsSchema: ChromeAISettings
+    },
+    {
+        name: 'MistralAI',
+        chatModel: ChatMistralAI,
+        completer: CodestralCompleter,
+        instructions: MistralAIInstructions,
+        settingsSchema: MistralAISettings
+    },
+    {
+        name: 'OpenAI',
+        chatModel: ChatOpenAI,
+        completer: OpenAICompleter,
+        settingsSchema: OpenAISettings
+    }
+];
+export const defaultProviderPlugins = AIProviders.map(provider => {
+    return {
+        id: `@jupyterlite/ai:${provider.name}`,
+        autoStart: true,
+        requires: [IAIProviderRegistry],
+        activate: (app, registry) => {
+            registry.add(provider);
+        }
+    };
+});

package/lib/index.d.ts

@@ -1,5 +1,5 @@
-import { IAutocompletionRegistry } from '@jupyter/chat';
+import { IChatCommandRegistry } from '@jupyter/chat';
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { IAIProvider } from './token';
-declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IAutocompletionRegistry> | JupyterFrontEndPlugin<IAIProvider>)[];
+import { IAIProviderRegistry } from './tokens';
+declare const _default: (JupyterFrontEndPlugin<void> | JupyterFrontEndPlugin<IChatCommandRegistry> | JupyterFrontEndPlugin<IAIProviderRegistry>)[];
 export default _default;

package/lib/index.js

@@ -1,46 +1,35 @@
-import { ActiveCellManager, AutocompletionRegistry, buildChatSidebar, buildErrorWidget, IAutocompletionRegistry } from '@jupyter/chat';
+import { ActiveCellManager, buildChatSidebar, buildErrorWidget, ChatCommandRegistry, IChatCommandRegistry } from '@jupyter/chat';
 import { IThemeManager } from '@jupyterlab/apputils';
 import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { IFormRendererRegistry } from '@jupyterlab/ui-components';
+import { ISecretsManager } from 'jupyter-secrets-manager';
 import { ChatHandler } from './chat-handler';
-import { getSettings } from './llm-models';
-import { AIProvider } from './provider';
-import { renderSlashCommandOption } from './slash-commands';
-import { IAIProvider } from './token';
-const autocompletionRegistryPlugin = {
+import { CompletionProvider } from './completion-provider';
+import { defaultProviderPlugins } from './default-providers';
+import { AIProviderRegistry } from './provider';
+import { aiSettingsRenderer } from './settings/panel';
+import { IAIProviderRegistry } from './tokens';
+const chatCommandRegistryPlugin = {
     id: '@jupyterlite/ai:autocompletion-registry',
     description: 'Autocompletion registry',
     autoStart: true,
-    provides: IAutocompletionRegistry,
+    provides: IChatCommandRegistry,
     activate: () => {
-        const autocompletionRegistry = new AutocompletionRegistry();
-        const options = ['/clear'];
-        const autocompletionCommands = {
-            opener: '/',
-            commands: options.map(option => {
-                return {
-                    id: option.slice(1),
-                    label: option,
-                    description: 'Clear the chat window'
-                };
-            }),
-            props: {
-                renderOption: renderSlashCommandOption
-            }
-        };
-        autocompletionRegistry.add('jupyterlite-ai', autocompletionCommands);
-        return autocompletionRegistry;
+        const registry = new ChatCommandRegistry();
+        registry.addProvider(new ChatHandler.ClearCommandProvider());
+        return registry;
     }
 };
 const chatPlugin = {
     id: '@jupyterlite/ai:chat',
     description: 'LLM chat extension',
     autoStart: true,
-    requires: [IAIProvider, IRenderMimeRegistry, IAutocompletionRegistry],
+    requires: [IAIProviderRegistry, IRenderMimeRegistry, IChatCommandRegistry],
     optional: [INotebookTracker, ISettingRegistry, IThemeManager],
-    activate: async (app, aiProvider, rmRegistry, autocompletionRegistry, notebookTracker, settingsRegistry, themeManager) => {
+    activate: async (app, providerRegistry, rmRegistry, chatCommandRegistry, notebookTracker, settingsRegistry, themeManager) => {
         let activeCellManager = null;
         if (notebookTracker) {
             activeCellManager = new ActiveCellManager({
@@ -49,8 +38,8 @@ const chatPlugin = {
             });
         }
         const chatHandler = new ChatHandler({
-            aiProvider: aiProvider,
-            activeCellManager: activeCellManager
+            providerRegistry,
+            activeCellManager
         });
         let sendWithShiftEnter = false;
         let enableCodeToolbar = true;
@@ -82,7 +71,7 @@ const chatPlugin = {
                 model: chatHandler,
                 themeManager,
                 rmRegistry,
-                autocompletionRegistry
+                chatCommandRegistry
             });
             chatWidget.title.caption = 'Jupyterlite AI Chat';
         }
@@ -93,53 +82,51 @@ const chatPlugin = {
         console.log('Chat extension initialized');
     }
 };
-const aiProviderPlugin = {
-    id: '@jupyterlite/ai:ai-provider',
+const completerPlugin = {
+    id: '@jupyterlite/ai:completer',
     autoStart: true,
-    requires: [ICompletionProviderManager, ISettingRegistry],
-    provides: IAIProvider,
-    activate: (app, manager, settingRegistry) => {
-        const aiProvider = new AIProvider({
-            completionProviderManager: manager,
+    requires: [IAIProviderRegistry, ICompletionProviderManager],
+    activate: (app, providerRegistry, manager) => {
+        const completer = new CompletionProvider({
+            providerRegistry,
             requestCompletion: () => app.commands.execute('inline-completer:invoke')
         });
-        let currentProvider = 'None';
+        manager.registerInlineProvider(completer);
+    }
+};
+const providerRegistryPlugin = {
+    id: '@jupyterlite/ai:provider-registry',
+    autoStart: true,
+    requires: [IFormRendererRegistry, ISettingRegistry],
+    optional: [IRenderMimeRegistry, ISecretsManager],
+    provides: IAIProviderRegistry,
+    activate: (app, editorRegistry, settingRegistry, rmRegistry, secretsManager) => {
+        const providerRegistry = new AIProviderRegistry();
+        editorRegistry.addRenderer('@jupyterlite/ai:provider-registry.AIprovider', aiSettingsRenderer({ providerRegistry, rmRegistry, secretsManager }));
         settingRegistry
-            .load(aiProviderPlugin.id)
+            .load(providerRegistryPlugin.id)
             .then(settings => {
             const updateProvider = () => {
-                const provider = settings.get('provider').composite;
-                if (provider !== currentProvider) {
-                    // Update the settings panel.
-                    currentProvider = provider;
-                    const settingsProperties = settings.schema.properties;
-                    if (settingsProperties) {
-                        const schemaKeys = Object.keys(settingsProperties);
-                        schemaKeys.forEach(key => {
-                            var _a;
-                            if (key !== 'provider') {
-                                (_a = settings.schema.properties) === null || _a === void 0 ? true : delete _a[key];
-                            }
-                        });
-                        const properties = getSettings(provider);
-                        if (properties === null) {
-                            return;
-                        }
-                        Object.entries(properties).forEach(([name, value], index) => {
-                            settingsProperties[name] = value;
-                        });
-                    }
-                }
+                var _a;
                 // Update the settings to the AI providers.
-                aiProvider.setModels(provider, settings.composite);
+                const providerSettings = ((_a = settings.get('AIprovider').composite) !== null && _a !== void 0 ? _a : {
+                    provider: 'None'
+                });
+                providerRegistry.setProvider(providerSettings.provider, providerSettings);
             };
             settings.changed.connect(() => updateProvider());
             updateProvider();
         })
             .catch(reason => {
-            console.error(`Failed to load settings for ${aiProviderPlugin.id}`, reason);
+            console.error(`Failed to load settings for ${providerRegistryPlugin.id}`, reason);
         });
-        return aiProvider;
+        return providerRegistry;
     }
 };
-export default [chatPlugin, autocompletionRegistryPlugin, aiProviderPlugin];
+export default [
+    providerRegistryPlugin,
+    chatCommandRegistryPlugin,
+    chatPlugin,
+    completerPlugin,
+    ...defaultProviderPlugins
+];