@notebook-intelligence/notebook-intelligence 3.1.0 → 4.1.0

package/README.md

@@ -4,6 +4,27 @@ Notebook Intelligence (NBI) is an AI coding assistant and extensible AI framewor
 
 ## Feature Highlights
 
+### Claude Mode
+
+Notebook Intelligence provides a dedicated mode for [Claude Code](https://code.claude.com/) integration. In **Claude mode**, NBI uses Claude Code for AI Agent Chat UI and Claude models for inline chat (in editors) and auto-complete suggestions.
+
+This integration brings the AI tools and features supported by Claude Code such as built-in tools, skills, MCP servers, custom commands and many more to JupyterLab.
+
+<img src="media/claude-chat.png" alt="Claude mode" width=500 />
+
+#### Claude Configuration
+
+You can configure the Claude settings in the NBI Settings dialog. You can access this dialog by using the gear icon in the NBI Chat UI or from JupyterLab Settings menu -> Notebook Intelligence Settings. Toggle the `Enable Claude mode` option to enable Claude mode. The other options are as follows:
+
+- **Chat model**: Select the Claude model to use for Agent Chat UI and inline chat.
+- **Auto-complete model**: Select the Claude model to use for auto-complete suggestions.
+- **Chat Agent setting sources**: Select the setting sources to use for Claude Code. You can choose to use user settings, project settings or both. These settings are the standard Claude Code settings such as tools, skills, MCP servers, custom commands and many more that are saved in the user's home directory and project directory. See [Claude Code documentation](https://code.claude.com/docs/en/settings) for more details.
+- **Chat Agent tools**: Select the tools to activate in the Agent Chat UI. `Claude Code tools` are always activated. `Jupyter UI tools` are the tools that are provided by NBI to interact with JupyterLab UI (authoring notebooks, running cells, etc.).
+- **API key**: Enter your Claude API key.
+- **Base URL**: Enter your Claude base URL.
+
+<img src="media/claude-settings.png" alt="Claude settings" width=700 />
+
 ### Agent Mode
 
 In Agent Mode, built-in AI agent creates, edits and executes notebooks for you interactively. It can detect issues in the cells and fix for you.

package/lib/api.d.ts

@@ -10,6 +10,15 @@ export interface IDeviceVerificationInfo {
     verificationURI: string;
     userCode: string;
 }
+export declare enum ClaudeModelType {
+    Default = "",
+    ClaudeOpus45 = "claude-opus-4-5",
+    ClaudeHaiku45 = "claude-haiku-4-5"
+}
+export declare enum ClaudeToolType {
+    ClaudeCodeTools = "claude-code:built-in-tools",
+    JupyterUITools = "nbi:built-in-jupyter-ui-tools"
+}
 export declare class NBIConfig {
     get userHomeDir(): string;
     get userConfigDir(): string;
@@ -26,6 +35,8 @@ export declare class NBIConfig {
     getMCPServer(serverId: string): any;
     getMCPServerPrompt(serverId: string, promptName: string): any;
     get mcpServerSettings(): any;
+    get claudeSettings(): any;
+    get isInClaudeCodeMode(): boolean;
     capabilities: any;
     chatParticipants: IChatParticipant[];
     changed: Signal<this, void>;

package/lib/api.js

@@ -13,6 +13,17 @@ export var GitHubCopilotLoginStatus;
     GitHubCopilotLoginStatus["LoggingIn"] = "LOGGING_IN";
     GitHubCopilotLoginStatus["LoggedIn"] = "LOGGED_IN";
 })(GitHubCopilotLoginStatus || (GitHubCopilotLoginStatus = {}));
+export var ClaudeModelType;
+(function (ClaudeModelType) {
+    ClaudeModelType["Default"] = "";
+    ClaudeModelType["ClaudeOpus45"] = "claude-opus-4-5";
+    ClaudeModelType["ClaudeHaiku45"] = "claude-haiku-4-5";
+})(ClaudeModelType || (ClaudeModelType = {}));
+export var ClaudeToolType;
+(function (ClaudeToolType) {
+    ClaudeToolType["ClaudeCodeTools"] = "claude-code:built-in-tools";
+    ClaudeToolType["JupyterUITools"] = "nbi:built-in-jupyter-ui-tools";
+})(ClaudeToolType || (ClaudeToolType = {}));
 export class NBIConfig {
     constructor() {
         this.capabilities = {};
@@ -69,6 +80,12 @@ export class NBIConfig {
     get mcpServerSettings() {
         return this.capabilities.mcp_server_settings;
     }
+    get claudeSettings() {
+        return this.capabilities.claude_settings;
+    }
+    get isInClaudeCodeMode() {
+        return this.claudeSettings.enabled === true;
+    }
 }
 class NBIAPI {
     static async initialize() {
@@ -77,7 +94,8 @@ class NBIAPI {
         NBIAPI.initializeWebsocket();
         this._messageReceived.connect((_, msg) => {
             msg = JSON.parse(msg);
-            if (msg.type === BackendMessageType.MCPServerStatusChange) {
+            if (msg.type === BackendMessageType.MCPServerStatusChange ||
+                msg.type === BackendMessageType.ClaudeCodeStatusChange) {
                 this.fetchCapabilities();
             }
             else if (msg.type === BackendMessageType.GitHubCopilotLoginStatusChange) {
@@ -116,15 +134,16 @@ class NBIAPI {
             NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.NotLoggedIn);
     }
     static getChatEnabled() {
-        return this.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
-            ? !this.getGHLoginRequired()
-            : this.config.llmProviders.find(provider => provider.id === this.config.chatModel.provider);
+        return (this.config.isInClaudeCodeMode ||
+            (this.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
+                ? !this.getGHLoginRequired()
+                : this.config.llmProviders.find(provider => provider.id === this.config.chatModel.provider)));
     }
     static getInlineCompletionEnabled() {
-        return this.config.inlineCompletionModel.provider ===
-            GITHUB_COPILOT_PROVIDER_ID
-            ? !this.getGHLoginRequired()
-            : this.config.llmProviders.find(provider => provider.id === this.config.inlineCompletionModel.provider);
+        return (this.config.isInClaudeCodeMode ||
+            (this.config.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
+                ? !this.getGHLoginRequired()
+                : this.config.llmProviders.find(provider => provider.id === this.config.inlineCompletionModel.provider)));
     }
     static async loginToGitHub() {
         this._loginStatus = GitHubCopilotLoginStatus.ActivatingDevice;

package/lib/chat-sidebar.js

@@ -4,7 +4,7 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import { UUID } from '@lumino/coreutils';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import { NBIAPI, GitHubCopilotLoginStatus } from './api';
-import { BackendMessageType, BuiltinToolsetType, ContextType, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
+import { BackendMessageType, BuiltinToolsetType, CLAUDE_CODE_CHAT_PARTICIPANT_ID, ContextType, RequestDataType, ResponseStreamDataType, TelemetryEventType } from './tokens';
 import { MarkdownRenderer as OriginalMarkdownRenderer } from './markdown-renderer';
 const MarkdownRenderer = memo(OriginalMarkdownRenderer);
 import copySvgstr from '../style/icons/copy.svg';
@@ -14,6 +14,8 @@ import { VscSend, VscStopCircle, VscEye, VscEyeClosed, VscTriangleRight, VscTria
 import { extractLLMGeneratedCode, isDarkTheme } from './utils';
 import { CheckBoxItem } from './components/checkbox';
 import { mcpServerSettingsToEnabledState } from './components/mcp-util';
+import claudeSvg from '../style/claude.svg';
+import { AskUserQuestion } from './components/ask-user-question';
 export var RunChatCompletionType;
 (function (RunChatCompletionType) {
     RunChatCompletionType[RunChatCompletionType["Chat"] = 0] = "Chat";
@@ -261,10 +263,11 @@ function ChatResponse(props) {
             ? 'Output'
             : `Output (${Math.floor(item.reasoningTime)} s)`;
     };
+    const chatParticipantId = ((_a = msg.participant) === null || _a === void 0 ? void 0 : _a.id) || 'default';
     return (React.createElement("div", { className: `chat-message chat-message-${msg.from}`, "data-render-count": renderCount },
         React.createElement("div", { className: "chat-message-header" },
             React.createElement("div", { className: "chat-message-from" },
-                ((_a = msg.participant) === null || _a === void 0 ? void 0 : _a.iconPath) && (React.createElement("div", { className: `chat-message-from-icon ${((_b = msg.participant) === null || _b === void 0 ? void 0 : _b.id) === 'default' ? 'chat-message-from-icon-default' : ''} ${isDarkTheme() ? 'dark' : ''}` },
+                ((_b = msg.participant) === null || _b === void 0 ? void 0 : _b.iconPath) && (React.createElement("div", { className: `chat-message-from-icon chat-message-from-icon-${chatParticipantId} ${isDarkTheme() ? 'dark' : ''}` },
                     React.createElement("img", { src: msg.participant.iconPath }))),
                 React.createElement("div", { className: "chat-message-from-title" }, msg.from === 'user'
                     ? 'User'
@@ -329,6 +332,32 @@ function ChatResponse(props) {
                                     runCommand('notebook-intelligence:chat-user-input', item.content.cancelArgs);
                                 } },
                                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, item.content.cancelLabel))));
+                    case ResponseStreamDataType.AskUserQuestion:
+                        return answeredForms.get(item.id) ===
+                            'confirmed' ? null : answeredForms.get(item.id) ===
+                            'canceled' ? (React.createElement("div", null, "\u2716 Canceled")) : (React.createElement("div", { className: "chat-confirmation-form ask-user-question", key: `key-${index}` },
+                            React.createElement(AskUserQuestion, { userQuestions: item, onSubmit: (selectedAnswers) => {
+                                    markFormConfirmed(item.id);
+                                    runCommand('notebook-intelligence:chat-user-input', {
+                                        id: item.content.identifier.id,
+                                        data: {
+                                            callback_id: item.content.identifier.callback_id,
+                                            data: {
+                                                confirmed: true,
+                                                selectedAnswers
+                                            }
+                                        }
+                                    });
+                                }, onCancel: () => {
+                                    markFormCanceled(item.id);
+                                    runCommand('notebook-intelligence:chat-user-input', {
+                                        id: item.content.identifier.id,
+                                        data: {
+                                            callback_id: item.content.identifier.callback_id,
+                                            data: { confirmed: false }
+                                        }
+                                    });
+                                } })));
                 }
                 return null;
             }),
@@ -338,15 +367,15 @@ const MemoizedChatResponse = memo(ChatResponse);
 async function submitCompletionRequest(request, responseEmitter) {
     switch (request.type) {
         case RunChatCompletionType.Chat:
-            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.currentDirectory || '', request.filename || 'Untitled.ipynb', request.additionalContext || [], request.chatMode, request.toolSelections || {}, responseEmitter);
+            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.currentDirectory || '', request.filename || '', request.additionalContext || [], request.chatMode, request.toolSelections || {}, responseEmitter);
         case RunChatCompletionType.ExplainThis:
         case RunChatCompletionType.FixThis:
         case RunChatCompletionType.ExplainThisOutput:
         case RunChatCompletionType.TroubleshootThisOutput: {
-            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.currentDirectory || '', request.filename || 'Untitled.ipynb', [], 'ask', {}, responseEmitter);
+            return NBIAPI.chatRequest(request.messageId, request.chatId, request.content, request.language || 'python', request.currentDirectory || '', request.filename || '', [], 'ask', {}, responseEmitter);
         }
         case RunChatCompletionType.GenerateCode:
-            return NBIAPI.generateCode(request.chatId, request.content, request.prefix || '', request.suffix || '', request.existingCode || '', request.language || 'python', request.filename || 'Untitled.ipynb', responseEmitter);
+            return NBIAPI.generateCode(request.chatId, request.content, request.prefix || '', request.suffix || '', request.existingCode || '', request.language || 'python', request.filename || '', responseEmitter);
     }
 }
 function SidebarComponent(props) {
@@ -689,23 +718,36 @@ function SidebarComponent(props) {
     useEffect(() => {
         var _a;
         const prefixes = [];
-        if (chatMode === 'ask') {
-            const chatParticipants = NBIAPI.config.chatParticipants;
-            for (const participant of chatParticipants) {
-                const id = participant.id;
-                const commands = participant.commands;
-                const participantPrefix = id === 'default' ? '' : `@${id}`;
-                if (participantPrefix !== '') {
-                    prefixes.push(participantPrefix);
-                }
-                const commandPrefix = participantPrefix === '' ? '' : `${participantPrefix} `;
+        if (NBIAPI.config.isInClaudeCodeMode) {
+            const claudeChatParticipant = NBIAPI.config.chatParticipants.find(participant => participant.id === CLAUDE_CODE_CHAT_PARTICIPANT_ID);
+            if (claudeChatParticipant) {
+                const commands = claudeChatParticipant.commands;
                 for (const command of commands) {
-                    prefixes.push(`${commandPrefix}/${command}`);
+                    prefixes.push(`/${command}`);
                 }
             }
+            prefixes.push('/enter-plan-mode');
+            prefixes.push('/exit-plan-mode');
         }
         else {
-            prefixes.push('/clear');
+            if (chatMode === 'ask') {
+                const chatParticipants = NBIAPI.config.chatParticipants;
+                for (const participant of chatParticipants) {
+                    const id = participant.id;
+                    const commands = participant.commands;
+                    const participantPrefix = id === 'default' ? '' : `@${id}`;
+                    if (participantPrefix !== '') {
+                        prefixes.push(participantPrefix);
+                    }
+                    const commandPrefix = participantPrefix === '' ? '' : `${participantPrefix} `;
+                    for (const command of commands) {
+                        prefixes.push(`${commandPrefix}/${command}`);
+                    }
+                }
+            }
+            else {
+                prefixes.push('/clear');
+            }
         }
         const mcpServers = NBIAPI.config.toolConfig.mcpServers;
         const mcpServerSettings = NBIAPI.config.mcpServerSettings;
@@ -1289,7 +1331,7 @@ function SidebarComponent(props) {
                         }, title: "Select chat participant" }, "@"))),
                 React.createElement("div", { style: { flexGrow: 1 } }),
                 React.createElement("div", { className: "chat-mode-widgets-container" },
-                    React.createElement("div", null,
+                    !NBIAPI.config.isInClaudeCodeMode && (React.createElement("div", null,
                         React.createElement("select", { className: "chat-mode-select", title: "Chat mode", value: chatMode, onChange: event => {
                                 if (event.target.value === 'ask') {
                                     setToolSelections(toolSelectionsEmpty);
@@ -1298,12 +1340,13 @@ function SidebarComponent(props) {
                                 setChatMode(event.target.value);
                             } },
                             React.createElement("option", { value: "ask" }, "Ask"),
-                            React.createElement("option", { value: "agent" }, "Agent"))),
-                    chatMode !== 'ask' && (React.createElement("div", { className: `user-input-footer-button tools-button ${unsafeToolSelected ? 'tools-button-warning' : selectedToolCount > 0 ? 'tools-button-active' : ''}`, onClick: () => handleChatToolsButtonClick(), title: unsafeToolSelected
+                            React.createElement("option", { value: "agent" }, "Agent")))),
+                    chatMode !== 'ask' && !NBIAPI.config.isInClaudeCodeMode && (React.createElement("div", { className: `user-input-footer-button tools-button ${unsafeToolSelected ? 'tools-button-warning' : selectedToolCount > 0 ? 'tools-button-active' : ''}`, onClick: () => handleChatToolsButtonClick(), title: unsafeToolSelected
                             ? `Tool selection can cause irreversible changes! Review each tool execution carefully.\n${toolSelectionTitle}`
                             : toolSelectionTitle },
                         React.createElement(VscTools, null),
-                        selectedToolCount > 0 && React.createElement(React.Fragment, null, selectedToolCount)))),
+                        selectedToolCount > 0 && React.createElement(React.Fragment, null, selectedToolCount))),
+                    NBIAPI.config.isInClaudeCodeMode && (React.createElement("span", { title: "Claude mode", className: "claude-icon", dangerouslySetInnerHTML: { __html: claudeSvg } }))),
                 React.createElement("div", null,
                     React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled send-button", onClick: () => handleSubmitStopChatButtonClick(), disabled: prompt.length === 0 && !copilotRequestInProgress }, copilotRequestInProgress ? React.createElement(VscStopCircle, null) : React.createElement(VscSend, null)))),
             showPopover && prefixSuggestions.length > 0 && (React.createElement("div", { className: "user-input-autocomplete" }, prefixSuggestions.map((prefix, index) => (React.createElement("div", { key: `key-${index}`, className: `user-input-autocomplete-item ${index === selectedPrefixSuggestionIndex ? 'selected' : ''}`, "data-value": prefix, onClick: event => prefixSuggestionSelected(event) }, prefix))))),
@@ -1445,7 +1488,7 @@ function InlinePromptComponent(props) {
             type: RunChatCompletionType.GenerateCode,
             content: prompt,
             language: props.language || 'python',
-            filename: props.filename || 'Untitled.ipynb',
+            filename: props.filename || '',
             prefix: props.prefix,
             suffix: props.suffix,
             existingCode: props.existingCode,

package/lib/components/ask-user-question.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function AskUserQuestion(props: any): React.JSX.Element;

package/lib/components/ask-user-question.js

@@ -0,0 +1,58 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+import React, { useState } from 'react';
+export function AskUserQuestion(props) {
+    const userQuestions = props.userQuestions.content;
+    const [selectedAnswers, setSelectedAnswers] = useState({});
+    const onOptionSelected = (question, option) => {
+        var _a, _b, _c;
+        if (question.multiSelect) {
+            if ((_a = selectedAnswers[question.question]) === null || _a === void 0 ? void 0 : _a.includes(option.label)) {
+                setSelectedAnswers({
+                    ...selectedAnswers,
+                    [question.question]: ((_b = selectedAnswers[question.question]) !== null && _b !== void 0 ? _b : []).filter((o) => o !== option.label)
+                });
+            }
+            else {
+                setSelectedAnswers({
+                    ...selectedAnswers,
+                    [question.question]: [
+                        ...((_c = selectedAnswers[question.question]) !== null && _c !== void 0 ? _c : []),
+                        option.label
+                    ]
+                });
+            }
+        }
+        else {
+            setSelectedAnswers({
+                ...selectedAnswers,
+                [question.question]: [option.label]
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        userQuestions.title ? (React.createElement("div", null,
+            React.createElement("b", null, userQuestions.title))) : null,
+        userQuestions.message ? React.createElement("div", null, userQuestions.message) : null,
+        userQuestions.questions.map((question) => (React.createElement("div", { className: "ask-user-question-container", key: question.question },
+            React.createElement("form", { className: "ask-user-question-form" },
+                React.createElement("div", { className: "ask-user-question-question" }, question.question),
+                React.createElement("div", { className: "ask-user-question-header" }, question.header),
+                React.createElement("div", { className: "ask-user-question-options" }, question.options.map((option) => {
+                    var _a, _b;
+                    return (React.createElement("div", { className: "ask-user-question-option", key: option.label },
+                        React.createElement("div", { className: "ask-user-question-option-input-container" },
+                            React.createElement("input", { id: option.label, type: "checkbox", checked: (_b = (_a = selectedAnswers[question.question]) === null || _a === void 0 ? void 0 : _a.includes(option.label)) !== null && _b !== void 0 ? _b : false, onChange: () => onOptionSelected(question, option) }),
+                            React.createElement("label", { htmlFor: option.label, className: "ask-user-question-option-label-container" },
+                                React.createElement("div", { className: "ask-user-question-option-label" }, option.label),
+                                React.createElement("div", { className: "ask-user-question-option-description" }, option.description)))));
+                })))))),
+        React.createElement("div", { className: "ask-user-question-footer" },
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => {
+                    props.onSubmit(selectedAnswers);
+                } },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, userQuestions.submitLabel)),
+            React.createElement("button", { className: "jp-Dialog-button jp-mod-reject jp-mod-styled", onClick: () => {
+                    props.onCancel();
+                } },
+                React.createElement("div", { className: "jp-Dialog-buttonLabel" }, userQuestions.cancelLabel)))));
+}

package/lib/components/checkbox.js

@@ -3,9 +3,14 @@ import React from 'react';
 import { MdOutlineCheckBoxOutlineBlank, MdCheckBox } from 'react-icons/md';
 export function CheckBoxItem(props) {
     const indent = props.indent || 0;
-    return (React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`, title: props.tooltip || props.title || '', onClick: event => props.onClick(event) },
+    const disabled = props.disabled || false;
+    return (React.createElement("div", { className: `checkbox-item checkbox-item-indent-${indent} ${props.header ? 'checkbox-item-header' : ''}`, title: props.tooltip || props.title || '', onClick: event => {
+            if (!disabled) {
+                props.onClick(event);
+            }
+        } },
         React.createElement("div", { className: "checkbox-item-toggle" },
-            props.checked ? (React.createElement(MdCheckBox, { className: "checkbox-icon" })) : (React.createElement(MdOutlineCheckBoxOutlineBlank, { className: "checkbox-icon" })),
-            props.label),
+            props.checked ? (React.createElement(MdCheckBox, { className: "checkbox-icon", style: { opacity: disabled ? 0.5 : 1 } })) : (React.createElement(MdOutlineCheckBoxOutlineBlank, { className: "checkbox-icon", style: { opacity: disabled ? 0.5 : 1 } })),
+            React.createElement("span", { style: { opacity: disabled ? 0.5 : 1 } }, props.label)),
         props.title && (React.createElement("div", { className: "checkbox-item-description" }, props.title))));
 }

package/lib/components/settings-panel.js

@@ -4,10 +4,11 @@ import { ReactWidget } from '@jupyterlab/apputils';
 import { VscWarning } from 'react-icons/vsc';
 import * as path from 'path';
 import copySvgstr from '../../style/icons/copy.svg';
-import { NBIAPI } from '../api';
+import { ClaudeModelType, ClaudeToolType, NBIAPI } from '../api';
 import { CheckBoxItem } from './checkbox';
 import { PillItem } from './pill';
 import { mcpServerSettingsToEnabledState } from './mcp-util';
+import claudeSvg from '../../style/claude.svg';
 const OPENAI_COMPATIBLE_CHAT_MODEL_ID = 'openai-compatible-chat-model';
 const LITELLM_COMPATIBLE_CHAT_MODEL_ID = 'litellm-compatible-chat-model';
 const OPENAI_COMPATIBLE_INLINE_COMPLETION_MODEL_ID = 'openai-compatible-inline-completion-model';
@@ -32,7 +33,8 @@ function SettingsPanelComponent(props) {
             React.createElement(SettingsPanelTabsComponent, { onTabSelected: onTabSelected, activeTab: activeTab })),
         React.createElement("div", { className: "nbi-settings-panel-tab-content" },
             activeTab === 'general' && (React.createElement(SettingsPanelComponentGeneral, { onSave: props.onSave, onEditMCPConfigClicked: props.onEditMCPConfigClicked })),
-            activeTab === 'mcp-servers' && (React.createElement(SettingsPanelComponentMCPServers, { onEditMCPConfigClicked: props.onEditMCPConfigClicked })))));
+            activeTab === 'mcp-servers' && (React.createElement(SettingsPanelComponentMCPServers, { onEditMCPConfigClicked: props.onEditMCPConfigClicked })),
+            activeTab === 'claude' && (React.createElement(SettingsPanelComponentClaude, { onEditMCPConfigClicked: props.onEditMCPConfigClicked })))));
 }
 function SettingsPanelTabsComponent(props) {
     const [activeTab, setActiveTab] = useState(props.activeTab);
@@ -41,6 +43,12 @@ function SettingsPanelTabsComponent(props) {
                 setActiveTab('general');
                 props.onTabSelected('general');
             } }, "General"),
+        React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'claude' ? 'active' : ''}`, onClick: () => {
+                setActiveTab('claude');
+                props.onTabSelected('claude');
+            } },
+            React.createElement("span", { className: "claude-icon", dangerouslySetInnerHTML: { __html: claudeSvg } }),
+            "Claude"),
         React.createElement("div", { className: `nbi-settings-panel-tab ${activeTab === 'mcp-servers' ? 'active' : ''}`, onClick: () => {
                 setActiveTab('mcp-servers');
                 props.onTabSelected('mcp-servers');
@@ -378,3 +386,136 @@ function SettingsPanelComponentMCPServers(props) {
                             React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", style: { width: 'max-content' }, onClick: props.onEditMCPConfigClicked },
                                 React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Add / Edit")))))))));
 }
+function SettingsPanelComponentClaude(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const nbiConfig = NBIAPI.config;
+    const claudeSettingsRef = useRef(nbiConfig.claudeSettings);
+    const [_renderCount, setRenderCount] = useState(1);
+    const [claudeEnabled, setClaudeEnabled] = useState(nbiConfig.isInClaudeCodeMode);
+    const [chatModel, setChatModel] = useState((_a = nbiConfig.claudeSettings.chat_model) !== null && _a !== void 0 ? _a : ClaudeModelType.Default);
+    const [inlineCompletionModel, setInlineCompletionModel] = useState((_b = nbiConfig.claudeSettings.inline_completion_model) !== null && _b !== void 0 ? _b : ClaudeModelType.Default);
+    const [apiKey, setApiKey] = useState((_c = nbiConfig.claudeSettings.api_key) !== null && _c !== void 0 ? _c : '');
+    const [baseUrl, setBaseUrl] = useState((_d = nbiConfig.claudeSettings.base_url) !== null && _d !== void 0 ? _d : '');
+    const [settingSources, setSettingSources] = useState((_e = nbiConfig.claudeSettings.setting_sources) !== null && _e !== void 0 ? _e : []);
+    const [tools, setTools] = useState((_f = nbiConfig.claudeSettings.tools) !== null && _f !== void 0 ? _f : [
+        ClaudeToolType.ClaudeCodeTools,
+        ClaudeToolType.JupyterUITools
+    ]);
+    useEffect(() => {
+        NBIAPI.configChanged.connect(() => {
+            claudeSettingsRef.current = nbiConfig.claudeSettings;
+            setRenderCount(renderCount => renderCount + 1);
+        });
+    }, []);
+    const syncSettingsToServerState = () => {
+        NBIAPI.setConfig({
+            claude_settings: {
+                enabled: claudeEnabled,
+                chat_model: chatModel,
+                inline_completion_model: inlineCompletionModel,
+                api_key: apiKey,
+                base_url: baseUrl,
+                setting_sources: settingSources,
+                tools: tools
+            }
+        });
+    };
+    useEffect(() => {
+        syncSettingsToServerState();
+    }, [
+        claudeEnabled,
+        chatModel,
+        inlineCompletionModel,
+        apiKey,
+        baseUrl,
+        settingSources,
+        tools
+    ]);
+    return (React.createElement("div", { className: "config-dialog" },
+        React.createElement("div", { className: "config-dialog-body" },
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Enable Claude mode"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("span", null,
+                            "This requires a",
+                            ' ',
+                            React.createElement("a", { href: "https://claude.ai", target: "_blank" }, "Claude"),
+                            ' ',
+                            "account and",
+                            ' ',
+                            React.createElement("a", { href: "https://code.claude.com/", target: "_blank" }, "Claude Code"),
+                            ' ',
+                            "installed in your system.")),
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Enable Claude mode", checked: claudeEnabled, onClick: () => {
+                                        setClaudeEnabled(!claudeEnabled);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Models"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Chat model"),
+                            React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setChatModel(event.target.value) },
+                                    React.createElement("option", { value: ClaudeModelType.Default, selected: chatModel === ClaudeModelType.Default }, "Default (recommended)"),
+                                    React.createElement("option", { value: ClaudeModelType.ClaudeOpus45, selected: chatModel === ClaudeModelType.ClaudeOpus45 }, "Claude Opus 4.5"),
+                                    React.createElement("option", { value: ClaudeModelType.ClaudeHaiku45, selected: chatModel === ClaudeModelType.ClaudeHaiku45 }, "Claude Haiku 4.5")))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null, "Auto-complete model"),
+                            React.createElement("div", null,
+                                React.createElement("select", { className: "jp-mod-styled", onChange: event => setInlineCompletionModel(event.target.value) },
+                                    React.createElement("option", { value: ClaudeModelType.Default, selected: inlineCompletionModel === ClaudeModelType.Default }, "Default (recommended)"),
+                                    React.createElement("option", { value: ClaudeModelType.ClaudeOpus45, selected: inlineCompletionModel === ClaudeModelType.ClaudeOpus45 }, "Claude Opus 4.5"),
+                                    React.createElement("option", { value: ClaudeModelType.ClaudeHaiku45, selected: inlineCompletionModel === ClaudeModelType.ClaudeHaiku45 }, "Claude Haiku 4.5"))))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Chat Agent setting sources"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "User", checked: settingSources.includes('user'), onClick: () => {
+                                        setSettingSources(settingSources.includes('user')
+                                            ? settingSources.filter((source) => source !== 'user')
+                                            : [...settingSources, 'user']);
+                                    } }))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Project (Jupyter root directory)", checked: settingSources.includes('project'), onClick: () => {
+                                        setSettingSources(settingSources.includes('project')
+                                            ? settingSources.filter((source) => source !== 'project')
+                                            : [...settingSources, 'project']);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Chat Agent tools"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Claude Code tools", checked: tools.includes(ClaudeToolType.ClaudeCodeTools), disabled: true, onClick: () => {
+                                        setTools(tools.includes(ClaudeToolType.ClaudeCodeTools)
+                                            ? tools.filter((tool) => tool !== ClaudeToolType.ClaudeCodeTools)
+                                            : [...tools, ClaudeToolType.ClaudeCodeTools]);
+                                    } }))),
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", null,
+                                React.createElement(CheckBoxItem, { header: true, label: "Jupyter UI tools", checked: tools.includes(ClaudeToolType.JupyterUITools), onClick: () => {
+                                        setTools(tools.includes(ClaudeToolType.JupyterUITools)
+                                            ? tools.filter((tool) => tool !== ClaudeToolType.JupyterUITools)
+                                            : [...tools, ClaudeToolType.JupyterUITools]);
+                                    } })))))),
+            React.createElement("div", { className: "model-config-section" },
+                React.createElement("div", { className: "model-config-section-header" }, "Claude account"),
+                React.createElement("div", { className: "model-config-section-body" },
+                    React.createElement("div", { className: "model-config-section-row" },
+                        React.createElement("div", { className: "model-config-section-column" },
+                            React.createElement("div", { className: "form-field-row" },
+                                React.createElement("div", { className: "form-field-description" }, "API Key (optional)"),
+                                React.createElement("input", { name: "chat-model-id-input", placeholder: "API Key", className: "jp-mod-styled", spellCheck: false, value: apiKey, onChange: event => setApiKey(event.target.value) })),
+                            React.createElement("div", { className: "form-field-row" },
+                                React.createElement("div", { className: "form-field-description" }, "Base URL (optional)"),
+                                React.createElement("input", { name: "chat-model-id-input", placeholder: "https://api.anthropic.com", className: "jp-mod-styled", spellCheck: false, value: baseUrl, onChange: event => setBaseUrl(event.target.value) })))))))));
+}

