@jupyterlite/ai 0.3.0 → 0.5.0

package/lib/tokens.d.ts

@@ -0,0 +1,103 @@
+import { BaseChatModel } from '@langchain/core/language_models/chat_models';
+import { ReadonlyPartialJSONObject, Token } from '@lumino/coreutils';
+import { ISignal } from '@lumino/signaling';
+import { JSONSchema7 } from 'json-schema';
+import { IBaseCompleter } from './base-completer';
+export interface IDict<T = any> {
+    [key: string]: T;
+}
+export interface IType<T> {
+    new (...args: any[]): T;
+}
+/**
+ * The provider interface.
+ */
+export interface IAIProvider {
+    /**
+     * The name of the provider.
+     */
+    name: string;
+    /**
+     * The chat model class to use.
+     */
+    chatModel?: IType<BaseChatModel>;
+    /**
+     * The completer class to use.
+     */
+    completer?: IType<IBaseCompleter>;
+    /**
+     * the settings schema for the provider.
+     */
+    settingsSchema?: any;
+    /**
+     * The instructions to be displayed in the settings, as helper to use the provider.
+     * A markdown renderer is used to render the instructions.
+     */
+    instructions?: string;
+    /**
+     * A function that extract the error message from the provider API error.
+     * Default to `(error) => error.message`.
+     */
+    errorMessage?: (error: any) => string;
+}
+/**
+ * The provider registry interface.
+ */
+export interface IAIProviderRegistry {
+    /**
+     * Get the list of provider names.
+     */
+    readonly providers: string[];
+    /**
+     * Add a new provider.
+     */
+    add(provider: IAIProvider): void;
+    /**
+     * Get the current provider name.
+     */
+    currentName: string;
+    /**
+     * Get the current completer of the completion provider.
+     */
+    currentCompleter: IBaseCompleter | null;
+    /**
+     * Get the current llm chat model.
+     */
+    currentChatModel: BaseChatModel | null;
+    /**
+     * Get the settings schema of a given provider.
+     */
+    getSettingsSchema(provider: string): JSONSchema7;
+    /**
+     * Get the instructions of a given provider.
+     */
+    getInstructions(provider: string): string | undefined;
+    /**
+     * Format an error message from the current provider.
+     */
+    formatErrorMessage(error: any): string;
+    /**
+     * Set the providers (chat model and completer).
+     * Creates the providers if the name has changed, otherwise only updates their config.
+     *
+     * @param name - the name of the provider to use.
+     * @param settings - the settings for the models.
+     */
+    setProvider(name: string, settings: ReadonlyPartialJSONObject): void;
+    /**
+     * A signal emitting when the provider or its settings has changed.
+     */
+    readonly providerChanged: ISignal<IAIProviderRegistry, void>;
+    /**
+     * Get the current chat error;
+     */
+    readonly chatError: string;
+    /**
+     * get the current completer error.
+     */
+    readonly completerError: string;
+}
+/**
+ * The provider registry token.
+ */
+export declare const IAIProviderRegistry: Token<IAIProviderRegistry>;

package/lib/tokens.js

