claude-code-chat

Name: claude-code-chat
Author: andrepimenta

by andrepimenta

Issues

Beautiful Claude Code Chat Interface for VS Code

1,050stars

155forks

JavaScript

Added 4/11/2026

View on GitHub Download ZIP

AI Agentsaiai-agentsclaudeclaude-codevibe-coding

Installation

# Add to your Claude Code skills
git clone https://github.com/andrepimenta/claude-code-chat

Getting Started

Guides for using ai agents skills like claude-code-chat.

Caveman: Cut Claude Token Use by 65%
How agent-side prompt compression works, when to use it, and when not to.
What is an AI Skills Marketplace?
Definitions, how marketplaces work, and how to choose between them in 2026.
Getting Started with AI Skills

Security ReportIssues

Last scanned: 5/2/2026

{
  "issues": [
    {
      "type": "npm-audit",
      "message": "@azure/identity: Vulnerability found",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "@azure/msal-node: Vulnerability found",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "@eslint/plugin-kit: @eslint/plugin-kit is vulnerable to Regular Expression Denial of Service attacks through ConfigCommentParser",
      "severity": "low"
    },
    {
      "type": "npm-audit",
      "message": "@isaacs/brace-expansion: @isaacs/brace-expansion has Uncontrolled Resource Consumption",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "@vscode/test-cli: Vulnerability found",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "ajv: ajv has ReDoS when using `$data` option",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "brace-expansion: brace-expansion Regular Expression Denial of Service vulnerability",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "diff: jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch",
      "severity": "low"
    },
    {
      "type": "npm-audit",
      "message": "flatted: flatted vulnerable to unbounded recursion DoS in parse() revive phase",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "form-data: form-data uses unsafe random function in form-data for choosing boundary",
      "severity": "critical"
    },
    {
      "type": "npm-audit",
      "message": "glob: glob CLI: Command injection via -c/--cmd executes matches with shell:true",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "js-yaml: js-yaml has prototype pollution in merge (<<)",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "jws: auth0/node-jws Improperly Verifies HMAC Signature",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "lodash: Lodash has Prototype Pollution Vulnerability in `_.unset` and `_.omit` functions",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "markdown-it: markdown-it is has a Regular Expression Denial of Service (ReDoS)",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "minimatch: minimatch has a ReDoS via repeated wildcards with non-matching literal in pattern",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "mocha: Vulnerability found",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "picomatch: Picomatch: Method Injection in POSIX Character Classes causes incorrect Glob Matching",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "qs: qs's arrayLimit bypass in comma parsing allows denial of service",
      "severity": "medium"
    },
    {
      "type": "npm-audit",
      "message": "serialize-javascript: Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.toISOString()",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "tar-fs: tar-fs has a symlink validation bypass if destination directory is predictable with a specific tarball",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "tmp: tmp allows arbitrary temporary file / directory write via symbolic link `dir` parameter",
      "severity": "low"
    },
    {
      "type": "npm-audit",
      "message": "underscore: Underscore has unlimited recursion in _.flatten and _.isEqual, potential for DoS attack",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "undici: Undici has an unbounded decompression chain in HTTP responses on Node.js Fetch API via Content-Encoding leads to resource exhaustion",
      "severity": "high"
    },
    {
      "type": "npm-audit",
      "message": "uuid: uuid: Missing buffer bounds check in v3/v5/v6 when buf is provided",
      "severity": "medium"
    }
  ],
  "status": "FAILED",
  "scannedAt": "2026-05-02T06:09:11.707Z",
  "semgrepRan": false,
  "npmAuditRan": true,
  "pipAuditRan": true
}

README.md

Agentic AI for Beginners

Build your first AI agent from scratch - tool use, ReAct pattern, memory, deployment

41 minBeginner

Comments (0)

to leave a comment.

No comments yet. Be the first to share your thoughts!

Related Skills

ECC

by affaan-m

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

192,952

awesome-autoresearch ALwrity

