Claude Code ChatUI
A polished VS Code GUI that wraps Claude Code CLI — with tuned interactions, streamlined workflows, and a better developer experience.
This extension takes the raw power of the locally installed Claude Code CLI and adds a carefully designed integration layer: automated context assembly, drag-and-drop file handling, visual diff review, permission management, checkpoint/restore, and more. The CLI is the engine — we tune the ride.
Prerequisites
npm install -g @anthropic-ai/claude-code
claude auth login
Requires VS Code 1.94+. The extension expects claude on your PATH.
Features
- Chat Interface — Real-time streaming responses, markdown rendering, syntax-highlighted code blocks
- Editor Title Bar Icon — Click the icon in the editor title bar to open chat with the current file auto-attached
- File Context — Type
@ to reference any workspace file; drag & drop files from the explorer or paste images
- Slash Commands — Type
/ to access 23+ built-in Claude Code commands
- Model Selection — Switch between Opus, Sonnet, or your configured default
- Thinking Modes — Configurable thinking intensity (Think → Ultrathink)
- YOLO Mode — Skip all permission prompts for uninterrupted workflows (auto-approves any remaining checks)
- Checkpoint & Restore — Git-based automatic backups; one-click restore to any previous state
- Inline Diff Viewer — See file changes inline with expand/collapse; open in VS Code's native diff editor
- MCP Server Management — Install, configure, enable/disable MCP servers through UI
- Permission System — Interactive permission dialogs, always-allow patterns, YOLO mode
- Conversation History — Automatic session saving, browsing, and restoration
- Token & Cost Tracking — Real-time API usage monitoring
- Max Turns Control — Limit agentic tool-use turns per request to manage token consumption
- Sidebar & Panel — Use as sidebar view or standalone editor panel (auto-locks editor group)
Getting Started
- Install Claude Code CLI (see Prerequisites above)
- Open VS Code, install this extension
- Press
Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the chat
- Start chatting
Keyboard Shortcuts
| Shortcut |
Action |
Ctrl+Shift+C |
Open Claude Code ChatUI |
Enter |
Send message |
@ |
Open file picker |
/ |
Open slash commands |
Configuration
| Setting |
Default |
Description |
claudeCodeChatUI.thinking.intensity |
think |
Thinking intensity: think, think-hard, think-harder, ultrathink |
claudeCodeChatUI.permissions.yoloMode |
false |
Skip all permission checks |
claudeCodeChatUI.maxTurns |
0 |
Max agentic turns per request (0 = unlimited) |
Architecture
┌─────────────────────────────────────┐
│ VS Code Extension │
│ ┌───────────────────────────────┐ │
│ │ React 19 + Zustand WebView │ │ ← Chat UI
│ └──────────┬────────────────────┘ │
│ │ postMessage │
│ ┌──────────▼────────────────────┐ │
│ │ Extension Host (Node.js) │ │ ← Message routing
│ └──────────┬────────────────────┘ │
│ │ spawn + stream-json │
│ ┌──────────▼────────────────────┐ │
│ │ Claude Code CLI │ │ ← Engine (untouched)
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
Development
git clone https://github.com/GeneCooper/claude-code-chatui.git
cd claude-code-chatui
npm install
# Press F5 in VS Code to launch Extension Development Host
Packaging & Publishing
Package the extension into a .vsix file:
npx vsce package
Publish to the VS Code Marketplace:
npx vsce publish
Acknowledgments
This project is built upon the following open source projects:
License
See the LICENSE file for details.
