Claude Code Chat UI – for Windows (No WSL)

A Native UI for Windows That Makes Claude Code Instantly Better! 🚀

🌐 Languages: English | 简体中文 | 繁體中文

---

🚩 Why You Need This Project

• No More WSL Hassle: Finally, run Claude Code with 100% native Windows support. It just works!
• Say Goodbye to Path Errors: Seamlessly converts between C:\ and /usr/ paths to avoid wasting precious AI tokens.
• Ditch the Terminal: A full-featured GUI chat interface for easy copy-pasting and image drag-and-drop. No more window switching!

---

📸 Features at a Glance

Main Chat Interface

Real-time Token Stats

Modular Command Protocol (MCP)

---

🎯 Core Advantages

• ✅ Zero WSL Dependency: Runs with just Git Bash and Node.js.
• ✅ Real-time Cost Tracking: Instantly see token counts and costs.
• ✅ Windows Path Compatibility: Automatically recognizes and handles paths for smooth cross-system interaction.
• ✅ MCP Modular Extensions: Call external tools with a single click, making your Claude Code omnipotent.
• ✅ A Detail-Lover's Dream: HiDPI icons, dynamic theme support, and fluid animations.
• ✅ Perfect for "Vibe Coding": A pure GUI experience for an ultra-comfortable coding environment.

---

🚀 Installation and Usage

🎉 Now Available on VS Code Marketplace! Install with just one click.

This guide covers Environment Setup, Extension Installation, and Packaging Instructions.

🔹 Step 1: Set Up Your Environment (One-Time Only)

This core step resolves the No suitable shell found error on Windows.

# 1. Install Git for Windows (includes Git Bash, which is required)
# Download here: https://git-scm.com/

# 2. Install Node.js (LTS version recommended, ≥ 18)
# Download here: https://nodejs.org/

# 3. Open PowerShell or CMD as an [Administrator] and run the following commands to set environment variables
#    (This tells npm to ignore scripts and sets Git Bash as the shell, fixing the core issue)
setx NPM_CONFIG_IGNORE_SCRIPTS true
setx SHELL "C:\\Program Files\\Git\\bin\\bash.exe"
#    Note: If you installed Git in a different directory, update the path accordingly.

# 4. [IMPORTANT] Completely close and restart your PowerShell/CMD window for the changes to take effect.

🔹 Step 2: Install and Verify Claude Code CLI

# 1. In a [new] terminal window, globally install the Claude Code CLI
npm install -g @anthropic-ai/claude-code

# 2. Ensure the npm global directory is in your system's Path environment variable
#    The default path is usually: C:\Users\YourUsername\AppData\Roaming\npm
#    If you're unsure, add it manually to your system's "Path" variable.

# 3. Log in to Claude Code for the first time
claude login
#    A browser window will open for authorization → Log in and copy the token → Paste it back into the terminal.

# 4. Quickly verify the installation
claude chat -m sonnet -p "hello"
#    If you see a reply from Claude, your environment is ready!

🔹 Step 3: Install This Extension

✨ Method 1: Install from VS Code Marketplace (Recommended)

The extension is now available on the VS Code Marketplace! 🎉

Quick Install:

1. Open VS Code or Cursor
2. Press Ctrl+Shift+X to open Extensions
3. Search for Claude-Code ChatUI or lkbaba
4. Click Install

Direct Link: ➡️ Install from VS Code Marketplace

---

Method 2: Advanced Installation (for Developers)

If you want to run from source or package the extension manually, follow these steps.

Run from Source

# Clone the project locally
git clone https://github.com/LKbaba/Claude-code-ChatInWindows.git
cd Claude-code-ChatInWindows
npm install  # Install dependencies

# Press F5 in VS Code or Cursor to start debugging

Package as VSIX and Install

# 1. Make sure you are in the project root and have run npm install

# 2. Compile and package the extension
npm run package