🚀 Claude Code Chat - Beautiful Claude Code Chat Interface for VS Code

No more terminal commands. Chat with Claude Code through a beautiful, intuitive interface right inside VS Code.

Ditch the command line and experience Claude Code like never before. This extension brings a stunning chat interface directly into your editor, making AI assistance accessible, visual, and enjoyable.

🤖 Built by Claude Code for Claude Code - This extension was entirely developed using Claude Code itself. Claude Code created its own chat interface!

✨ Why Choose Claude Code Chat?

🖥️ No Terminal Required - Beautiful chat interface replaces command-line interactions
⏪ Restore Checkpoints - Undo changes and restore code to any previous state
🔌 MCP, Skills & Plugins - Browse, search, and install from curated marketplaces
💾 Conversation History - Automatic conversation history and session management
🎨 VS Code & Cursor - Works in VS Code, Cursor, and other compatible editors
🧠 Plan and Ultrathink modes - Plan First and Ultrathink modes
⚡ Smart Context - Reference files, paste images, and create custom commands
🐧 Windows/WSL Support - Full native Windows and WSL support

Claude Code Chat 1 0 0

🌟 Key Features

💬 Beautiful Chat Graphical Interface

No terminal required - everything through the UI
Real-time streaming responses with typing indicators
One-click message copying with visual feedback
Enhanced markdown support with syntax highlighting
Auto-resizing input that grows with your content
Copy-to-clipboard for code blocks

⏪ Checkpoint & Session Management

Restore Checkpoints - Instantly undo changes and restore to any previous state
Automatic Git-based backup system for safe experimentation
Browse and restore from any conversation checkpoint
Automatic conversation saving and restoration
Real-time cost and token tracking
Session statistics and performance metrics

📝 Inline Diff Viewer

Full Diff Display - See complete file changes directly in Edit, MultiEdit, and Write messages
Open in VS Code Diff - One-click button to open VS Code's native side-by-side diff editor
Smart Truncation - Long diffs are truncated with an expand button for better readability
Syntax Highlighting - Proper code highlighting in diff views
Visual Change Indicators - Clear green/red highlighting for additions and deletions

🔌 MCP, Skills & Plugins Marketplace ⭐ NEW IN V2.0

MCP Servers - Browse 30+ featured servers (GitHub, Slack, Stripe, Notion, etc.) with dual registry search
Skills - Browse and install curated skills from skills.sh with project or global scope
Plugins - Browse and install plugins to extend Claude Code
Smart Search - Search across add-mcp curated and official Anthropic registries with relevance ranking
Project or Global Install - Install MCP servers to .mcp.json or ~/.claude.json, skills to .claude/skills/
One-Click Install - Pre-filled configuration with env vars, headers, and OAuth authentication

🖼️ Image Preview & Attachments ⭐ NEW IN V2.0

Paste Images - Paste images with thumbnail preview before sending
File Picker - Select images through VS Code's native file picker
Preview Strip - See attached images above the text box with remove buttons
Inline Detection - Image paths in messages are automatically detected and sent as base64
Multiple Images - Attach multiple images to a single message

🔒 Advanced Permissions System

Interactive Permission Dialogs - Detailed tool information with command previews
Always Allow Functionality - Smart command pattern matching for common tools (npm, git, docker)
YOLO Mode - Skip all permission checks for power users
Workspace Permissions - Granular control over what tools can execute
Real-time Permission Management - Add/remove permissions through intuitive UI

📱 Sidebar Integration

Native VS Code Sidebar - Full chat functionality in the sidebar panel
Smart Panel Management - Automatic switching between main and sidebar views
Persistent Sessions - State maintained across panel switches
Activity Bar Integration - Quick access from VS Code's activity bar

📁 Smart File Integration

Type @ to instantly search and reference workspace files
Image attachments via file browser and copy-paste screenshots
Lightning-fast file search across your entire project
Seamless context preservation for multi-file discussions

🛠️ Tool Management

Visual dashboard showing all available Claude Code tools
Real-time tool execution with formatted results
Inline stop button replaces send during processing
Smart permission system for secure tool execution

