VS Code Extension
cdoing-vscode — Full-featured VS Code extension with sidebar chat, editor panel, inline editing, and autocomplete.
Overview
The VS Code extension brings the Cdoing Agent directly into the editor with a React-based webview UI. It supports all the same tools and capabilities as the CLI but with tight IDE integration.
packages/vscode-extension/src/
├── extension.ts # Activation + command registration
├── chat-panel-provider.ts # Webview panel + agent runner
├── inline-edit.ts # Cmd+I inline editing
├── inline-autocomplete.ts # Ghost text suggestions
├── webview-content.ts # HTML template
└── webview/
├── components/
│ ├── ChatPanel.tsx # Main chat interface
│ ├── InputArea.tsx # Message input
│ └── SettingsPanel.tsx # Extension settings UI
├── hooks/
│ └── useChatState.ts # Chat state management
├── styles/
│ └── chat.css # Chat styling
└── types.ts # TypeScript types
Features
Sidebar Chat
Chat panel in the left activity bar. Persistent across editor sessions.
Editor Panel
Open the agent beside your code with Cmd+Shift+L for side-by-side work.
Inline Editing
Press Cmd+I to edit selected code inline with AI assistance.
Autocomplete
Ghost text suggestions as you type, powered by the AI model.
Commands
| Command | Keybinding | Description |
|---|---|---|
| cdoing.newChat | — | Create a new chat tab |
| cdoing.openEditorPanel | Cmd+Shift+L | Open agent panel beside editor |
| cdoing.selectModel | — | Change the active model |
| cdoing.sendSelection | Cmd+Shift+Enter | Send selected code to the agent |
| cdoing.explainSelection | Context menu | Ask the agent to explain selected code |
| cdoing.refactorSelection | Context menu | Ask the agent to refactor selected code |
| cdoing.fixSelection | Context menu | Ask the agent to fix selected code |
| cdoing.openFile | — | Ask about a specific file |
| cdoing.addToChat | — | Add current selection to chat context |
VS Code Settings
Configure the extension through VS Code Settings (search for "cdoing"):
| Setting | Type | Description |
|---|---|---|
| cdoing.provider | anthropic | openai | google | custom | LLM provider to use |
| cdoing.model | string | Model identifier |
| cdoing.customProviderName | string | Display name for custom providers |
| cdoing.customBaseURL | string | Base URL for custom provider API |
| cdoing.apiKey | string | API key for the selected provider |
| cdoing.temperature | number | Model temperature (default: 0) |
| cdoing.maxTokens | number | Max output tokens (default: 8096) |
| cdoing.permissionMode | ask | auto-edit | auto | Permission handling mode |
Architecture
Development
1
Build dependencies first
cd cdoing-agent
yarn build
2
Build the extension
cd packages/vscode-extension
npm run build
3
Launch Extension Development Host
Open packages/vscode-extension in VS Code and press F5. A new VS Code window will open with the extension loaded.
4
Watch mode for development
npm run watch
Uses esbuild in watch mode for fast rebuilds during development.
Hot Reload
After making changes, use Cmd+Shift+P → "Developer: Reload Webviews" to refresh the chat panel without restarting the extension host.