#    This command will automatically compile and package the extension into a .vsix file.

To install the .vsix file:

1. In VS Code or Cursor, press Ctrl+Shift+P to open the Command Palette.
2. Type Install from VSIX and select "Extensions: Install from VSIX...".
3. Select the generated .vsix file from the project root to install.

---

🎉 Getting Started

• Open Chat Panel: Press Ctrl+Shift+C
• Customize Settings: Go to VS Code/Cursor Settings → Search for claudeCodeChatUI

Example Configuration:

{
  // Claude's thinking intensity: think | think-hard | think-harder | ultrathink
  "claudeCodeChatUI.thinking.intensity": "think-harder",

  // Path to Git Bash (usually auto-detected, no changes needed)
  "claudeCodeChatUI.windows.gitBashPath": "C:\\Program Files\\Git\\bin\\bash.exe",

  // MCP Modular Extensions
  "claudeCodeChatUI.mcp.enabled": true,
  "claudeCodeChatUI.mcp.servers": ["http://localhost:7070"],

  // API Configuration (for third-party services)
  "claudeCodeChatUI.api.useCustomAPI": false,
  "claudeCodeChatUI.api.key": "",
  "claudeCodeChatUI.api.baseUrl": "https://api.anthropic.com"
}

🔑 Using Third-Party APIs

This extension supports third-party API services (e.g., tu-zi.com, openrouter.ai). Here's how to use them:

Usage Steps

A. Extension Configuration

1. Open Settings: Click the settings button ⚙️ in the chat interface
2. Enable Custom API: Check "Use Custom API Endpoint"
3. Configure API:
   • API Key: Enter your API key (e.g., sk-ant-xxxxxxxxxx)
   • Base URL: Enter the API endpoint (e.g., https://api.tu-zi.com)
4. Save Confirmation: Settings are saved automatically with a "Settings updated successfully" notification

5. First-time Initialization (Important)

⚠️ Note: First-time custom API use requires command line initialization. After that, it works normally in the extension.

B. First-time Initialization

Windows PowerShell Users:

# Open a new PowerShell session
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass -Force   # Bypass script restrictions

$Env:ANTHROPIC_API_KEY  = "sk-xxxxxxxxxxxxxxxxxxxxxxxx"   # Enter your API key, note the quotes
$Env:ANTHROPIC_BASE_URL = "https://api.tu-zi.com"  # Consult your API provider for the URL

claude code  # Run CLI to read environment variables

Follow the prompts to confirm third-party API can return messages.

claude chat -m opus "hello"  # Test if configuration works

💡 Tips:

• Third-party APIs are usually more affordable for budget-conscious users
• Common services: tu-zi.com, openrouter.ai
• Toggle between official account and custom API anytime via the switch
• Wrong API key will show "processing" until timeout
• Important: Initialization is required again after system restart

❓ FAQ

Q: Why doesn't chat respond after configuring API?

• A: First-time custom API use requires command line initialization to ensure messages can be returned.

Q: How to switch back to official account?

• A: Uncheck "Use Custom API Endpoint" in settings

---

🤝 How to Contribute

1. Fork the project and create a feature branch.
2. Focus on a single new feature or pain point.
3. Test thoroughly on a real Windows machine.
4. Run npm test before submitting (if tests are available).
5. Open a Pull Request with a clear description and screenshots.

We welcome all AI engineers, developers, geeks, and vibe-coders on Windows to join in!

---

📝 License

This project is licensed under the MIT License, consistent with the upstream project. See LICENSE for details.

---

🙏 Acknowledgments and Inspiration

Special thanks to:

• andrepimenta – for the original claude-code-chat project
• CCUsage – for the inspiration on real-time token tracking
• Mrasxieyang (from linux.do community) – for providing the core solution for the native Windows installation
• Anthropic – for creating the powerful Claude and Claude Code
• All developers contributing to the Claude Code application ecosystem ❤️

---