🎨 VS Code Integration

Native theming that matches your editor
Status bar with support button
Activity bar panel for quick access
Responsive design for any screen size

🤖 Model Selection

Quick Buttons - GPT, Gemini, MiniMax, Kimi, GLM, DeepSeek above the text box
Opus - Most capable model for complex tasks requiring deep reasoning
Sonnet - Balanced model offering great performance for most use cases
Default - Uses your configured model setting
150+ OpenCredits Models - Browse and switch to any available model
Model preference persists across sessions
Provider choice (OpenCredits vs Anthropic) for Claude models

⚡ Slash Commands Integration

Slash Commands Modal - Type "/" to access all Claude Code commands instantly
23+ Built-in Commands - /agents, /cost, /config, /memory, /review, and more
Custom Command Support - Execute any Claude Code command with session context
Session-Aware Execution - All commands run with current conversation context
Terminal Integration - Commands open directly in VS Code terminal with WSL support

🧠 Advanced AI Modes

Plan First Mode - Toggle to make Claude plan before implementing changes
Thinking Mode - Configurable intensity levels (Think, Think Hard, Think Harder, Ultrathink)
Mode Toggles - Simple switches above the text input area
Intelligent Prompting - Different prompts based on selected thinking intensity
Token Awareness - Higher thinking levels consume more tokens but provide deeper reasoning

💬 Support & Feedback ⭐ NEW IN V2.0

In-App Support - Click "Support" in the status bar to send feedback
Bug Reports & Feature Requests - Submit directly from the extension
Optional Email - Include your email for follow-up

🚀 Getting Started

Prerequisites

VS Code 1.80+ or Cursor - Latest version recommended
Claude Code CLI - Install from Anthropic
Active Claude API or subscription - API or Pro/Max plan
Node.js 18+ - Required for installation

Installation

Install from VS Code Marketplace
```
ext install claude-code-chat
```
Or install manually
- Download the .vsix file from releases
- Run code --install-extension claude-code-chat-x.x.x.vsix
Open Claude Code Chat
- Press Ctrl+Shift+C (or Cmd+Shift+C on Mac)
- Or click the Claude icon in your status bar
- Or use Command Palette: Claude Code: Open Chat

💡 Usage Examples

🔥 Code Review & Refactoring

You: @src/components/UserProfile.tsx Can you review this component and suggest improvements?

Claude: I'll analyze your UserProfile component. Looking at the code, here are my recommendations:

1. **Performance Optimization**: Add React.memo() to prevent unnecessary re-renders
2. **TypeScript Enhancement**: The props interface could be more specific
3. **Accessibility**: Missing ARIA labels for screen readers

[Detailed analysis with code examples follows...]

📊 Project Analysis

You: Analyze the overall architecture of my project and identify potential issues

Claude: I'll examine your project structure and identify areas for improvement:

🏗️ **Architecture Overview**
- React frontend with TypeScript
- Node.js backend with Express
- MongoDB database layer

⚠️ **Identified Issues**
- Missing error boundaries in React components
- Database queries lack proper indexing
- API routes missing input validation

[Detailed recommendations with implementation examples...]

🐛 Debugging Assistant

You: I'm getting a strange error in my API. Here's the stack trace: [paste error]

Claude: Looking at this stack trace, the issue appears to be a race condition in your async middleware. Here's what's happening:

1. **Root Cause**: Multiple requests are modifying shared state
2. **Solution**: Implement proper request isolation
3. **Prevention**: Add comprehensive error handling

[Step-by-step debugging guide follows...]

⏪ Safe Experimentation with Checkpoints

You: Can you refactor this entire component to use hooks instead of class components?

Claude: I'll refactor your component to use React hooks. Don't worry - I'll create a checkpoint first so you can easily restore if needed.

[Creates automatic checkpoint]

Here's the refactored component using hooks:
[Shows the new implementation]

If you want to revert these changes, just click "Restore Chec