# andrepimenta/claude-code-chat architecture

> Architecture diagram of the GitHub repository andrepimenta/claude-code-chat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/andrepimenta/claude-code-chat
- Repository: https://github.com/andrepimenta/claude-code-chat

## Overview

Claude Code Chat is a VS Code extension that provides a chat interface to the Claude Code CLI, with an optional OpenAI-compatible routing path for model providers. The principal workflow is: a user sends a message in the webview, the extension host runs Claude and relays events and permission requests, and the webview displays the response. The extension also manages model selection, installation, and marketplace features. Edges reflect excerpts, the source index, or README statements; unsampled subsystems are represented only where documented.

Main entry points: [`src/extension.ts`](https://github.com/andrepimenta/claude-code-chat/blob/main/src/extension.ts) (Extension host), [`src/ui.ts`](https://github.com/andrepimenta/claude-code-chat/blob/main/src/ui.ts) (Chat webview), [`src/router/server.ts`](https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/server.ts) (API router), [`src/script.ts`](https://github.com/andrepimenta/claude-code-chat/blob/main/src/script.ts) (Chat interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_editor["Editor integration"]
  node_extension["Extension host<br/>[extension.ts]"]
end

subgraph group_chat["Chat experience"]
  node_webview["Chat webview<br/>[ui.ts]"]
  node_chat_script["Chat interactions<br/>[script.ts]"]
  node_chat_styles["Chat styling<br/>[ui-styles.ts]"]
end

subgraph group_runtime["Claude runtime"]
  node_claude_cli["Claude Code CLI"]
  node_auth_detection["Auth detection<br/>[auth-detect.ts]"]
  node_downloader["CLI installer"]
end

subgraph group_models["Models and routing"]
  node_model_updater["Model updater<br/>[model-updater.ts]"]
  node_router["API router<br/>[server.ts]"]
  node_request_format["Request conversion<br/>[formatRequest.ts]"]
  node_response_format["Response conversion<br/>[formatResponse.ts]"]
  node_stream_conversion["Stream conversion<br/>[streamResponse.ts]"]
end

subgraph group_marketplace["Extensions marketplace"]
  node_skills_ui["Skills interface<br/>[skills-ui.ts]"]
  node_plugins_ui["Plugins interface<br/>[plugins-ui.ts]"]
  node_skills_logic["Skills interactions<br/>[skills-script.ts]"]
  node_plugins_logic["Plugin interactions<br/>[plugins-script.ts]"]
end

node_user(("User"))
node_vscode["VS Code"]
node_openai_api["OpenAI-compatible API"]
node_marketplaces["Marketplace services"]

node_user -->|"opens chat"| node_vscode
node_vscode -.->|"activates"| node_extension
node_extension -->|"creates view"| node_webview
node_webview -->|"embeds interactions"| node_chat_script
node_webview -->|"embeds styles"| node_chat_styles
node_webview -->|"embeds interface"| node_skills_ui
node_webview -->|"embeds interface"| node_plugins_ui
node_webview -->|"embeds interactions"| node_skills_logic
node_webview -->|"embeds interactions"| node_plugins_logic
node_extension -->|"runs process"| node_claude_cli
node_extension -->|"checks auth events"| node_auth_detection
node_extension -->|"installs CLI"| node_downloader
node_extension -->|"resolves models"| node_model_updater
node_extension -->|"starts router"| node_router
node_router -->|"converts requests"| node_request_format
node_router -->|"forwards requests"| node_openai_api
node_router -->|"converts stream"| node_stream_conversion
node_router -->|"converts response"| node_response_format
node_extension -->|"searches and installs"| node_marketplaces

click node_extension "https://github.com/andrepimenta/claude-code-chat/blob/main/src/extension.ts"
click node_webview "https://github.com/andrepimenta/claude-code-chat/blob/main/src/ui.ts"
click node_chat_script "https://github.com/andrepimenta/claude-code-chat/blob/main/src/script.ts"
click node_chat_styles "https://github.com/andrepimenta/claude-code-chat/blob/main/src/ui-styles.ts"
click node_skills_ui "https://github.com/andrepimenta/claude-code-chat/blob/main/src/skills-ui.ts"
click node_plugins_ui "https://github.com/andrepimenta/claude-code-chat/blob/main/src/plugins-ui.ts"
click node_skills_logic "https://github.com/andrepimenta/claude-code-chat/blob/main/src/skills-script.ts"
click node_plugins_logic "https://github.com/andrepimenta/claude-code-chat/blob/main/src/plugins-script.ts"
click node_auth_detection "https://github.com/andrepimenta/claude-code-chat/blob/main/src/auth-detect.ts"
click node_downloader "https://github.com/andrepimenta/claude-code-chat/blob/main/src/claudeDownloader.ts"
click node_model_updater "https://github.com/andrepimenta/claude-code-chat/blob/main/src/model-updater.ts"
click node_router "https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/server.ts"
click node_request_format "https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/formatRequest.ts"
click node_response_format "https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/formatResponse.ts"
click node_stream_conversion "https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/streamResponse.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_extension,node_user toneBlue
class node_webview,node_chat_script,node_chat_styles toneAmber
class node_claude_cli,node_auth_detection,node_downloader,node_openai_api toneMint
class node_model_updater,node_router,node_request_format,node_response_format,node_stream_conversion toneRose
class node_skills_ui,node_plugins_ui,node_skills_logic,node_plugins_logic,node_vscode,node_marketplaces toneIndigo
```

## Components

### Editor integration

- [Extension host](https://github.com/andrepimenta/claude-code-chat/blob/main/src/extension.ts): `src/extension.ts`

### Chat experience

- [Chat webview](https://github.com/andrepimenta/claude-code-chat/blob/main/src/ui.ts): `src/ui.ts`
- [Chat interactions](https://github.com/andrepimenta/claude-code-chat/blob/main/src/script.ts): `src/script.ts`
- [Chat styling](https://github.com/andrepimenta/claude-code-chat/blob/main/src/ui-styles.ts): `src/ui-styles.ts`

### Claude runtime

- **Claude Code CLI**
- [Auth detection](https://github.com/andrepimenta/claude-code-chat/blob/main/src/auth-detect.ts): `src/auth-detect.ts`
- [CLI installer](https://github.com/andrepimenta/claude-code-chat/blob/main/src/claudeDownloader.ts): `src/claudeDownloader.ts`

### Models and routing

- [Model updater](https://github.com/andrepimenta/claude-code-chat/blob/main/src/model-updater.ts): `src/model-updater.ts`
- [API router](https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/server.ts): `src/router/server.ts`
- [Request conversion](https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/formatRequest.ts): `src/router/formatRequest.ts`
- [Response conversion](https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/formatResponse.ts): `src/router/formatResponse.ts`
- [Stream conversion](https://github.com/andrepimenta/claude-code-chat/blob/main/src/router/streamResponse.ts): `src/router/streamResponse.ts`

### Extensions marketplace

- [Skills interface](https://github.com/andrepimenta/claude-code-chat/blob/main/src/skills-ui.ts): `src/skills-ui.ts`
- [Plugins interface](https://github.com/andrepimenta/claude-code-chat/blob/main/src/plugins-ui.ts): `src/plugins-ui.ts`
- [Skills interactions](https://github.com/andrepimenta/claude-code-chat/blob/main/src/skills-script.ts): `src/skills-script.ts`
- [Plugin interactions](https://github.com/andrepimenta/claude-code-chat/blob/main/src/plugins-script.ts): `src/plugins-script.ts`

### Other components

- **User**
- **VS Code**
- **OpenAI-compatible API**
- **Marketplace services**

## Connections

- User → VS Code: opens chat (evidence: `README.md`)
- VS Code → Extension host: activates
- Extension host → Chat webview: creates view (evidence: `src/extension.ts`)
- Chat webview → Chat interactions: embeds interactions (evidence: `src/ui.ts`)
- Chat webview → Chat styling: embeds styles (evidence: `src/ui.ts`)
- Chat webview → Skills interface: embeds interface (evidence: `src/ui.ts`)
- Chat webview → Plugins interface: embeds interface (evidence: `src/ui.ts`)
- Chat webview → Skills interactions: embeds interactions
- Chat webview → Plugin interactions: embeds interactions
- Extension host → Claude Code CLI: runs process (evidence: `src/extension.ts`)
- Extension host → Auth detection: checks auth events (evidence: `src/extension.ts`)
- Extension host → CLI installer: installs CLI (evidence: `src/extension.ts`)
- Extension host → Model updater: resolves models (evidence: `src/extension.ts`)
- Extension host → API router: starts router (evidence: `src/extension.ts`)
- API router → Request conversion: converts requests (evidence: `src/router/server.ts`)
- API router → OpenAI-compatible API: forwards requests (evidence: `src/router/server.ts`)
- API router → Stream conversion: converts stream (evidence: `src/router/server.ts`)
- API router → Response conversion: converts response (evidence: `src/router/server.ts`)
- Extension host → Marketplace services: searches and installs (evidence: `README.md`)