@@ -0,0 +1,5 @@
+import { Token } from '@lumino/coreutils';
+/**
+ * The provider registry token.
+ */
+export const IAIProviderRegistry = new Token('@jupyterlite/ai:provider-registry', 'Provider for chat and completion LLM provider');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jupyterlite/ai",
-    "version": "0.3.0",
+    "version": "0.5.0",
     "description": "AI code completions and chat for JupyterLite",
     "keywords": [
         "jupyter",
@@ -14,7 +14,7 @@
     "license": "BSD-3-Clause",
     "author": "JupyterLite Contributors",
     "files": [
-        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,md}",
         "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
         "src/**/*.{ts,tsx}",
         "schema/*.json"
@@ -27,9 +27,9 @@
         "url": "https://github.com/jupyterlite/ai.git"
     },
     "scripts": {
-        "build": "node ./scripts/settings-generator.js && jlpm build:lib && jlpm build:labextension:dev",
+        "build": "jlpm build:lib && jlpm build:labextension:dev",
         "build:dev": "jlpm build:lib && jlpm build:labextension:dev",
-        "build:prod": "node ./scripts/settings-generator.js && jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+        "build:prod": "jlpm settings:build && jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
         "build:labextension": "jupyter labextension build .",
         "build:labextension:dev": "jupyter labextension build --development True .",
         "build:lib": "tsc --sourceMap",
@@ -47,6 +47,8 @@
         "prettier": "jlpm prettier:base --write --list-different",
         "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
         "prettier:check": "jlpm prettier:base --check",
+        "settings:build": "node ./scripts/settings-checker.js --generate",
+        "settings:check": "node ./scripts/settings-checker.js",
         "stylelint": "jlpm stylelint:check --fix",
         "stylelint:check": "stylelint --cache \"style/**/*.css\"",
         "watch": "run-p watch:src watch:labextension",
@@ -54,13 +56,14 @@
         "watch:labextension": "jupyter labextension watch ."
     },
     "dependencies": {
-        "@jupyter/chat": "^0.7.1",
+        "@jupyter/chat": "^0.8.1",
         "@jupyterlab/application": "^4.4.0-alpha.0",
         "@jupyterlab/apputils": "^4.5.0-alpha.0",
         "@jupyterlab/completer": "^4.4.0-alpha.0",
         "@jupyterlab/notebook": "^4.4.0-alpha.0",
         "@jupyterlab/rendermime": "^4.4.0-alpha.0",
         "@jupyterlab/settingregistry": "^4.4.0-alpha.0",
+        "@jupyterlab/ui-components": "^4.4.0-alpha.0",
         "@langchain/anthropic": "^0.3.9",
         "@langchain/community": "^0.3.31",
         "@langchain/core": "^0.3.40",
@@ -71,6 +74,10 @@
         "@lumino/signaling": "^2.1.2",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.0",
+        "@rjsf/core": "^4.2.0",
+        "@rjsf/utils": "^5.18.4",
+        "@rjsf/validator-ajv8": "^5.18.4",
+        "jupyter-secrets-manager": "^0.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },

package/schema/provider-registry.json

@@ -0,0 +1,23 @@
+{
+  "title": "AI provider",
+  "description": "Provider registry settings",
+  "jupyter.lab.setting-icon": "@jupyterlite/ai:jupyternaut-lite",
+  "jupyter.lab.setting-icon-label": "JupyterLite AI Chat",
+  "type": "object",
+  "properties": {
+    "UseSecretsManager": {
+      "type": "boolean",
+      "title": "Use secrets manager",
+      "description": "Whether to use or not the secrets manager. If not, secrets will be stored in the browser (local storage)",
+      "default": true
+    },
+    "AIprovider": {
+      "type": "object",
+      "title": "AI provider",
+      "description": "The AI provider configuration",
+      "default": {},
+      "additionalProperties": true
+    }
+  },
+  "additionalProperties": false
+}

package/src/chat-handler.ts

@@ -4,9 +4,12 @@
  */
 
 import {
+  ChatCommand,
   ChatModel,
+  IChatCommandProvider,
   IChatHistory,
   IChatMessage,
+  IInputModel,
   INewMessage
 } from '@jupyter/chat';
 import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
@@ -17,9 +20,8 @@ import {
   SystemMessage
 } from '@langchain/core/messages';
 import { UUID } from '@lumino/coreutils';
-import { getErrorMessage } from './llm-models';
 import { chatSystemPrompt } from './provider';
-import { IAIProvider } from './token';
+import { IAIProviderRegistry } from './tokens';
 import { jupyternautLiteIcon } from './icons';
 
 /**
@@ -37,17 +39,21 @@ export type ConnectionMessage = {
 export class ChatHandler extends ChatModel {
   constructor(options: ChatHandler.IOptions) {
     super(options);
-    this._aiProvider = options.aiProvider;
-    this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
+    this._providerRegistry = options.providerRegistry;
+    this._prompt = chatSystemPrompt({
+      provider_name: this._providerRegistry.currentName
+    });
 
-    this._aiProvider.modelChange.connect(() => {
-      this._errorMessage = this._aiProvider.chatError;
-      this._prompt = chatSystemPrompt({ provider_name: this._aiProvider.name });
+    this._providerRegistry.providerChanged.connect(() => {
+      this._errorMessage = this._providerRegistry.chatError;
+      this._prompt = chatSystemPrompt({
+        provider_name: this._providerRegistry.currentName
+      });
     });
   }
 
   get provider(): BaseChatModel | null {
-    return this._aiProvider.chatModel;
+    return this._providerRegistry.currentChatModel;
   }
 
   /**
@@ -95,7 +101,7 @@ export class ChatHandler extends ChatModel {
     };
     this.messageAdded(msg);
 
-    if (this._aiProvider.chatModel === null) {
+    if (this._providerRegistry.currentChatModel === null) {
       const errorMsg: IChatMessage = {
         id: UUID.uuid4(),
         body: `**${this._errorMessage ? this._errorMessage : this._defaultErrorMessage}**`,
@@ -134,7 +140,7 @@ export class ChatHandler extends ChatModel {
     let content = '';
 
     try {
-      for await (const chunk of await this._aiProvider.chatModel.stream(
+      for await (const chunk of await this._providerRegistry.currentChatModel.stream(
         messages
       )) {
         content += chunk.content ?? chunk;
@@ -144,7 +150,7 @@ export class ChatHandler extends ChatModel {
       this._history.messages.push(botMsg);
       return true;
     } catch (reason) {
-      const error = getErrorMessage(this._aiProvider.name, reason);
+      const error = this._providerRegistry.formatErrorMessage(reason);
       const errorMsg: IChatMessage = {
         id: UUID.uuid4(),
         body: `**${error}**`,
@@ -171,7 +177,7 @@ export class ChatHandler extends ChatModel {
     super.messageAdded(message);
   }
 
-  private _aiProvider: IAIProvider;
+  private _providerRegistry: IAIProviderRegistry;
   private _personaName = 'AI';
   private _prompt: string;
   private _errorMessage: string = '';
@@ -181,6 +187,37 @@ export class ChatHandler extends ChatModel {
 
 export namespace ChatHandler {
   export interface IOptions extends ChatModel.IOptions {
-    aiProvider: IAIProvider;
+    providerRegistry: IAIProviderRegistry;
+  }
+
+  export class ClearCommandProvider implements IChatCommandProvider {
+    public id: string = '@jupyterlite/ai:clear-commands';
+    private _slash_commands: ChatCommand[] = [
+      {
+        name: '/clear',
+        providerId: this.id,
+        replaceWith: '/clear',
+        description: 'Clear the chat'
+      }
+    ];
+    async getChatCommands(inputModel: IInputModel) {
+      const match = inputModel.currentWord?.match(/^\/\w*/)?.[0];
+      if (!match) {
+        return [];
+      }
+
+      const commands = this._slash_commands.filter(cmd =>
+        cmd.name.startsWith(match)
+      );
+      return commands;
+    }
+
+    async handleChatCommand(
+      command: ChatCommand,
+      inputModel: IInputModel
+    ): Promise<void> {
+      // no handling needed because `replaceWith` is set in each command.
+      return;
+    }
   }
 }