package/lib/index.js

@@ -276,9 +276,10 @@ class NBIInlineCompletionProvider {
             }
         }
         const nbiConfig = NBIAPI.config;
-        const inlineCompletionsEnabled = nbiConfig.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
-            ? NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.LoggedIn
-            : nbiConfig.inlineCompletionModel.provider !== 'none';
+        const inlineCompletionsEnabled = nbiConfig.isInClaudeCodeMode ||
+            (nbiConfig.inlineCompletionModel.provider === GITHUB_COPILOT_PROVIDER_ID
+                ? NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.LoggedIn
+                : nbiConfig.inlineCompletionModel.provider !== 'none');
         this._telemetryEmitter.emitTelemetryEvent({
             type: TelemetryEventType.InlineCompletionRequest,
             data: {
@@ -767,9 +768,10 @@ const plugin = {
                 NBIAPI.getLoginStatus() === GitHubCopilotLoginStatus.NotLoggedIn);
         };
         const isChatEnabled = () => {
-            return NBIAPI.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
-                ? !githubLoginRequired()
-                : NBIAPI.config.chatModel.provider !== 'none';
+            return (NBIAPI.config.isInClaudeCodeMode ||
+                (NBIAPI.config.chatModel.provider === GITHUB_COPILOT_PROVIDER_ID
+                    ? !githubLoginRequired()
+                    : NBIAPI.config.chatModel.provider !== 'none'));
         };
         const isActiveCellCodeCell = () => {
             if (!(app.shell.currentWidget instanceof NotebookPanel)) {
@@ -1463,10 +1465,12 @@ const plugin = {
                 item: githubCopilotStatusBarItem,
                 align: 'right',
                 rank: 100,
-                isActive: () => NBIAPI.config.usingGitHubCopilotModel
+                isActive: () => !NBIAPI.config.isInClaudeCodeMode &&
+                    NBIAPI.config.usingGitHubCopilotModel
             });
             NBIAPI.configChanged.connect(() => {
-                if (NBIAPI.config.usingGitHubCopilotModel) {
+                if (!NBIAPI.config.isInClaudeCodeMode &&
+                    NBIAPI.config.usingGitHubCopilotModel) {
                     githubCopilotStatusBarItem.show();
                 }
                 else {

package/lib/tokens.d.ts

@@ -27,7 +27,8 @@ export declare enum BackendMessageType {
     StreamEnd = "stream-end",
     RunUICommand = "run-ui-command",
     GitHubCopilotLoginStatusChange = "github-copilot-login-status-change",
-    MCPServerStatusChange = "mcp-server-status-change"
+    MCPServerStatusChange = "mcp-server-status-change",
+    ClaudeCodeStatusChange = "claude-code-status-change"
 }
 export declare enum ResponseStreamDataType {
     LLMRaw = "llm-raw",
@@ -38,7 +39,8 @@ export declare enum ResponseStreamDataType {
     Button = "button",
     Anchor = "anchor",
     Progress = "progress",
-    Confirmation = "confirmation"
+    Confirmation = "confirmation",
+    AskUserQuestion = "ask-user-question"
 }
 export declare enum ContextType {
     Custom = "custom",
@@ -93,6 +95,7 @@ export declare enum BuiltinToolsetType {
     CommandExecute = "nbi-command-execute"
 }
 export declare const GITHUB_COPILOT_PROVIDER_ID = "github-copilot";
+export declare const CLAUDE_CODE_CHAT_PARTICIPANT_ID = "claude-code";
 export declare enum TelemetryEventType {
     InlineCompletionRequest = "inline-completion-request",
     ExplainThisRequest = "explain-this-request",