package/src/completion-provider.ts

@@ -3,10 +3,9 @@ import {
   IInlineCompletionContext,
   IInlineCompletionProvider
 } from '@jupyterlab/completer';
-import { BaseLanguageModel } from '@langchain/core/language_models/base';
-import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
-import { getCompleter, 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.
@@ -15,67 +14,44 @@ export class CompletionProvider implements IInlineCompletionProvider {
   readonly identifier = '@jupyterlite/ai';
 
   constructor(options: CompletionProvider.IOptions) {
-    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: string, settings: ReadonlyPartialJSONObject) {
-    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: any) {
-      this._completer = null;
-      this._name = 'None';
-      throw e;
-    }
+    });
   }
 
   /**
    * Get the current completer name.
    */
   get name(): string {
-    return this._name;
+    return this._providerRegistry.currentName;
   }
 
   /**
    * Get the current completer.
    */
   get completer(): IBaseCompleter | null {
-    return this._completer;
-  }
-
-  /**
-   * Get the LLM completer.
-   */
-  get llmCompleter(): BaseLanguageModel | null {
-    return this._completer?.provider || null;
+    return this._providerRegistry.currentCompleter;
   }
 
   async fetch(
     request: CompletionHandler.IRequest,
     context: IInlineCompletionContext
   ) {
-    return this._completer?.fetch(request, context);
+    return this.completer?.fetch(request, context);
   }
 
-  private _name: string = 'None';
+  private _providerRegistry: IAIProviderRegistry;
   private _requestCompletion: () => void;
-  private _completer: IBaseCompleter | null = null;
 }
 
 export namespace CompletionProvider {
-  export interface IOptions extends BaseCompleter.IOptions {
-    name: string;
+  export interface IOptions {
+    providerRegistry: IAIProviderRegistry;
     requestCompletion: () => void;
   }
 }

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

@@ -6,8 +6,8 @@ import { ChatAnthropic } from '@langchain/anthropic';
 import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 
-import { BaseCompleter, IBaseCompleter } from './base-completer';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 export class AnthropicCompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {

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

@@ -5,8 +5,9 @@ import {
 import { ChromeAI } from '@langchain/community/experimental/llms/chrome_ai';
 import { LLM } from '@langchain/core/language_models/llms';
 import { HumanMessage, SystemMessage } from '@langchain/core/messages';
-import { BaseCompleter, IBaseCompleter } from './base-completer';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 /**
  * Regular expression to match the '```' string at the start of a string.

package/src/default-providers/ChromeAI/instructions.ts

@@ -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/src/{llm-models/codestral-completer.ts → default-providers/MistralAI/completer.ts}

@@ -11,8 +11,8 @@ import {
 import { ChatMistralAI } from '@langchain/mistralai';
 import { Throttler } from '@lumino/polling';
 
-import { BaseCompleter, IBaseCompleter } from './base-completer';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 /**
  * The Mistral API has a rate limit of 1 request per second

package/src/default-providers/MistralAI/instructions.ts

@@ -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/src/{llm-models/openai-completer.ts → default-providers/OpenAI/completer.ts}

@@ -6,8 +6,8 @@ import { BaseChatModel } from '@langchain/core/language_models/chat_models';
 import { AIMessage, SystemMessage } from '@langchain/core/messages';
 import { ChatOpenAI } from '@langchain/openai';
 
-import { BaseCompleter, IBaseCompleter } from './base-completer';
-import { COMPLETION_SYSTEM_PROMPT } from '../provider';
+import { BaseCompleter, IBaseCompleter } from '../../base-completer';
+import { COMPLETION_SYSTEM_PROMPT } from '../../provider';
 
 export class OpenAICompleter implements IBaseCompleter {
   constructor(options: BaseCompleter.IOptions) {

package/src/default-providers/index.ts

@@ -0,0 +1,71 @@
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+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 { IAIProvider, 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: IAIProvider[] = [
+  {
+    name: 'Anthropic',
+    chatModel: ChatAnthropic,
+    completer: AnthropicCompleter,
+    settingsSchema: AnthropicSettings,
+    errorMessage: (error: any) => 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: JupyterFrontEndPlugin<void>[] =
+  AIProviders.map(provider => {
+    return {
+      id: `@jupyterlite/ai:${provider.name}`,
+      autoStart: true,
+      requires: [IAIProviderRegistry],
+      activate: (app: JupyterFrontEnd, registry: IAIProviderRegistry) => {
+        registry.add(provider);
+      }
+    };
+  });