```
├── .dockerignore
├── .gitignore
├── .npmignore
├── CLAUDE.md (500 tokens)
├── Dockerfile
├── LICENSE (omitted)
├── README.md (4.4k tokens)
├── README_zh.md (3k tokens)
├── blog/
├── en/
├── maybe-we-can-do-more-with-the-route.md (1400 tokens)
├── project-motivation-and-how-it-works.md (1400 tokens)
├── images/
├── alipay.jpg
├── chrome-devtools.png
├── chrome-inspect.png
├── claude-code-router-img.png
├── claude-code.png
├── models.gif
├── roadmap.svg (600 tokens)
├── search.png
├── sponsors/
├── glm-en.jpg
├── glm-zh.jpg
├── statusline-config.png
├── statusline.png
├── ui.png
├── webstorm-formate-file.png
├── wechat.jpg
├── wechat_group.jpg
├── zh/
├── æÂÂ许æÂÂ们è½å¨Routerä¸ÂÃ¥ÂÂæ´å¤ÂäºÂæÂÂ
.md (1000 tokens)
├── 项ç®åÂÂè¡·åÂÂÃ¥ÂÂçÂÂ.md (900 tokens)
├── custom-router.example.js
├── docker-compose.yml
├── package.json (200 tokens)
├── pnpm-lock.yaml (omitted)
├── scripts/
├── build.js (200 tokens)
├── src/
├── agents/
├── image.agent.ts (1900 tokens)
├── index.ts (200 tokens)
├── type.ts (100 tokens)
├── cli.ts (2000 tokens)
├── constants.ts (100 tokens)
├── index.ts (2.5k tokens)
├── middleware/
├── auth.ts (300 tokens)
├── server.ts (1200 tokens)
├── utils/
├── SSEParser.transform.ts (500 tokens)
├── SSESerializer.transform.ts (200 tokens)
├── cache.ts (200 tokens)
├── close.ts (200 tokens)
├── codeCommand.ts (600 tokens)
├── index.ts (1100 tokens)
├── logCleanup.ts (300 tokens)
├── modelSelector.ts (2.7k tokens)
├── processCheck.ts (700 tokens)
├── rewriteStream.ts (200 tokens)
├── router.ts (1800 tokens)
├── status.ts (200 tokens)
├── statusline.ts (4.2k tokens)
├── update.ts (400 tokens)
├── tsconfig.json (100 tokens)
├── ui/
├── CLAUDE.md (400 tokens)
├── PROJECT.md (100 tokens)
├── README.md (500 tokens)
├── components.json (100 tokens)
├── config.example.json (800 tokens)
├── eslint.config.js (100 tokens)
├── index.html (100 tokens)
├── package-lock.json (38.6k tokens)
├── package.json (300 tokens)
├── pnpm-lock.yaml (27.5k tokens)
├── public/
├── vite.svg (300 tokens)
├── src/
├── App.tsx (3k tokens)
├── assets/
├── react.svg (800 tokens)
├── components/
├── ConfigProvider.tsx (1200 tokens)
├── DebugPage.tsx (3.8k tokens)
├── JsonEditor.tsx (1300 tokens)
├── LogViewer.tsx (5.8k tokens)
├── Login.tsx (900 tokens)
├── ProtectedRoute.tsx
├── ProviderList.tsx (800 tokens)
├── Providers.tsx (10k tokens)
├── PublicRoute.tsx
├── RequestHistoryDrawer.tsx (1200 tokens)
├── Router.tsx (1400 tokens)
├── SettingsDialog.tsx (1700 tokens)
├── StatusLineConfigDialog.tsx (8.6k tokens)
├── StatusLineImportExport.tsx (2.4k tokens)
├── TransformerList.tsx (800 tokens)
├── Transformers.tsx (2.1k tokens)
├── ui/
├── badge.tsx (200 tokens)
├── button.tsx (400 tokens)
├── card.tsx (400 tokens)
├── color-picker.tsx (1000 tokens)
├── combo-input.tsx (800 tokens)
├── combobox.tsx (500 tokens)
├── command.tsx (900 tokens)
├── dialog.tsx (800 tokens)
├── input.tsx (500 tokens)
├── label.tsx (100 tokens)
├── multi-combobox.tsx (700 tokens)
├── popover.tsx (300 tokens)
├── switch.tsx (200 tokens)
├── tabs.tsx (400 tokens)
├── toast.tsx (300 tokens)
├── i18n.ts (100 tokens)
├── index.css (1200 tokens)
├── lib/
├── api.ts (1400 tokens)
├── db.ts (700 tokens)
├── utils.ts
├── locales/
├── en.json (1700 tokens)
├── zh.json (1300 tokens)
├── main.tsx (100 tokens)
├── routes.tsx (100 tokens)
├── styles/
├── animations.css (200 tokens)
├── types.ts (300 tokens)
├── utils/
├── statusline.ts (800 tokens)
├── vite-env.d.ts (omitted)
├── tsconfig.app.json (100 tokens)
├── tsconfig.json (100 tokens)
├── tsconfig.tsbuildinfo (omitted)
├── vite.config.ts (100 tokens)
```
## /.dockerignore
```dockerignore path="/.dockerignore"
node_modules
npm-debug.log
```
## /.gitignore
```gitignore path="/.gitignore"
node_modules
.env
log.txt
.idea
dist
.DS_Store
.vscode
tsconfig.tsbuildinfo
```
## /.npmignore
```npmignore path="/.npmignore"
src
node_modules
.claude
CLAUDE.md
screenshoots
.DS_Store
.vscode
.idea
.env
.blog
docs
.log
blog
config.json
ui
scripts
```
## /CLAUDE.md
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Commands
- **Build the project**:
```bash
npm run build
```
- **Start the router server**:
```bash
ccr start
```
- **Stop the router server**:
```bash
ccr stop
```
- **Check the server status**:
```bash
ccr status
```
- **Run Claude Code through the router**:
```bash
ccr code "<your prompt>"
```
- **Release a new version**:
```bash
npm run release
```
## Architecture
This project is a TypeScript-based router for Claude Code requests. It allows routing requests to different large language models (LLMs) from various providers based on custom rules.
- **Entry Point**: The main command-line interface logic is in `src/cli.ts`. It handles parsing commands like `start`, `stop`, and `code`.
- **Server**: The `ccr start` command launches a server that listens for requests from Claude Code. The server logic is initiated from `src/index.ts`.
- **Configuration**: The router is configured via a JSON file located at `~/.claude-code-router/config.json`. This file defines API providers, routing rules, and custom transformers. An example can be found in `config.example.json`.
- **Routing**: The core routing logic determines which LLM provider and model to use for a given request. It supports default routes for different scenarios (`default`, `background`, `think`, `longContext`, `webSearch`) and can be extended with a custom JavaScript router file. The router logic is likely in `src/utils/router.ts`.
- **Providers and Transformers**: The application supports multiple LLM providers. Transformers adapt the request and response formats for different provider APIs.
- **Claude Code Integration**: When a user runs `ccr code`, the command is forwarded to the running router service. The service then processes the request, applies routing rules, and sends it to the configured LLM. If the service isn't running, `ccr code` will attempt to start it automatically.
- **Dependencies**: The project is built with `esbuild`. It has a key local dependency `@musistudio/llms`, which probably contains the core logic for interacting with different LLM APIs.
- `@musistudio/llms` is implemented based on `fastify` and exposes `fastify`'s hook and middleware interfaces, allowing direct use of `server.addHook`.
- 无论如何你都不能自动提交git
## /Dockerfile
``` path="/Dockerfile"
FROM node:20-alpine
RUN npm install -g @musistudio/claude-code-router
EXPOSE 3456
CMD ["ccr", "start"]
```
## /README.md
[](README_zh.md)
[](https://discord.gg/rdftVMaUcS)
[](https://github.com/musistudio/claude-code-router/blob/main/LICENSE)
<hr>
> This project is sponsored by Z.ai, supporting us with their GLM CODING PLAN.
> GLM CODING PLAN is a subscription service designed for AI coding, starting at just $3/month. It provides access to their flagship GLM-4.6 model across 10+ popular AI coding tools (Claude Code, Cline, Roo Code, etc.), offering developers top-tier, fast, and stable coding experiences.
> Get 10% OFF GLM CODING PLAN：https://z.ai/subscribe?ic=8JVLJQFSKB
> A powerful tool to route Claude Code requests to different models and customize any request.
## ✨ Features
- **Model Routing**: Route requests to different models based on your needs (e.g., background tasks, thinking, long context).
- **Multi-Provider Support**: Supports various model providers like OpenRouter, DeepSeek, Ollama, Gemini, Volcengine, and SiliconFlow.
- **Request/Response Transformation**: Customize requests and responses for different providers using transformers.
- **Dynamic Model Switching**: Switch models on-the-fly within Claude Code using the `/model` command.
- **CLI Model Management**: Manage models and providers directly from the terminal with `ccr model`.
- **GitHub Actions Integration**: Trigger Claude Code tasks in your GitHub workflows.
- **Plugin System**: Extend functionality with custom transformers.
## 🚀 Getting Started
### 1. Installation
First, ensure you have [Claude Code](https://docs.anthropic.com/en/docs/claude-code/quickstart) installed:
```shell
npm install -g @anthropic-ai/claude-code
```
Then, install Claude Code Router:
```shell
npm install -g @musistudio/claude-code-router
```
### 2. Configuration
Create and configure your `~/.claude-code-router/config.json` file. For more details, you can refer to `config.example.json`.
The `config.json` file has several key sections:
- **`PROXY_URL`** (optional): You can set a proxy for API requests, for example: `"PROXY_URL": "http://127.0.0.1:7890"`.
- **`LOG`** (optional): You can enable logging by setting it to `true`. When set to `false`, no log files will be created. Default is `true`.
- **`LOG_LEVEL`** (optional): Set the logging level. Available options are: `"fatal"`, `"error"`, `"warn"`, `"info"`, `"debug"`, `"trace"`. Default is `"debug"`.
- **Logging Systems**: The Claude Code Router uses two separate logging systems:
- **Server-level logs**: HTTP requests, API calls, and server events are logged using pino in the `~/.claude-code-router/logs/` directory with filenames like `ccr-*.log`
- **Application-level logs**: Routing decisions and business logic events are logged in `~/.claude-code-router/claude-code-router.log`
- **`APIKEY`** (optional): You can set a secret key to authenticate requests. When set, clients must provide this key in the `Authorization` header (e.g., `Bearer your-secret-key`) or the `x-api-key` header. Example: `"APIKEY": "your-secret-key"`.
- **`HOST`** (optional): You can set the host address for the server. If `APIKEY` is not set, the host will be forced to `127.0.0.1` for security reasons to prevent unauthorized access. Example: `"HOST": "0.0.0.0"`.
- **`NON_INTERACTIVE_MODE`** (optional): When set to `true`, enables compatibility with non-interactive environments like GitHub Actions, Docker containers, or other CI/CD systems. This sets appropriate environment variables (`CI=true`, `FORCE_COLOR=0`, etc.) and configures stdin handling to prevent the process from hanging in automated environments. Example: `"NON_INTERACTIVE_MODE": true`.
- **`Providers`**: Used to configure different model providers.
- **`Router`**: Used to set up routing rules. `default` specifies the default model, which will be used for all requests if no other route is configured.
- **`API_TIMEOUT_MS`**: Specifies the timeout for API calls in milliseconds.
#### Environment Variable Interpolation
Claude Code Router supports environment variable interpolation for secure API key management. You can reference environment variables in your `config.json` using either `$VAR_NAME` or `${VAR_NAME}` syntax:
```json
{
"OPENAI_API_KEY": "$OPENAI_API_KEY",
"GEMINI_API_KEY": "${GEMINI_API_KEY}",
"Providers": [
{
"name": "openai",
"api_base_url": "https://api.openai.com/v1/chat/completions",
"api_key": "$OPENAI_API_KEY",
"models": ["gpt-5", "gpt-5-mini"]
}
]
}
```
This allows you to keep sensitive API keys in environment variables instead of hardcoding them in configuration files. The interpolation works recursively through nested objects and arrays.
Here is a comprehensive example:
```json
{
"APIKEY": "your-secret-key",
"PROXY_URL": "http://127.0.0.1:7890",
"LOG": true,
"API_TIMEOUT_MS": 600000,
"NON_INTERACTIVE_MODE": false,
"Providers": [
{
"name": "openrouter",
"api_base_url": "https://openrouter.ai/api/v1/chat/completions",
"api_key": "sk-xxx",
"models": [
"google/gemini-2.5-pro-preview",
"anthropic/claude-sonnet-4",
"anthropic/claude-3.5-sonnet",
"anthropic/claude-3.7-sonnet:thinking"
],
"transformer": {
"use": ["openrouter"]
}
},
{
"name": "deepseek",
"api_base_url": "https://api.deepseek.com/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-chat", "deepseek-reasoner"],
"transformer": {
"use": ["deepseek"],
"deepseek-chat": {
"use": ["tooluse"]
}
}
},
{
"name": "ollama",
"api_base_url": "http://localhost:11434/v1/chat/completions",
"api_key": "ollama",
"models": ["qwen2.5-coder:latest"]
},
{
"name": "gemini",
"api_base_url": "https://generativelanguage.googleapis.com/v1beta/models/",
"api_key": "sk-xxx",
"models": ["gemini-2.5-flash", "gemini-2.5-pro"],
"transformer": {
"use": ["gemini"]
}
},
{
"name": "volcengine",
"api_base_url": "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-v3-250324", "deepseek-r1-250528"],
"transformer": {
"use": ["deepseek"]
}
},
{
"name": "modelscope",
"api_base_url": "https://api-inference.modelscope.cn/v1/chat/completions",
"api_key": "",
"models": ["Qwen/Qwen3-Coder-480B-A35B-Instruct", "Qwen/Qwen3-235B-A22B-Thinking-2507"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 65536
}
],
"enhancetool"
],
"Qwen/Qwen3-235B-A22B-Thinking-2507": {
"use": ["reasoning"]
}
}
},
{
"name": "dashscope",
"api_base_url": "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions",
"api_key": "",
"models": ["qwen3-coder-plus"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 65536
}
],
"enhancetool"
]
}
},
{
"name": "aihubmix",
"api_base_url": "https://aihubmix.com/v1/chat/completions",
"api_key": "sk-",
"models": [
"Z/glm-4.5",
"claude-opus-4-20250514",
"gemini-2.5-pro"
]
}
],
"Router": {
"default": "deepseek,deepseek-chat",
"background": "ollama,qwen2.5-coder:latest",
"think": "deepseek,deepseek-reasoner",
"longContext": "openrouter,google/gemini-2.5-pro-preview",
"longContextThreshold": 60000,
"webSearch": "gemini,gemini-2.5-flash"
}
}
```
### 3. Running Claude Code with the Router
Start Claude Code using the router:
```shell
ccr code
```
> **Note**: After modifying the configuration file, you need to restart the service for the changes to take effect:
>
> ```shell
> ccr restart
> ```
### 4. UI Mode
For a more intuitive experience, you can use the UI mode to manage your configuration:
```shell
ccr ui
```
This will open a web-based interface where you can easily view and edit your `config.json` file.
### 5. CLI Model Management
For users who prefer terminal-based workflows, you can use the interactive CLI model selector:
```shell
ccr model
```
This command provides an interactive interface to:
- View current configuration:
- See all configured models (default, background, think, longContext, webSearch, image)
- Switch models: Quickly change which model is used for each router type
- Add new models: Add models to existing providers
- Create new providers: Set up complete provider configurations including:
- Provider name and API endpoint
- API key
- Available models
- Transformer configuration with support for:
- Multiple transformers (openrouter, deepseek, gemini, etc.)
- Transformer options (e.g., maxtoken with custom limits)
- Provider-specific routing (e.g., OpenRouter provider preferences)
The CLI tool validates all inputs and provides helpful prompts to guide you through the configuration process, making it easy to manage complex setups without editing JSON files manually.
#### Providers
The `Providers` array is where you define the different model providers you want to use. Each provider object requires:
- `name`: A unique name for the provider.
- `api_base_url`: The full API endpoint for chat completions.
- `api_key`: Your API key for the provider.
- `models`: A list of model names available from this provider.
- `transformer` (optional): Specifies transformers to process requests and responses.
#### Transformers
Transformers allow you to modify the request and response payloads to ensure compatibility with different provider APIs.
- **Global Transformer**: Apply a transformer to all models from a provider. In this example, the `openrouter` transformer is applied to all models under the `openrouter` provider.
```json
{
"name": "openrouter",
"api_base_url": "https://openrouter.ai/api/v1/chat/completions",
"api_key": "sk-xxx",
"models": [
"google/gemini-2.5-pro-preview",
"anthropic/claude-sonnet-4",
"anthropic/claude-3.5-sonnet"
],
"transformer": { "use": ["openrouter"] }
}
```
- **Model-Specific Transformer**: Apply a transformer to a specific model. In this example, the `deepseek` transformer is applied to all models, and an additional `tooluse` transformer is applied only to the `deepseek-chat` model.
```json
{
"name": "deepseek",
"api_base_url": "https://api.deepseek.com/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-chat", "deepseek-reasoner"],
"transformer": {
"use": ["deepseek"],
"deepseek-chat": { "use": ["tooluse"] }
}
}
```
- **Passing Options to a Transformer**: Some transformers, like `maxtoken`, accept options. To pass options, use a nested array where the first element is the transformer name and the second is an options object.
```json
{
"name": "siliconflow",
"api_base_url": "https://api.siliconflow.cn/v1/chat/completions",
"api_key": "sk-xxx",
"models": ["moonshotai/Kimi-K2-Instruct"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 16384
}
]
]
}
}
```
**Available Built-in Transformers:**
- `Anthropic`:If you use only the `Anthropic` transformer, it will preserve the original request and response parameters(you can use it to connect directly to an Anthropic endpoint).
- `deepseek`: Adapts requests/responses for DeepSeek API.
- `gemini`: Adapts requests/responses for Gemini API.
- `openrouter`: Adapts requests/responses for OpenRouter API. It can also accept a `provider` routing parameter to specify which underlying providers OpenRouter should use. For more details, refer to the [OpenRouter documentation](https://openrouter.ai/docs/features/provider-routing). See an example below:
```json
"transformer": {
"use": ["openrouter"],
"moonshotai/kimi-k2": {
"use": [
[
"openrouter",
{
"provider": {
"only": ["moonshotai/fp8"]
}
}
]
]
}
}
```
- `groq`: Adapts requests/responses for groq API.
- `maxtoken`: Sets a specific `max_tokens` value.
- `tooluse`: Optimizes tool usage for certain models via `tool_choice`.
- `gemini-cli` (experimental): Unofficial support for Gemini via Gemini CLI [gemini-cli.js](https://gist.github.com/musistudio/1c13a65f35916a7ab690649d3df8d1cd).
- `reasoning`: Used to process the `reasoning_content` field.
- `sampling`: Used to process sampling information fields such as `temperature`, `top_p`, `top_k`, and `repetition_penalty`.
- `enhancetool`: Adds a layer of error tolerance to the tool call parameters returned by the LLM (this will cause the tool call information to no longer be streamed).
- `cleancache`: Clears the `cache_control` field from requests.
- `vertex-gemini`: Handles the Gemini API using Vertex authentication.
- `chutes-glm` Unofficial support for GLM 4.5 model via Chutes [chutes-glm-transformer.js](https://gist.github.com/vitobotta/2be3f33722e05e8d4f9d2b0138b8c863).
- `qwen-cli` (experimental): Unofficial support for qwen3-coder-plus model via Qwen CLI [qwen-cli.js](https://gist.github.com/musistudio/f5a67841ced39912fd99e42200d5ca8b).
- `rovo-cli` (experimental): Unofficial support for gpt-5 via Atlassian Rovo Dev CLI [rovo-cli.js](https://gist.github.com/SaseQ/c2a20a38b11276537ec5332d1f7a5e53).
**Custom Transformers:**
You can also create your own transformers and load them via the `transformers` field in `config.json`.
```json
{
"transformers": [
{
"path": "/User/xxx/.claude-code-router/plugins/gemini-cli.js",
"options": {
"project": "xxx"
}
}
]
}
```
#### Router
The `Router` object defines which model to use for different scenarios:
- `default`: The default model for general tasks.
- `background`: A model for background tasks. This can be a smaller, local model to save costs.
- `think`: A model for reasoning-heavy tasks, like Plan Mode.
- `longContext`: A model for handling long contexts (e.g., > 60K tokens).
- `longContextThreshold` (optional): The token count threshold for triggering the long context model. Defaults to 60000 if not specified.
- `webSearch`: Used for handling web search tasks and this requires the model itself to support the feature. If you're using openrouter, you need to add the `:online` suffix after the model name.
- `image` (beta): Used for handling image-related tasks (supported by CCR’s built-in agent). If the model does not support tool calling, you need to set the `config.forceUseImageAgent` property to `true`.
- You can also switch models dynamically in Claude Code with the `/model` command:
`/model provider_name,model_name`
Example: `/model openrouter,anthropic/claude-3.5-sonnet`
#### Custom Router
For more advanced routing logic, you can specify a custom router script via the `CUSTOM_ROUTER_PATH` in your `config.json`. This allows you to implement complex routing rules beyond the default scenarios.
In your `config.json`:
```json
{
"CUSTOM_ROUTER_PATH": "/User/xxx/.claude-code-router/custom-router.js"
}
```
The custom router file must be a JavaScript module that exports an `async` function. This function receives the request object and the config object as arguments and should return the provider and model name as a string (e.g., `"provider_name,model_name"`), or `null` to fall back to the default router.
Here is an example of a `custom-router.js` based on `custom-router.example.js`:
```javascript
// /User/xxx/.claude-code-router/custom-router.js
/**
* A custom router function to determine which model to use based on the request.
*
* @param {object} req - The request object from Claude Code, containing the request body.
* @param {object} config - The application's config object.
* @returns {Promise<string|null>} - A promise that resolves to the "provider,model_name" string, or null to use the default router.
*/
module.exports = async function router(req, config) {
const userMessage = req.body.messages.find((m) => m.role === "user")?.content;
if (userMessage && userMessage.includes("explain this code")) {
// Use a powerful model for code explanation
return "openrouter,anthropic/claude-3.5-sonnet";
}
// Fallback to the default router configuration
return null;
};
```
##### Subagent Routing
For routing within subagents, you must specify a particular provider and model by including `<CCR-SUBAGENT-MODEL>provider,model</CCR-SUBAGENT-MODEL>` at the **beginning** of the subagent's prompt. This allows you to direct specific subagent tasks to designated models.
**Example:**
```
<CCR-SUBAGENT-MODEL>openrouter,anthropic/claude-3.5-sonnet</CCR-SUBAGENT-MODEL>
Please help me analyze this code snippet for potential optimizations...
```
## Status Line (Beta)
To better monitor the status of claude-code-router at runtime, version v1.0.40 includes a built-in statusline tool, which you can enable in the UI.
The effect is as follows:
## 🤖 GitHub Actions
Integrate Claude Code Router into your CI/CD pipeline. After setting up [Claude Code Actions](https://docs.anthropic.com/en/docs/claude-code/github-actions), modify your `.github/workflows/claude.yaml` to use the router:
```yaml
name: Claude Code
on:
issue_comment:
types: [created]
# ... other triggers
jobs:
claude:
if: |
(github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
# ... other conditions
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: read
issues: read
id-token: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 1
- name: Prepare Environment
run: |
curl -fsSL https://bun.sh/install | bash
mkdir -p $HOME/.claude-code-router
cat << 'EOF' > $HOME/.claude-code-router/config.json
{
"log": true,
"NON_INTERACTIVE_MODE": true,
"OPENAI_API_KEY": "${{ secrets.OPENAI_API_KEY }}",
"OPENAI_BASE_URL": "https://api.deepseek.com",
"OPENAI_MODEL": "deepseek-chat"
}
EOF
shell: bash
- name: Start Claude Code Router
run: |
nohup ~/.bun/bin/bunx @musistudio/claude-code-router@1.0.8 start &
shell: bash
- name: Run Claude Code
id: claude
uses: anthropics/claude-code-action@beta
env:
ANTHROPIC_BASE_URL: http://localhost:3456
with:
anthropic_api_key: "any-string-is-ok"
```
> **Note**: When running in GitHub Actions or other automation environments, make sure to set `"NON_INTERACTIVE_MODE": true` in your configuration to prevent the process from hanging due to stdin handling issues.
This setup allows for interesting automations, like running tasks during off-peak hours to reduce API costs.
## 📝 Further Reading
- [Project Motivation and How It Works](blog/en/project-motivation-and-how-it-works.md)
- [Maybe We Can Do More with the Router](blog/en/maybe-we-can-do-more-with-the-route.md)
## ❤️ Support & Sponsoring
If you find this project helpful, please consider sponsoring its development. Your support is greatly appreciated!
[](https://ko-fi.com/F1F31GN2GM)
[Paypal](https://paypal.me/musistudio1999)
<table>
<tr>
<td><img src="/blog/images/alipay.jpg" width="200" alt="Alipay" /></td>
<td><img src="/blog/images/wechat.jpg" width="200" alt="WeChat Pay" /></td>
</tr>
</table>
### Our Sponsors
A huge thank you to all our sponsors for their generous support!
- [AIHubmix](https://aihubmix.com/)
- [BurnCloud](https://ai.burncloud.com)
- [302.AI](https://share.302.ai/ZGVF9w)
- [Z智谱](https://www.bigmodel.cn/claude-code?ic=FPF9IVAGFJ)
- @Simon Leischnig
- [@duanshuaimin](https://github.com/duanshuaimin)
- [@vrgitadmin](https://github.com/vrgitadmin)
- @\*o
- [@ceilwoo](https://github.com/ceilwoo)
- @\*说
- @\*更
- @K\*g
- @R\*R
- [@bobleer](https://github.com/bobleer)
- @\*苗
- @\*划
- [@Clarence-pan](https://github.com/Clarence-pan)
- [@carter003](https://github.com/carter003)
- @S\*r
- @\*晖
- @\*敏
- @Z\*z
- @\*然
- [@cluic](https://github.com/cluic)
- @\*苗
- [@PromptExpert](https://github.com/PromptExpert)
- @\*应
- [@yusnake](https://github.com/yusnake)
- @\*飞
- @董\*
- @\*汀
- @\*涯
- @\*:-）
- @\*\*磊
- @\*琢
- @\*成
- @Z\*o
- @\*琨
- [@congzhangzh](https://github.com/congzhangzh)
- @\*\_
- @Z\*m
- @*鑫
- @c\*y
- @\*昕
- [@witsice](https://github.com/witsice)
- @b\*g
- @\*亿
- @\*辉
- @JACK
- @\*光
- @W\*l
- [@kesku](https://github.com/kesku)
- [@biguncle](https://github.com/biguncle)
- @二吉吉
- @a\*g
- @\*林
- @\*咸
- @\*明
- @S\*y
- @f\*o
- @\*智
- @F\*t
- @r\*c
- [@qierkang](http://github.com/qierkang)
- @\*军
- [@snrise-z](http://github.com/snrise-z)
- @\*王
- [@greatheart1000](http://github.com/greatheart1000)
- @\*王
- @zcutlip
- [@Peng-YM](http://github.com/Peng-YM)
- @\*更
- @\*.
- @F\*t
- @\*政
- @\*铭
- @\*叶
- @七\*o
- @\*青
- @\*\*晨
- @\*远
- @\*霄
- @\*\*吉
- @\*\*飞
- @\*\*驰
- @x\*g
- @\*\*东
- @\*落
- @哆\*k
- @\*涛
- [@苗大](https://github.com/WitMiao)
- @\*呢
- @\d*u
- @crizcraig
(If your name is masked, please contact me via my homepage email to update it with your GitHub username.)
## /README_zh.md
[](README.md)
[](https://discord.gg/rdftVMaUcS)
[](https://github.com/musistudio/claude-code-router/blob/main/LICENSE)
<hr>
> GLM CODING PLAN 是专为AI编码打造的订阅套餐，每月最低仅需20元，即可在十余款主流AI编码工具如Claude Code、中畅享智谱旗舰模型GLM-4.6，为开发者提供顶尖的编码体验。
> 智谱AI为本软件提供了特别优惠，使用以下链接购买可以享受九折优惠：https://www.bigmodel.cn/claude-code?ic=RRVJPB5SII
> 一款强大的工具，可将 Claude Code 请求路由到不同的模型，并自定义任何请求。
## ✨ 功能
- **模型路由**: 根据您的需求将请求路由到不同的模型（例如，后台任务、思考、长上下文）。
- **多提供商支持**: 支持 OpenRouter、DeepSeek、Ollama、Gemini、Volcengine 和 SiliconFlow 等各种模型提供商。
- **请求/响应转换**: 使用转换器为不同的提供商自定义请求和响应。
- **动态模型切换**: 在 Claude Code 中使用 `/model` 命令动态切换模型。
- **GitHub Actions 集成**: 在您的 GitHub 工作流程中触发 Claude Code 任务。
- **插件系统**: 使用自定义转换器扩展功能。
## 🚀 快速入门
### 1. 安装
首先，请确保您已安装 [Claude Code](https://docs.anthropic.com/en/docs/claude-code/quickstart)：
```shell
npm install -g @anthropic-ai/claude-code
```
然后，安装 Claude Code Router：
```shell
npm install -g @musistudio/claude-code-router
```
### 2. 配置
创建并配置您的 `~/.claude-code-router/config.json` 文件。有关更多详细信息，您可以参考 `config.example.json`。
`config.json` 文件有几个关键部分：
- **`PROXY_URL`** (可选): 您可以为 API 请求设置代理，例如：`"PROXY_URL": "http://127.0.0.1:7890"`。
- **`LOG`** (可选): 您可以通过将其设置为 `true` 来启用日志记录。当设置为 `false` 时，将不会创建日志文件。默认值为 `true`。
- **`LOG_LEVEL`** (可选): 设置日志级别。可用选项包括：`"fatal"`、`"error"`、`"warn"`、`"info"`、`"debug"`、`"trace"`。默认值为 `"debug"`。
- **日志系统**: Claude Code Router 使用两个独立的日志系统：
- **服务器级别日志**: HTTP 请求、API 调用和服务器事件使用 pino 记录在 `~/.claude-code-router/logs/` 目录中，文件名类似于 `ccr-*.log`
- **应用程序级别日志**: 路由决策和业务逻辑事件记录在 `~/.claude-code-router/claude-code-router.log` 文件中
- **`APIKEY`** (可选): 您可以设置一个密钥来进行身份验证。设置后，客户端请求必须在 `Authorization` 请求头 (例如, `Bearer your-secret-key`) 或 `x-api-key` 请求头中提供此密钥。例如：`"APIKEY": "your-secret-key"`。
- **`HOST`** (可选): 您可以设置服务的主机地址。如果未设置 `APIKEY`，出于安全考虑，主机地址将强制设置为 `127.0.0.1`，以防止未经授权的访问。例如：`"HOST": "0.0.0.0"`。
- **`NON_INTERACTIVE_MODE`** (可选): 当设置为 `true` 时，启用与非交互式环境（如 GitHub Actions、Docker 容器或其他 CI/CD 系统）的兼容性。这会设置适当的环境变量（`CI=true`、`FORCE_COLOR=0` 等）并配置 stdin 处理，以防止进程在自动化环境中挂起。例如：`"NON_INTERACTIVE_MODE": true`。
- **`Providers`**: 用于配置不同的模型提供商。
- **`Router`**: 用于设置路由规则。`default` 指定默认模型，如果未配置其他路由，则该模型将用于所有请求。
- **`API_TIMEOUT_MS`**: API 请求超时时间，单位为毫秒。
这是一个综合示例：
```json
{
"APIKEY": "your-secret-key",
"PROXY_URL": "http://127.0.0.1:7890",
"LOG": true,
"API_TIMEOUT_MS": 600000,
"NON_INTERACTIVE_MODE": false,
"Providers": [
{
"name": "openrouter",
"api_base_url": "https://openrouter.ai/api/v1/chat/completions",
"api_key": "sk-xxx",
"models": [
"google/gemini-2.5-pro-preview",
"anthropic/claude-sonnet-4",
"anthropic/claude-3.5-sonnet",
"anthropic/claude-3.7-sonnet:thinking"
],
"transformer": {
"use": ["openrouter"]
}
},
{
"name": "deepseek",
"api_base_url": "https://api.deepseek.com/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-chat", "deepseek-reasoner"],
"transformer": {
"use": ["deepseek"],
"deepseek-chat": {
"use": ["tooluse"]
}
}
},
{
"name": "ollama",
"api_base_url": "http://localhost:11434/v1/chat/completions",
"api_key": "ollama",
"models": ["qwen2.5-coder:latest"]
},
{
"name": "gemini",
"api_base_url": "https://generativelanguage.googleapis.com/v1beta/models/",
"api_key": "sk-xxx",
"models": ["gemini-2.5-flash", "gemini-2.5-pro"],
"transformer": {
"use": ["gemini"]
}
},
{
"name": "volcengine",
"api_base_url": "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-v3-250324", "deepseek-r1-250528"],
"transformer": {
"use": ["deepseek"]
}
},
{
"name": "modelscope",
"api_base_url": "https://api-inference.modelscope.cn/v1/chat/completions",
"api_key": "",
"models": ["Qwen/Qwen3-Coder-480B-A35B-Instruct", "Qwen/Qwen3-235B-A22B-Thinking-2507"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 65536
}
],
"enhancetool"
],
"Qwen/Qwen3-235B-A22B-Thinking-2507": {
"use": ["reasoning"]
}
}
},
{
"name": "dashscope",
"api_base_url": "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions",
"api_key": "",
"models": ["qwen3-coder-plus"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 65536
}
],
"enhancetool"
]
}
},
{
"name": "aihubmix",
"api_base_url": "https://aihubmix.com/v1/chat/completions",
"api_key": "sk-",
"models": [
"Z/glm-4.5",
"claude-opus-4-20250514",
"gemini-2.5-pro"
]
}
],
"Router": {
"default": "deepseek,deepseek-chat",
"background": "ollama,qwen2.5-coder:latest",
"think": "deepseek,deepseek-reasoner",
"longContext": "openrouter,google/gemini-2.5-pro-preview",
"longContextThreshold": 60000,
"webSearch": "gemini,gemini-2.5-flash"
}
}
```
### 3. 使用 Router 运行 Claude Code
使用 router 启动 Claude Code：
```shell
ccr code
```
> **注意**: 修改配置文件后，需要重启服务使配置生效：
> ```shell
> ccr restart
> ```
### 4. UI 模式
为了获得更直观的体验，您可以使用 UI 模式来管理您的配置：
```shell
ccr ui
```
这将打开一个基于 Web 的界面，您可以在其中轻松查看和编辑您的 `config.json` 文件。
#### Providers
`Providers` 数组是您定义要使用的不同模型提供商的地方。每个提供商对象都需要：
- `name`: 提供商的唯一名称。
- `api_base_url`: 聊天补全的完整 API 端点。
- `api_key`: 您提供商的 API 密钥。
- `models`: 此提供商可用的模型名称列表。
- `transformer` (可选): 指定用于处理请求和响应的转换器。
#### Transformers
Transformers 允许您修改请求和响应负载，以确保与不同提供商 API 的兼容性。
- **全局 Transformer**: 将转换器应用于提供商的所有模型。在此示例中，`openrouter` 转换器将应用于 `openrouter` 提供商下的所有模型。
```json
{
"name": "openrouter",
"api_base_url": "https://openrouter.ai/api/v1/chat/completions",
"api_key": "sk-xxx",
"models": [
"google/gemini-2.5-pro-preview",
"anthropic/claude-sonnet-4",
"anthropic/claude-3.5-sonnet"
],
"transformer": { "use": ["openrouter"] }
}
```
- **特定于模型的 Transformer**: 将转换器应用于特定模型。在此示例中，`deepseek` 转换器应用于所有模型，而额外的 `tooluse` 转换器仅应用于 `deepseek-chat` 模型。
```json
{
"name": "deepseek",
"api_base_url": "https://api.deepseek.com/chat/completions",
"api_key": "sk-xxx",
"models": ["deepseek-chat", "deepseek-reasoner"],
"transformer": {
"use": ["deepseek"],
"deepseek-chat": { "use": ["tooluse"] }
}
}
```
- **向 Transformer 传递选项**: 某些转换器（如 `maxtoken`）接受选项。要传递选项，请使用嵌套数组，其中第一个元素是转换器名称，第二个元素是选项对象。
```json
{
"name": "siliconflow",
"api_base_url": "https://api.siliconflow.cn/v1/chat/completions",
"api_key": "sk-xxx",
"models": ["moonshotai/Kimi-K2-Instruct"],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 16384
}
]
]
}
}
```
**可用的内置 Transformer：**
- `Anthropic`: 如果你只使用这一个转换器，则会直接透传请求和响应(你可以用它来接入其他支持Anthropic端点的服务商)。
- `deepseek`: 适配 DeepSeek API 的请求/响应。
- `gemini`: 适配 Gemini API 的请求/响应。
- `openrouter`: 适配 OpenRouter API 的请求/响应。它还可以接受一个 `provider` 路由参数，以指定 OpenRouter 应使用哪些底层提供商。有关更多详细信息，请参阅 [OpenRouter 文档](https://openrouter.ai/docs/features/provider-routing)。请参阅下面的示例：
```json
"transformer": {
"use": ["openrouter"],
"moonshotai/kimi-k2": {
"use": [
[
"openrouter",
{
"provider": {
"only": ["moonshotai/fp8"]
}
}
]
]
}
}
```
- `groq`: 适配 groq API 的请求/响应
- `maxtoken`: 设置特定的 `max_tokens` 值。
- `tooluse`: 优化某些模型的工具使用(通过`tool_choice`参数)。
- `gemini-cli` (实验性): 通过 Gemini CLI [gemini-cli.js](https://gist.github.com/musistudio/1c13a65f35916a7ab690649d3df8d1cd) 对 Gemini 的非官方支持。
- `reasoning`: 用于处理 `reasoning_content` 字段。
- `sampling`: 用于处理采样信息字段，如 `temperature`、`top_p`、`top_k` 和 `repetition_penalty`。
- `enhancetool`: 对 LLM 返回的工具调用参数增加一层容错处理（这会导致不再流式返回工具调用信息）。
- `cleancache`: 清除请求中的 `cache_control` 字段。
- `vertex-gemini`: 处理使用 vertex 鉴权的 gemini api。
- `qwen-cli` (实验性): 通过 Qwen CLI [qwen-cli.js](https://gist.github.com/musistudio/f5a67841ced39912fd99e42200d5ca8b) 对 qwen3-coder-plus 的非官方支持。
- `rovo-cli` (experimental): 通过 Atlassian Rovo Dev CLI [rovo-cli.js](https://gist.github.com/SaseQ/c2a20a38b11276537ec5332d1f7a5e53) 对 GPT-5 的非官方支持。
**自定义 Transformer:**
您还可以创建自己的转换器，并通过 `config.json` 中的 `transformers` 字段加载它们。
```json
{
"transformers": [
{
"path": "/User/xxx/.claude-code-router/plugins/gemini-cli.js",
"options": {
"project": "xxx"
}
}
]
}
```
#### Router
`Router` 对象定义了在不同场景下使用哪个模型：
- `default`: 用于常规任务的默认模型。
- `background`: 用于后台任务的模型。这可以是一个较小的本地模型以节省成本。
- `think`: 用于推理密集型任务（如计划模式）的模型。
- `longContext`: 用于处理长上下文（例如，> 60K 令牌）的模型。
- `longContextThreshold` (可选): 触发长上下文模型的令牌数阈值。如果未指定，默认为 60000。
- `webSearch`: 用于处理网络搜索任务，需要模型本身支持。如果使用`openrouter`需要在模型后面加上`:online`后缀。
- `image`(测试版): 用于处理图片类任务（采用CCR内置的agent支持），如果该模型不支持工具调用，需要将`config.forceUseImageAgent`属性设置为`true`。
您还可以使用 `/model` 命令在 Claude Code 中动态切换模型：
`/model provider_name,model_name`
示例: `/model openrouter,anthropic/claude-3.5-sonnet`
#### 自定义路由器
对于更高级的路由逻辑，您可以在 `config.json` 中通过 `CUSTOM_ROUTER_PATH` 字段指定一个自定义路由器脚本。这允许您实现超出默认场景的复杂路由规则。
在您的 `config.json` 中配置:
```json
{
"CUSTOM_ROUTER_PATH": "/User/xxx/.claude-code-router/custom-router.js"
}
```
自定义路由器文件必须是一个导出 `async` 函数的 JavaScript 模块。该函数接收请求对象和配置对象作为参数，并应返回提供商和模型名称的字符串（例如 `"provider_name,model_name"`），如果返回 `null` 则回退到默认路由。
这是一个基于 `custom-router.example.js` 的 `custom-router.js` 示例：
```javascript
// /User/xxx/.claude-code-router/custom-router.js
/**
* 一个自定义路由函数，用于根据请求确定使用哪个模型。
*
* @param {object} req - 来自 Claude Code 的请求对象，包含请求体。
* @param {object} config - 应用程序的配置对象。
* @returns {Promise<string|null>} - 一个解析为 "provider,model_name" 字符串的 Promise，如果返回 null，则使用默认路由。
*/
module.exports = async function router(req, config) {
const userMessage = req.body.messages.find(m => m.role === 'user')?.content;
if (userMessage && userMessage.includes('解释这段代码')) {
// 为代码解释任务使用更强大的模型
return 'openrouter,anthropic/claude-3.5-sonnet';
}
// 回退到默认的路由配置
return null;
};
```
##### 子代理路由
对于子代理内的路由，您必须在子代理提示词的**开头**包含 `<CCR-SUBAGENT-MODEL>provider,model</CCR-SUBAGENT-MODEL>` 来指定特定的提供商和模型。这样可以将特定的子代理任务定向到指定的模型。
**示例：**
```
<CCR-SUBAGENT-MODEL>openrouter,anthropic/claude-3.5-sonnet</CCR-SUBAGENT-MODEL>
请帮我分析这段代码是否存在潜在的优化空间...
```
## Status Line (Beta)
为了在运行时更好的查看claude-code-router的状态，claude-code-router在v1.0.40内置了一个statusline工具，你可以在UI中启用它，
效果如下：
## 🤖 GitHub Actions
将 Claude Code Router 集成到您的 CI/CD 管道中。在设置 [Claude Code Actions](https://docs.anthropic.com/en/docs/claude-code/github-actions) 后，修改您的 `.github/workflows/claude.yaml` 以使用路由器：
```yaml
name: Claude Code
on:
issue_comment:
types: [created]
# ... other triggers
jobs:
claude:
if: |
(github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
# ... other conditions
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: read
issues: read
id-token: write
steps:
- name: Checkout repository
uses: actions/checkout@v4
with:
fetch-depth: 1
- name: Prepare Environment
run: |
curl -fsSL https://bun.sh/install | bash
mkdir -p $HOME/.claude-code-router
cat << 'EOF' > $HOME/.claude-code-router/config.json
{
"log": true,
"NON_INTERACTIVE_MODE": true,
"OPENAI_API_KEY": "${{ secrets.OPENAI_API_KEY }}",
"OPENAI_BASE_URL": "https://api.deepseek.com",
"OPENAI_MODEL": "deepseek-chat"
}
EOF
shell: bash
- name: Start Claude Code Router
run: |
nohup ~/.bun/bin/bunx @musistudio/claude-code-router@1.0.8 start &
shell: bash
- name: Run Claude Code
id: claude
uses: anthropics/claude-code-action@beta
env:
ANTHROPIC_BASE_URL: http://localhost:3456
with:
anthropic_api_key: "any-string-is-ok"
```
这种设置可以实现有趣的自动化，例如在非高峰时段运行任务以降低 API 成本。
## 📝 深入阅读
- [项目动机和工作原理](blog/zh/项目初衷及原理.md)
- [也许我们可以用路由器做更多事情](blog/zh/或许我们能在Router中做更多事情.md)
## ❤️ 支持与赞助
如果您觉得这个项目有帮助，请考虑赞助它的开发。非常感谢您的支持！
[](https://ko-fi.com/F1F31GN2GM)
[Paypal](https://paypal.me/musistudio1999)
<table>
<tr>
<td><img src="/blog/images/alipay.jpg" width="200" alt="Alipay" /></td>
<td><img src="/blog/images/wechat.jpg" width="200" alt="WeChat Pay" /></td>
</tr>
</table>
### 我们的赞助商
非常感谢所有赞助商的慷慨支持！
- [AIHubmix](https://aihubmix.com/)
- [BurnCloud](https://ai.burncloud.com)
- [302.AI](https://share.302.ai/ZGVF9w)
- [Z智谱](https://www.bigmodel.cn/claude-code?ic=FPF9IVAGFJ)
- @Simon Leischnig
- [@duanshuaimin](https://github.com/duanshuaimin)
- [@vrgitadmin](https://github.com/vrgitadmin)
- @*o
- [@ceilwoo](https://github.com/ceilwoo)
- @*说
- @*更
- @K*g
- @R*R
- [@bobleer](https://github.com/bobleer)
- @*苗
- @*划
- [@Clarence-pan](https://github.com/Clarence-pan)
- [@carter003](https://github.com/carter003)
- @S*r
- @*晖
- @*敏
- @Z*z
- @*然
- [@cluic](https://github.com/cluic)
- @*苗
- [@PromptExpert](https://github.com/PromptExpert)
- @*应
- [@yusnake](https://github.com/yusnake)
- @*飞
- @董*
- @*汀
- @*涯
- @*:-）
- @**磊
- @*琢
- @*成
- @Z*o
- @\*琨
- [@congzhangzh](https://github.com/congzhangzh)
- @*_
- @Z\*m
- @*鑫
- @c\*y
- @\*昕
- [@witsice](https://github.com/witsice)
- @b\*g
- @\*亿
- @\*辉
- @JACK
- @\*光
- @W\*l
- [@kesku](https://github.com/kesku)
- [@biguncle](https://github.com/biguncle)
- @二吉吉
- @a\*g
- @\*林
- @\*咸
- @\*明
- @S\*y
- @f\*o
- @\*智
- @F\*t
- @r\*c
- [@qierkang](http://github.com/qierkang)
- @\*军
- [@snrise-z](http://github.com/snrise-z)
- @\*王
- [@greatheart1000](http://github.com/greatheart1000)
- @\*王
- @zcutlip
- [@Peng-YM](http://github.com/Peng-YM)
- @\*更
- @\*.
- @F\*t
- @\*政
- @\*铭
- @\*叶
- @七\*o
- @\*青
- @\*\*晨
- @\*远
- @\*霄
- @\*\*吉
- @\*\*飞
- @\*\*驰
- @x\*g
- @\*\*东
- @\*落
- @哆\*k
- @\*涛
- [@苗大](https://github.com/WitMiao)
- @\*呢
- @\d*u
- @crizcraig
（如果您的名字被屏蔽，请通过我的主页电子邮件与我联系，以便使用您的 GitHub 用户名进行更新。）
## 交流群
<img src="/blog/images/wechat_group.jpg" width="200" alt="wechat_group" />
## /blog/en/maybe-we-can-do-more-with-the-route.md
# Maybe We Can Do More with the Router
Since the release of `claude-code-router`, I’ve received a lot of user feedback, and quite a few issues are still open. Most of them are related to support for different providers and the lack of tool usage from the deepseek model.
Originally, I created this project for personal use, mainly to access claude code at a lower cost. So, multi-provider support wasn’t part of the initial design. But during troubleshooting, I discovered that even though most providers claim to be compatible with the OpenAI-style `/chat/completions` interface, there are many subtle differences. For example:
1. When Gemini's tool parameter type is string, the `format` field only supports `date` and `date-time`, and there’s no tool call ID.
2. OpenRouter requires `cache_control` for caching.
3. The official DeepSeek API has a `max_output` of 8192, but Volcano Engine’s limit is even higher.
Aside from these, smaller providers often have quirks in their parameter handling. So I decided to create a new project, [musistudio/llms](https://github.com/musistudio/llms), to deal with these compatibility issues. It uses the OpenAI format as a base and introduces a generic Transformer interface for transforming both requests and responses.
Once a `Transformer` is implemented for each provider, it becomes possible to mix-and-match requests between them. For example, I implemented bidirectional conversion between Anthropic and OpenAI formats in `AnthropicTransformer`, which listens to the `/v1/messages` endpoint. Similarly, `GeminiTransformer` handles Gemini <-> OpenAI format conversions and listens to `/v1beta/models/:modelAndAction`.
When both requests and responses are transformed into a common format, they can interoperate seamlessly:
```
AnthropicRequest -> AnthropicTransformer -> OpenAIRequest -> GeminiTransformer -> GeminiRequest -> GeminiServer
```
```
GeminiResponse -> GeminiTransformer -> OpenAIResponse -> AnthropicTransformer -> AnthropicResponse
```
Using a middleware layer to smooth out differences may introduce some performance overhead, but the main goal here is to enable `claude-code-router` to support multiple providers.
As for the issue of DeepSeek’s lackluster tool usage — I found that it stems from poor instruction adherence in long conversations. Initially, the model actively calls tools, but after several rounds, it starts responding with plain text instead. My first workaround was injecting a system prompt to remind the model to use tools proactively. But in long contexts, the model tends to forget this instruction.
After reading the DeepSeek documentation, I noticed it supports the `tool_choice` parameter, which can be set to `"required"` to force the model to use at least one tool. I tested this by enabling the parameter, and it significantly improved the model’s tool usage. We can remove the setting when it's no longer necessary. With the help of the `Transformer` interface in [musistudio/llms](https://github.com/musistudio/llms), we can modify the request before it’s sent and adjust the response after it’s received.
Inspired by the Plan Mode in `claude code`, I implemented a similar Tool Mode for DeepSeek:
```typescript
export class TooluseTransformer implements Transformer {
name = "tooluse";
transformRequestIn(request: UnifiedChatRequest): UnifiedChatRequest {
if (request.tools?.length) {
request.messages.push({
role: "system",
content: `<system-reminder>Tool mode is active. The user expects you to proactively execute the most suitable tool to help complete the task.
Before invoking a tool, you must carefully evaluate whether it matches the current task. If no available tool is appropriate for the task, you MUST call the \`ExitTool\` to exit tool mode — this is the only valid way to terminate tool mode.
Always prioritize completing the user's task effectively and efficiently by using tools whenever appropriate.</system-reminder>`,
});
request.tool_choice = "required";
request.tools.unshift({
type: "function",
function: {
name: "ExitTool",
description: `Use this tool when you are in tool mode and have completed the task. This is the only valid way to exit tool mode.
IMPORTANT: Before using this tool, ensure that none of the available tools are applicable to the current task. You must evaluate all available options — only if no suitable tool can help you complete the task should you use ExitTool to terminate tool mode.
Examples:
1. Task: "Use a tool to summarize this document" — Do not use ExitTool if a summarization tool is available.
2. Task: "What’s the weather today?" — If no tool is available to answer, use ExitTool after reasoning that none can fulfill the task.`,
parameters: {
type: "object",
properties: {
response: {
type: "string",
description:
"Your response will be forwarded to the user exactly as returned — the tool will not modify or post-process it in any way.",
},
},
required: ["response"],
},
},
});
}
return request;
}
async transformResponseOut(response: Response): Promise<Response> {
if (response.headers.get("Content-Type")?.includes("application/json")) {
const jsonResponse = await response.json();
if (
jsonResponse?.choices[0]?.message.tool_calls?.length &&
jsonResponse?.choices[0]?.message.tool_calls[0]?.function?.name ===
"ExitTool"
) {
const toolArguments = JSON.parse(toolCall.function.arguments || "{}");
jsonResponse.choices[0].message.content = toolArguments.response || "";
delete jsonResponse.choices[0].message.tool_calls;
}
// Handle non-streaming response if needed
return new Response(JSON.stringify(jsonResponse), {
status: response.status,
statusText: response.statusText,
headers: response.headers,
});
} else if (response.headers.get("Content-Type")?.includes("stream")) {
// ...
}
return response;
}
}
```
This transformer ensures the model calls at least one tool. If no tools are appropriate or the task is finished, it can exit using `ExitTool`. Since this relies on the `tool_choice` parameter, it only works with models that support it.
In practice, this approach noticeably improves tool usage for DeepSeek. The tradeoff is that sometimes the model may invoke irrelevant or unnecessary tools, which could increase latency and token usage.
This update is just a small experiment — adding an `“agent”` to the router. Maybe there are more interesting things we can explore from here.
## /blog/en/project-motivation-and-how-it-works.md
# Project Motivation and Principles
As early as the day after Claude Code was released (2025-02-25), I began and completed a reverse engineering attempt of the project. At that time, using Claude Code required registering for an Anthropic account, applying for a waitlist, and waiting for approval. However, due to well-known reasons, Anthropic blocks users from mainland China, making it impossible for me to use the service through normal means. Based on known information, I discovered the following:
1. Claude Code is installed via npm, so it's very likely developed with Node.js.
2. Node.js offers various debugging methods: simple `console.log` usage, launching with `--inspect` to hook into Chrome DevTools, or even debugging obfuscated code using `d8`.
My goal was to use Claude Code without an Anthropic account. I didn’t need the full source code—just a way to intercept and reroute requests made by Claude Code to Anthropic’s models to my own custom endpoint. So I started the reverse engineering process:
1. First, install Claude Code:
```bash
npm install -g @anthropic-ai/claude-code
```
2. After installation, the project is located at `~/.nvm/versions/node/v20.10.0/lib/node_modules/@anthropic-ai/claude-code`(this may vary depending on your Node version manager and version).
3. Open the package.json to analyze the entry point:
```package.json
{
"name": "@anthropic-ai/claude-code",
"version": "1.0.24",
"main": "sdk.mjs",
"types": "sdk.d.ts",
"bin": {
"claude": "cli.js"
},
"engines": {
"node": ">=18.0.0"
},
"type": "module",
"author": "Boris Cherny <boris@anthropic.com>",
"license": "SEE LICENSE IN README.md",
"description": "Use Claude, Anthropic's AI assistant, right from your terminal. Claude can understand your codebase, edit files, run terminal commands, and handle entire workflows for you.",
"homepage": "https://github.com/anthropics/claude-code",
"bugs": {
"url": "https://github.com/anthropics/claude-code/issues"
},
"scripts": {
"prepare": "node -e \"if (!process.env.AUTHORIZED) { console.error('ERROR: Direct publishing is not allowed.\\nPlease use the publish-external.sh script to publish this package.'); process.exit(1); }\"",
"preinstall": "node scripts/preinstall.js"
},
"dependencies": {},
"optionalDependencies": {
"@img/sharp-darwin-arm64": "^0.33.5",
"@img/sharp-darwin-x64": "^0.33.5",
"@img/sharp-linux-arm": "^0.33.5",
"@img/sharp-linux-arm64": "^0.33.5",
"@img/sharp-linux-x64": "^0.33.5",
"@img/sharp-win32-x64": "^0.33.5"
}
}
```
The key entry is `"claude": "cli.js"`. Opening cli.js, you'll see the code is minified and obfuscated. But using WebStorm’s `Format File` feature, you can reformat it for better readability:
Now you can begin understanding Claude Code’s internal logic and prompt structure by reading the code. To dig deeper, you can insert console.log statements or launch in debug mode with Chrome DevTools using:
```bash
NODE_OPTIONS="--inspect-brk=9229" claude
```
This command starts Claude Code in debug mode and opens port 9229. Visit chrome://inspect/ in Chrome and click inspect to begin debugging:
By searching for the keyword api.anthropic.com, you can easily locate where Claude Code makes its API calls. From the surrounding code, it's clear that baseURL can be overridden with the `ANTHROPIC_BASE_URL` environment variable, and `apiKey` and `authToken` can be configured similarly:
So far, we’ve discovered some key information:
1. Environment variables can override Claude Code's `baseURL` and `apiKey`.
2. Claude Code adheres to the Anthropic API specification.
Therefore, we need:
1. A service to convert OpenAI API–compatible requests into Anthropic API format.
2. Set the environment variables before launching Claude Code to redirect requests to this service.
Thus, `claude-code-router` was born. This project uses `Express.js` to implement the `/v1/messages` endpoint. It leverages middlewares to transform request/response formats and supports request rewriting (useful for prompt tuning per model).
Back in February, the full DeepSeek model series had poor support for Function Calling, so I initially used `qwen-max`. It worked well—but without KV cache support, it consumed a large number of tokens and couldn’t provide the native `Claude Code` experience.
So I experimented with a Router-based mode using a lightweight model to dispatch tasks. The architecture included four roles: `router`, `tool`, `think`, and `coder`. Each request passed through a free lightweight model that would decide whether the task involved reasoning, coding, or tool usage. Reasoning and coding tasks looped until a tool was invoked to apply changes. However, the lightweight model lacked the capability to route tasks accurately, and architectural issues prevented it from effectively driving Claude Code.
Everything changed at the end of May when the official Claude Code was launched, and `DeepSeek-R1` model (released 2025-05-28) added Function Call support. I redesigned the system. With the help of AI pair programming, I fixed earlier request/response transformation issues—especially the handling of models that return JSON instead of Function Call outputs.
This time, I used the `DeepSeek-V3` model. It performed better than expected: supporting most tool calls, handling task decomposition and stepwise planning, and—most importantly—costing less than one-tenth the price of Claude 3.5 Sonnet.
The official Claude Code organizes agents differently from the beta version, so I restructured my Router mode to include four roles: the default model, `background`, `think`, and `longContext`.
- The default model handles general tasks and acts as a fallback.
- The `background` model manages lightweight background tasks. According to Anthropic, Claude Haiku 3.5 is often used here, so I routed this to a local `ollama` service.
- The `think` model is responsible for reasoning and planning mode tasks. I use `DeepSeek-R1` here, though it doesn’t support cost control, so `Think` and `UltraThink` behave identically.
- The `longContext` model handles long-context scenarios. The router uses `tiktoken` to calculate token lengths in real time, and if the context exceeds 32K, it switches to this model to compensate for DeepSeek's long-context limitations.
This describes the evolution and reasoning behind the project. By cleverly overriding environment variables, we can forward and modify requests without altering Claude Code’s source—allowing us to benefit from official updates while using our own models and custom prompts.
This project offers a practical approach to running Claude Code under Anthropic’s regional restrictions, balancing `cost`, `performance`, and `customizability`. That said, the official `Max Plan` still offers the best experience if available.
## /blog/images/alipay.jpg
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/alipay.jpg
## /blog/images/chrome-devtools.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/chrome-devtools.png
## /blog/images/chrome-inspect.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/chrome-inspect.png
## /blog/images/claude-code-router-img.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/claude-code-router-img.png
## /blog/images/claude-code.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/claude-code.png
## /blog/images/models.gif
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/models.gif
## /blog/images/roadmap.svg
```svg path="/blog/images/roadmap.svg"
<svg viewBox="0 0 1200 420" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.road { stroke: #7aa2ff; stroke-width: 6; fill: none; filter: drop-shadow(0 6px 18px rgba(122,162,255,0.25)); }
.dash { stroke: rgba(122,162,255,0.25); stroke-width: 6; fill: none; stroke-dasharray: 2 18; }
.node { filter: drop-shadow(0 3px 10px rgba(126,240,193,0.35)); }
.node-circle { fill: #7ef0c1; }
.node-core { fill: #181b22; stroke: white; stroke-width: 1.5; }
.label-bg { fill: rgba(24,27,34,0.8); stroke: rgba(255,255,255,0.12); rx: 12; }
.label-text { fill: #e8ecf1; font-weight: 700; font-size: 14px; font-family: Arial, sans-serif; }
.label-sub { fill: #9aa6b2; font-weight: 500; font-size: 12px; font-family: Arial, sans-serif; }
.spark { fill: none; stroke: #ffd36e; stroke-width: 1.6; stroke-linecap: round; }
</style>
</defs>
<!-- Background road with dash -->
<path class="dash" d="M60,330 C320,260 460,100 720,160 C930,205 990,260 1140,260"/>
<!-- Main road -->
<path class="road" d="M60,330 C320,260 460,100 720,160 C930,205 990,260 1140,260"/>
<!-- New Documentation Node -->
<g class="node" transform="translate(200,280)">
<circle class="node-circle" r="10"/>
<circle class="node-core" r="6"/>
</g>
<!-- New Documentation Label -->
<g transform="translate(80,120)">
<rect class="label-bg" width="260" height="92"/>
<text class="label-text" x="16" y="34">New Documentation</text>
<text class="label-sub" x="16" y="58">Clear structure, examples & best practices</text>
</g>
<!-- Plugin Marketplace Node -->
<g class="node" transform="translate(640,150)">
<circle class="node-circle" r="10"/>
<circle class="node-core" r="6"/>
</g>
<!-- Plugin Marketplace Label -->
<g transform="translate(560,20)">
<rect class="label-bg" width="320" height="100"/>
<text class="label-text" x="16" y="34">Plugin Marketplace</text>
<text class="label-sub" x="16" y="58">Community submissions, ratings & version constraints</text>
</g>
<!-- One More Thing Node -->
<g class="node" transform="translate(1080,255)">
<circle class="node-circle" r="10"/>
<circle class="node-core" r="6"/>
</g>
<!-- One More Thing Label -->
<g transform="translate(940,300)">
<rect class="label-bg" width="250" height="86"/>
<text class="label-text" x="16" y="34">One More Thing</text>
<text class="label-sub" x="16" y="58">🚀 Confidential project · Revealing soon</text>
</g>
<!-- Spark decorations -->
<g transform="translate(1125,290)">
<path class="spark" d="M0 0 L8 0 M4 -4 L4 4"/>
<path class="spark" d="M14 -2 L22 -2 M18 -6 L18 2"/>
<path class="spark" d="M-10 6 L-2 6 M-6 2 L-6 10"/>
</g>
</svg>
```
## /blog/images/search.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/search.png
## /blog/images/sponsors/glm-en.jpg
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/sponsors/glm-en.jpg
## /blog/images/sponsors/glm-zh.jpg
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/sponsors/glm-zh.jpg
## /blog/images/statusline-config.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/statusline-config.png
## /blog/images/statusline.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/statusline.png
## /blog/images/ui.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/ui.png
## /blog/images/webstorm-formate-file.png
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/webstorm-formate-file.png
## /blog/images/wechat.jpg
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/wechat.jpg
## /blog/images/wechat_group.jpg
Binary file available at https://raw.githubusercontent.com/musistudio/claude-code-router/refs/heads/main/blog/images/wechat_group.jpg
## /blog/zh/æÂÂ许æÂÂ们è½å¨Routerä¸ÂÃ¥ÂÂæ´å¤ÂäºÂæÂÂ
.md
# 或许我们能在 Router 中做更多事情
自从`claude-code-router`发布以来，我收到了很多用户的反馈，至今还有不少的 issues 未处理。其中大多都是关于不同的供应商的支持和`deepseek`模型调用工具不积极的问题。
之前开发这个项目主要是为了我自己能以较低成本使用上`claude code`，所以一开始的设计并没有考虑到多供应商的情况。在实际的排查问题中，我发现尽管市面上所有的供应商几乎都宣称兼容`OpenAI`格式调用，即通过`/chat/compeletions`接口调用，但是其中的细节差异非常多。例如:
1. Gemini 的工具参数类型是 string 时，`format`参数只支持`date`和`date-time`，并且没有工具调用 ID。
2. OpenRouter 需要使用`cache_control`进行缓存。
3. DeepSeek 官方 API 的 `max_output` 为 8192，而火山引擎的会更大。
除了这些问题之外，还有一些其他的小的供应商，他们或多或少参数都有点问题。于是，我打算开发一个新的项目[musistudio/llms](https://github.com/musistudio/llms)来处理这种不同服务商的兼容问题。该项目使用 OpenAI 格式为基础的通用格式，提供了一个`Transformer`接口，该接口用于处理转换请求和响应。当我们给不同的服务商都实现了`Transformer`后，我们可以实现不同服务商的混合调用。比如我在`AnthropicTransformer`中实现了`Anthropic`<->`OpenAI`格式的互相转换，并监听了`/v1/messages`端点，在`GeminiTransformer`中实现了`Gemini`<->`OpenAI`格式的互相转换，并监听了`/v1beta/models/:modelAndAction`端点，当他们的请求和响应都被转换成一个通用格式的时候，就可以实现他们的互相调用。
```
AnthropicRequest -> AnthropicTransformer -> OpenAIRequest -> GeminiTransformer -> GeminiRequest -> GeminiServer
```
```
GeminiReseponse -> GeminiTransformer -> OpenAIResponse -> AnthropicTransformer -> AnthropicResponse
```
虽然使用中间层抹平差异可能会带来一些性能问题，但是该项目最初的目的是为了让`claude-code-router`支持不同的供应商。
至于`deepseek`模型调用工具不积极的问题，我发现这是由于`deepseek`在长上下文中的指令遵循不佳导致的。现象就是刚开始模型会主动调用工具，但是在经过几轮对话后模型只会返回文本。一开始的解决方案是通过注入一个系统提示词告知模型需要积极去使用工具以解决用户的问题，但是后面测试发现在长上下文中模型会遗忘该指令。
查看`deepseek`文档后发现模型支持`tool_choice`参数，可以强制让模型最少调用 1 个工具，我尝试将该值设置为`required`，发现模型调用工具的积极性大大增加，现在我们只需要在合适的时候取消这个参数即可。借助[musistudio/llms](https://github.com/musistudio/llms)的`Transformer`可以让我们在发送请求前和收到响应后做点什么，所以我参考`claude code`的`Plan Mode`，实现了一个使用与`deepseek`的`Tool Mode`
```typescript
export class TooluseTransformer implements Transformer {
name = "tooluse";
transformRequestIn(request: UnifiedChatRequest): UnifiedChatRequest {
if (request.tools?.length) {
request.messages.push({
role: "system",
content: `<system-reminder>Tool mode is active. The user expects you to proactively execute the most suitable tool to help complete the task.
Before invoking a tool, you must carefully evaluate whether it matches the current task. If no available tool is appropriate for the task, you MUST call the \`ExitTool\` to exit tool mode — this is the only valid way to terminate tool mode.
Always prioritize completing the user's task effectively and efficiently by using tools whenever appropriate.</system-reminder>`,
});
request.tool_choice = "required";
request.tools.unshift({
type: "function",
function: {
name: "ExitTool",
description: `Use this tool when you are in tool mode and have completed the task. This is the only valid way to exit tool mode.
IMPORTANT: Before using this tool, ensure that none of the available tools are applicable to the current task. You must evaluate all available options — only if no suitable tool can help you complete the task should you use ExitTool to terminate tool mode.
Examples:
1. Task: "Use a tool to summarize this document" — Do not use ExitTool if a summarization tool is available.
2. Task: "What’s the weather today?" — If no tool is available to answer, use ExitTool after reasoning that none can fulfill the task.`,
parameters: {
type: "object",
properties: {
response: {
type: "string",
description:
"Your response will be forwarded to the user exactly as returned — the tool will not modify or post-process it in any way.",
},
},
required: ["response"],
},
},
});
}
return request;
}
async transformResponseOut(response: Response): Promise<Response> {
if (response.headers.get("Content-Type")?.includes("application/json")) {
const jsonResponse = await response.json();
if (
jsonResponse?.choices[0]?.message.tool_calls?.length &&
jsonResponse?.choices[0]?.message.tool_calls[0]?.function?.name ===
"ExitTool"
) {
const toolArguments = JSON.parse(toolCall.function.arguments || "{}");
jsonResponse.choices[0].message.content = toolArguments.response || "";
delete jsonResponse.choices[0].message.tool_calls;
}
// Handle non-streaming response if needed
return new Response(JSON.stringify(jsonResponse), {
status: response.status,
statusText: response.statusText,
headers: response.headers,
});
} else if (response.headers.get("Content-Type")?.includes("stream")) {
// ...
}
return response;
}
}
```
该工具将始终让模型至少调用一个工具，如果没有合适的工具或者任务已完成可以调用`ExitTool`来退出工具模式，因为是依靠`tool_choice`参数实现的，所以仅适用于支持该参数的模型。经过测试，该工具能显著增加`deepseek`的工具调用次数，弊端是可能会有跟任务无关或者没有必要的工具调用导致增加任务执行事件和消耗的 `token` 数。
这次更新仅仅是在 Router 中实现一个`agent`的一次小探索，或许还能做更多其他有趣的事也说不定...
## /blog/zh/项ç®åÂÂè¡·åÂÂÃ¥ÂÂçÂÂ.md
# 项目初衷及原理
早在 Claude Code 发布的第二天(2025-02-25)，我就尝试并完成了对该项目的逆向。当时要使用 Claude Code 你需要注册一个 Anthropic 账号，然后申请 waitlist，等待通过后才能使用。但是因为众所周知的原因，Anthropic 屏蔽了中国区的用户，所以通过正常手段我无法使用，通过已知的信息，我发现：
1. Claude Code 使用 npm 进行安装，所以很大可能其使用 Node.js 进行开发。
2. Node.js 调试手段众多，可以简单使用`console.log`获取想要的信息，也可以使用`--inspect`将其接入`Chrome Devtools`，甚至你可以使用`d8`去调试某些加密混淆的代码。
由于我的目标是让我在没有 Anthropic 账号的情况下使用`Claude Code`，我并不需要获得完整的源代码，只需要将`Claude Code`请求 Anthropic 模型时将其转发到我自定义的接口即可。接下来我就开启了我的逆向过程：
1. 首先安装`Claude Code`
```bash
npm install -g @anthropic-ai/claude-code
```
2. 安装后该项目被放在了`~/.nvm/versions/node/v20.10.0/lib/node_modules/@anthropic-ai/claude-code`中，因为我使用了`nvm`作为我的 node 版本控制器，当前使用`node-v20.10.0`，所以该路径会因人而异。
3. 找到项目路径之后可通过 package.json 分析包入口,内容如下：
```package.json
{
"name": "@anthropic-ai/claude-code",
"version": "1.0.24",
"main": "sdk.mjs",
"types": "sdk.d.ts",
"bin": {
"claude": "cli.js"
},
"engines": {
"node": ">=18.0.0"
},
"type": "module",
"author": "Boris Cherny <boris@anthropic.com>",
"license": "SEE LICENSE IN README.md",
"description": "Use Claude, Anthropic's AI assistant, right from your terminal. Claude can understand your codebase, edit files, run terminal commands, and handle entire workflows for you.",
"homepage": "https://github.com/anthropics/claude-code",
"bugs": {
"url": "https://github.com/anthropics/claude-code/issues"
},
"scripts": {
"prepare": "node -e \"if (!process.env.AUTHORIZED) { console.error('ERROR: Direct publishing is not allowed.\\nPlease use the publish-external.sh script to publish this package.'); process.exit(1); }\"",
"preinstall": "node scripts/preinstall.js"
},
"dependencies": {},
"optionalDependencies": {
"@img/sharp-darwin-arm64": "^0.33.5",
"@img/sharp-darwin-x64": "^0.33.5",
"@img/sharp-linux-arm": "^0.33.5",
"@img/sharp-linux-arm64": "^0.33.5",
"@img/sharp-linux-x64": "^0.33.5",
"@img/sharp-win32-x64": "^0.33.5"
}
}
```
其中`"claude": "cli.js"`就是我们要找的入口，打开 cli.js，发现代码被压缩混淆过了。没关系，借助`webstorm`的`Formate File`功能可以重新格式化，让代码变得稍微好看一点。就像这样：
现在，你可以通过阅读部分代码来了解`Claude Code`的内容工具原理与提示词。你也可以在关键地方使用`console.log`来获得更多信息，当然，也可以使用`Chrome Devtools`来进行断点调试，使用以下命令启动`Claude Code`:
```bash
NODE_OPTIONS="--inspect-brk=9229" claude
```
该命令会以调试模式启动`Claude Code`，并将调试的端口设置为`9229`。这时候通过 Chrome 访问`chrome://inspect/`即可看到当前的`Claude Code`进程，点击`inspect`即可进行调试。
通过搜索关键字符`api.anthropic.com`很容易能找到`Claude Code`用来发请求的地方，根据上下文的查看，很容易发现这里的`baseURL`可以通过环境变量`ANTHROPIC_BASE_URL`进行覆盖，`apiKey`和`authToken`也同理。
到目前为止，我们获得关键信息：
1. 可以使用环境变量覆盖`Claude Code`的`BaseURL`和`apiKey`的配置
2. `Claude Code`使用[Anthropic API](https://docs.anthropic.com/en/api/overview)的规范
所以我们需要：
1. 实现一个服务用来将`OpenAI API`的规范转换成`Anthropic API`格式。
2. 启动`Claude Code`之前写入环境变量将`baseURL`指向到该服务。
于是，`claude-code-router`就诞生了，该项目使用`Express.js`作为 HTTP 服务，实现`/v1/messages`端点，使用`middlewares`处理请求/响应的格式转换以及请求重写功能(可以用来重写 Claude Code 的提示词以针对单个模型进行调优)。
在 2 月份由于`DeepSeek`全系列模型对`Function Call`的支持不佳导致无法直接使用`DeepSeek`模型，所以在当时我选择了`qwen-max`模型，一切表现的都很好，但是`qwen-max`不支持`KV Cache`，意味着我要消耗大量的 token，但是却无法获取`Claude Code`原生的体验。
所以我又尝试了`Router`模式，即使用一个小模型对任务进行分发，一共分为四个模型:`router`、`tool`、`think`和`coder`，所有的请求先经过一个免费的小模型，由小模型去判断应该是进行思考还是编码还是调用工具，再进行任务的分发，如果是思考和编码任务将会进行循环调用，直到最终使用工具写入或修改文件。但是实践下来发现免费的小模型不足以很好的完成任务的分发，再加上整个 Agnet 的设计存在缺陷，导致并不能很好的驱动`Claude Code`。
直到 5 月底，`Claude Code`被正式推出，这时`DeepSeek`全系列模型(R1 于 05-28)均支持`Function Call`，我开始重新设计该项目。在与 AI 的结对编程中我修复了之前的请求和响应转换问题，在某些场景下模型输出 JSON 响应而不是`Function Call`。这次直接使用`DeepSeek-v3`模型，它工作的比我想象中要好：能完成绝大多数工具调用，还支持用步骤规划解决任务，最关键的是`DeepSeek`的价格不到`claude Sonnet 3.5`的十分之一。正式发布的`Claude Code`对 Agent 的组织也不同于测试版，于是在分析了`Claude Code`的请求调用之后，我重新组织了`Router`模式：现在它还是四个模型：默认模型、`background`、`think`和`longContext`。
- 默认模型作为最终的兜底和日常处理
- `background`是用来处理一些后台任务，据 Anthropic 官方说主要用`Claude Haiku 3.5`模型去处理一些小任务，如俳句生成和对话摘要，于是我将其路由到了本地的`ollama`服务。
- `think`模型用于让`Claude Code`进行思考或者在`Plan Mode`下使用，这里我使用的是`DeepSeek-R1`，由于其不支持推理成本控制，所以`Think`和`UltraThink`是一样的逻辑。
- `longContext`是用于处理长下上文的场景，该项目会对每次请求使用tiktoken实时计算上下文长度，如果上下文大于32K则使用该模型，旨在弥补`DeepSeek`在长上下文处理不佳的情况。
以上就是该项目的发展历程以及我的一些思考，通过巧妙的使用环境变量覆盖的手段在不修改`Claude Code`源码的情况下完成请求的转发和修改，这就使得在可以得到 Anthropic 更新的同时使用自己的模型，自定义自己的提示词。该项目只是在 Anthropic 封禁中国区用户的情况下使用`Claude Code`并且达到成本和性能平衡的一种手段。如果可以的话，还是官方的Max Plan体验最好。
## /custom-router.example.js
```js path="/custom-router.example.js"
module.exports = async function router(req, config) {
return "deepseek,deepseek-chat";
};
```
## /docker-compose.yml
```yml path="/docker-compose.yml"
version: "3.8"
services:
claude-code-router:
build: .
ports:
- "3456:3456"
volumes:
- ~/.claude-code-router:/root/.claude-code-router
restart: unless-stopped
```
## /package.json
```json path="/package.json"
{
"name": "@musistudio/claude-code-router",
"version": "1.0.65",
"description": "Use Claude Code without an Anthropics account and route it to another LLM provider",
"bin": {
"ccr": "dist/cli.js"
},
"scripts": {
"build": "node scripts/build.js",
"release": "npm run build && npm publish"
},
"keywords": [
"claude",
"code",
"router",
"llm",
"anthropic"
],
"author": "musistudio",
"license": "MIT",
"dependencies": {
"@fastify/static": "^8.2.0",
"@musistudio/llms": "^1.0.39",
"@inquirer/prompts": "^5.0.0",
"dotenv": "^16.4.7",
"find-process": "^2.0.0",
"json5": "^2.2.3",
"lru-cache": "^11.2.2",
"minimist": "^1.2.8",
"openurl": "^1.1.1",
"rotating-file-stream": "^3.2.7",
"shell-quote": "^1.8.3",
"tiktoken": "^1.0.21",
"uuid": "^11.1.0"
},
"devDependencies": {
"@types/node": "^24.0.15",
"esbuild": "^0.25.1",
"fastify": "^5.4.0",
"shx": "^0.4.0",
"typescript": "^5.8.2"
},
"publishConfig": {
"ignore": [
"!build/",
"src/",
"screenshots/"
]
}
}
```
## /scripts/build.js
```js path="/scripts/build.js"
#!/usr/bin/env node
const { execSync } = require('child_process');
const path = require('path');
const fs = require('fs');
console.log('Building Claude Code Router...');
try {
// Build the main CLI application
console.log('Building CLI application...');
execSync('esbuild src/cli.ts --bundle --platform=node --outfile=dist/cli.js', { stdio: 'inherit' });
// Copy the tiktoken WASM file
console.log('Copying tiktoken WASM file...');
execSync('shx cp node_modules/tiktoken/tiktoken_bg.wasm dist/tiktoken_bg.wasm', { stdio: 'inherit' });
// Build the UI
console.log('Building UI...');
// Check if node_modules exists in ui directory, if not install dependencies
if (!fs.existsSync('ui/node_modules')) {
console.log('Installing UI dependencies...');
execSync('cd ui && npm install', { stdio: 'inherit' });
}
execSync('cd ui && npm run build', { stdio: 'inherit' });
// Copy the built UI index.html to dist
console.log('Copying UI build artifacts...');
execSync('shx cp ui/dist/index.html dist/index.html', { stdio: 'inherit' });
console.log('Build completed successfully!');
} catch (error) {
console.error('Build failed:', error.message);
process.exit(1);
}
```
## /src/agents/image.agent.ts
```ts path="/src/agents/image.agent.ts"
import { IAgent, ITool } from "./type";
import { createHash } from "crypto";
import * as LRU from "lru-cache";
interface ImageCacheEntry {
source: any;
timestamp: number;
}
class ImageCache {
private cache: any;
constructor(maxSize = 100) {
const CacheClass: any = (LRU as any).LRUCache || (LRU as any);
this.cache = new CacheClass({
max: maxSize,
ttl: 5 * 60 * 1000, // 5 minutes
});
}
storeImage(id: string, source: any): void {
if (this.hasImage(id)) return;
this.cache.set(id, {
source,
timestamp: Date.now(),
});
}
getImage(id: string): any {
const entry = this.cache.get(id);
return entry ? entry.source : null;
}
hasImage(hash: string): boolean {
return this.cache.has(hash);
}
clear(): void {
this.cache.clear();
}
size(): number {
return this.cache.size;
}
}
const imageCache = new ImageCache();
export class ImageAgent implements IAgent {
name = "image";
tools: Map<string, ITool>;
constructor() {
this.tools = new Map<string, ITool>();
this.appendTools();
}
shouldHandle(req: any, config: any): boolean {
if (!config.Router.image || req.body.model === config.Router.image)
return false;
const lastMessage = req.body.messages[req.body.messages.length - 1];
if (
!config.forceUseImageAgent &&
lastMessage.role === "user" &&
Array.isArray(lastMessage.content) &&
lastMessage.content.find(
(item: any) =>
item.type === "image" ||
(Array.isArray(item?.content) &&
item.content.some((sub: any) => sub.type === "image"))
)
) {
req.body.model = config.Router.image;
const images = [];
lastMessage.content
.filter((item: any) => item.type === "tool_result")
.forEach((item: any) => {
if (Array.isArray(item.content)) {
item.content.forEach((element: any) => {
if (element.type === "image") {
images.push(element);
}
});
item.content = "read image successfully";
}
});
lastMessage.content.push(...images);
return false;
}
return req.body.messages.some(
(msg: any) =>
msg.role === "user" &&
Array.isArray(msg.content) &&
msg.content.some(
(item: any) =>
item.type === "image" ||
(Array.isArray(item?.content) &&
item.content.some((sub: any) => sub.type === "image"))
)
);
}
appendTools() {
this.tools.set("analyzeImage", {
name: "analyzeImage",
description:
"Analyse image or images by ID and extract information such as OCR text, objects, layout, colors, or safety signals.",
input_schema: {
type: "object",
properties: {
imageId: {
type: "array",
description: "an array of IDs to analyse",
items: {
type: "string",
},
},
task: {
type: "string",
description:
"Details of task to perform on the image.The more detailed, the better",
},
regions: {
type: "array",
description: "Optional regions of interest within the image",
items: {
type: "object",
properties: {
name: {
type: "string",
description: "Optional label for the region",
},
x: { type: "number", description: "X coordinate" },
y: { type: "number", description: "Y coordinate" },
w: { type: "number", description: "Width of the region" },
h: { type: "number", description: "Height of the region" },
units: {
type: "string",
enum: ["px", "pct"],
description: "Units for coordinates and size",
},
},
required: ["x", "y", "w", "h", "units"],
},
},
},
required: ["imageId", "task"],
},
handler: async (args, context) => {
const imageMessages = [];
let imageId;
// Create image messages from cached images
if (args.imageId) {
if (Array.isArray(args.imageId)) {
args.imageId.forEach((imgId: string) => {
const image = imageCache.getImage(
`${context.req.id}_Image#${imgId}`
);
if (image) {
imageMessages.push({
type: "image",
source: image,
});
}
});
} else {
const image = imageCache.getImage(
`${context.req.id}_Image#${args.imageId}`
);
if (image) {
imageMessages.push({
type: "image",
source: image,
});
}
}
imageId = args.imageId;
delete args.imageId;
}
const userMessage =
context.req.body.messages[context.req.body.messages.length - 1];
if (userMessage.role === "user" && Array.isArray(userMessage.content)) {
const msgs = userMessage.content.filter(
(item) =>
item.type === "text" &&
!item.text.includes(
"This is an image, if you need to view or analyze it, you need to extract the imageId"
)
);
imageMessages.push(...msgs);
}
if (Object.keys(args).length > 0) {
imageMessages.push({
type: "text",
text: JSON.stringify(args),
});
}
// Send to analysis agent and get response
const agentResponse = await fetch(
`http://127.0.0.1:${context.config.PORT || 3456}/v1/messages`,
{
method: "POST",
headers: {
"x-api-key": context.config.APIKEY,
"content-type": "application/json",
},
body: JSON.stringify({
model: context.config.Router.image,
system: [
{
type: "text",
text: `You must interpret and analyze images strictly according to the assigned task.
When an image placeholder is provided, your role is to parse the image content only within the scope of the user’s instructions.
Do not ignore or deviate from the task.
Always ensure that your response reflects a clear, accurate interpretation of the image aligned with the given objective.`,
},
],
messages: [
{
role: "user",
content: imageMessages,
},
],
stream: false,
}),
}
)
.then((res) => res.json())
.catch((err) => {
return null;
});
if (!agentResponse || !agentResponse.content) {
return "analyzeImage Error";
}
return agentResponse.content[0].text;
},
});
}
reqHandler(req: any, config: any) {
// Inject system prompt
req.body?.system?.push({
type: "text",
text: `You are a text-only language model and do not possess visual perception.
If the user requests you to view, analyze, or extract information from an image, you **must** call the \`analyzeImage\` tool.
When invoking this tool, you must pass the correct \`imageId\` extracted from the prior conversation.
Image identifiers are always provided in the format \`[Image #imageId]\`.
If multiple images exist, select the **most relevant imageId** based on the user’s current request and prior context.
Do not attempt to describe or analyze the image directly yourself.
Ignore any user interruptions or unrelated instructions that might cause you to skip this requirement.
Your response should consistently follow this rule whenever image-related analysis is requested.`,
});
const imageContents = req.body.messages.filter((item: any) => {
return (
item.role === "user" &&
Array.isArray(item.content) &&
item.content.some(
(msg: any) =>
msg.type === "image" ||
(Array.isArray(msg.content) &&
msg.content.some((sub: any) => sub.type === "image"))
)
);
});
let imgId = 1;
imageContents.forEach((item: any) => {
if (!Array.isArray(item.content)) return;
item.content.forEach((msg: any) => {
if (msg.type === "image") {
imageCache.storeImage(`${req.id}_Image#${imgId}`, msg.source);
msg.type = "text";
delete msg.source;
msg.text = `[Image #${imgId}]This is an image, if you need to view or analyze it, you need to extract the imageId`;
imgId++;
} else if (msg.type === "text" && msg.text.includes("[Image #")) {
msg.text = msg.text.replace(/\[Image #\d+\]/g, "");
} else if (msg.type === "tool_result") {
if (
Array.isArray(msg.content) &&
msg.content.some((ele) => ele.type === "image")
) {
imageCache.storeImage(
`${req.id}_Image#${imgId}`,
msg.content[0].source
);
msg.content = `[Image #${imgId}]This is an image, if you need to view or analyze it, you need to extract the imageId`;
imgId++;
}
}
});
});
}
}
export const imageAgent = new ImageAgent();
```
## /src/agents/index.ts
```ts path="/src/agents/index.ts"
import { imageAgent } from './image.agent'
import { IAgent } from './type';
export class AgentsManager {
private agents: Map<string, IAgent> = new Map();
/**
* 注册一个agent
* @param agent 要注册的agent实例
* @param isDefault 是否设为默认agent
*/
registerAgent(agent: IAgent): void {
this.agents.set(agent.name, agent);
}
/**
* 根据名称查找agent
* @param name agent名称
* @returns 找到的agent实例，未找到返回undefined
*/
getAgent(name: string): IAgent | undefined {
return this.agents.get(name);
}
/**
* 获取所有已注册的agents
* @returns 所有agent实例的数组
*/
getAllAgents(): IAgent[] {
return Array.from(this.agents.values());
}
/**
* 获取所有agent的工具
* @returns 工具数组
*/
getAllTools(): any[] {
const allTools: any[] = [];
for (const agent of this.agents.values()) {
allTools.push(...agent.tools.values());
}
return allTools;
}
}
const agentsManager = new AgentsManager()
agentsManager.registerAgent(imageAgent)
export default agentsManager
```
## /src/agents/type.ts
```ts path="/src/agents/type.ts"
export interface ITool {
name: string;
description: string;
input_schema: any;
handler: (args: any, context: any) => Promise<string>;
}
export interface IAgent {
name: string;
tools: Map<string, ITool>;
shouldHandle: (req: any, config: any) => boolean;
reqHandler: (req: any, config: any) => void;
resHandler?: (payload: any, config: any) => void;
}
```
## /src/cli.ts
```ts path="/src/cli.ts"
#!/usr/bin/env node
import { run } from "./index";
import { showStatus } from "./utils/status";
import { executeCodeCommand } from "./utils/codeCommand";
import { parseStatusLineData, type StatusLineInput } from "./utils/statusline";
import {
cleanupPidFile,
isServiceRunning,
getServiceInfo,
} from "./utils/processCheck";
import { runModelSelector } from "./utils/modelSelector"; // ADD THIS LINE
import { version } from "../package.json";
import { spawn, exec } from "child_process";
import { PID_FILE, REFERENCE_COUNT_FILE } from "./constants";
import fs, { existsSync, readFileSync } from "fs";
import { join } from "path";
const command = process.argv[2];
const HELP_TEXT = `
Usage: ccr [command]
Commands:
start Start server
stop Stop server
restart Restart server
status Show server status
statusline Integrated statusline
code Execute claude command
model Interactive model selection and configuration
ui Open the web UI in browser
-v, version Show version information
-h, help Show help information
Example:
ccr start
ccr code "Write a Hello World"
ccr model
ccr ui
`;
async function waitForService(
timeout = 10000,
initialDelay = 1000
): Promise<boolean> {
// Wait for an initial period to let the service initialize
await new Promise((resolve) => setTimeout(resolve, initialDelay));
const startTime = Date.now();
while (Date.now() - startTime < timeout) {
const isRunning = await isServiceRunning()
if (isRunning) {
// Wait for an additional short period to ensure service is fully ready
await new Promise((resolve) => setTimeout(resolve, 500));
return true;
}
await new Promise((resolve) => setTimeout(resolve, 100));
}
return false;
}
async function main() {
const isRunning = await isServiceRunning()
switch (command) {
case "start":
run();
break;
case "stop":
try {
const pid = parseInt(readFileSync(PID_FILE, "utf-8"));
process.kill(pid);
cleanupPidFile();
if (existsSync(REFERENCE_COUNT_FILE)) {
try {
fs.unlinkSync(REFERENCE_COUNT_FILE);
} catch (e) {
// Ignore cleanup errors
}
}
console.log(
"claude code router service has been successfully stopped."
);
} catch (e) {
console.log(
"Failed to stop the service. It may have already been stopped."
);
cleanupPidFile();
}
break;
case "status":
await showStatus();
break;
case "statusline":
// 从stdin读取JSON输入
let inputData = "";
process.stdin.setEncoding("utf-8");
process.stdin.on("readable", () => {
let chunk;
while ((chunk = process.stdin.read()) !== null) {
inputData += chunk;
}
});
process.stdin.on("end", async () => {
try {
const input: StatusLineInput = JSON.parse(inputData);
const statusLine = await parseStatusLineData(input);
console.log(statusLine);
} catch (error) {
console.error("Error parsing status line data:", error);
process.exit(1);
}
});
break;
// ADD THIS CASE
case "model":
await runModelSelector();
break;
case "code":
if (!isRunning) {
console.log("Service not running, starting service...");
const cliPath = join(__dirname, "cli.js");
const startProcess = spawn("node", [cliPath, "start"], {
detached: true,
stdio: "ignore",
});
// let errorMessage = "";
// startProcess.stderr?.on("data", (data) => {
// errorMessage += data.toString();
// });
startProcess.on("error", (error) => {
console.error("Failed to start service:", error.message);
process.exit(1);
});
// startProcess.on("close", (code) => {
// if (code !== 0 && errorMessage) {
// console.error("Failed to start service:", errorMessage.trim());
// process.exit(1);
// }
// });
startProcess.unref();
if (await waitForService()) {
// Join all code arguments into a single string to preserve spaces within quotes
const codeArgs = process.argv.slice(3);
executeCodeCommand(codeArgs);
} else {
console.error(
"Service startup timeout, please manually run `ccr start` to start the service"
);
process.exit(1);
}
} else {
// Join all code arguments into a single string to preserve spaces within quotes
const codeArgs = process.argv.slice(3);
executeCodeCommand(codeArgs);
}
break;
case "ui":
// Check if service is running
if (!isRunning) {
console.log("Service not running, starting service...");
const cliPath = join(__dirname, "cli.js");
const startProcess = spawn("node", [cliPath, "start"], {
detached: true,
stdio: "ignore",
});
startProcess.on("error", (error) => {
console.error("Failed to start service:", error.message);
process.exit(1);
});
startProcess.unref();
if (!(await waitForService())) {
// If service startup fails, try to start with default config
console.log(
"Service startup timeout, trying to start with default configuration..."
);
const {
initDir,
writeConfigFile,
backupConfigFile,
} = require("./utils");
try {
// Initialize directories
await initDir();
// Backup existing config file if it exists
const backupPath = await backupConfigFile();
if (backupPath) {
console.log(
`Backed up existing configuration file to ${backupPath}`
);
}
// Create a minimal default config file
await writeConfigFile({
PORT: 3456,
Providers: [],
Router: {},
});
console.log(
"Created minimal default configuration file at ~/.claude-code-router/config.json"
);
console.log(
"Please edit this file with your actual configuration."
);
// Try starting the service again
const restartProcess = spawn("node", [cliPath, "start"], {
detached: true,
stdio: "ignore",
});
restartProcess.on("error", (error) => {
console.error(
"Failed to start service with default config:",
error.message
);
process.exit(1);
});
restartProcess.unref();
if (!(await waitForService(15000))) {
// Wait a bit longer for the first start
console.error(
"Service startup still failing. Please manually run `ccr start` to start the service and check the logs."
);
process.exit(1);
}
} catch (error: any) {
console.error(
"Failed to create default configuration:",
error.message
);
process.exit(1);
}
}
}
// Get service info and open UI
const serviceInfo = await getServiceInfo();
// Add temporary API key as URL parameter if successfully generated
const uiUrl = `${serviceInfo.endpoint}/ui/`;
console.log(`Opening UI at ${uiUrl}`);
// Open URL in browser based on platform
const platform = process.platform;
let openCommand = "";
if (platform === "win32") {
// Windows
openCommand = `start ${uiUrl}`;
} else if (platform === "darwin") {
// macOS
openCommand = `open ${uiUrl}`;
} else if (platform === "linux") {
// Linux
openCommand = `xdg-open ${uiUrl}`;
} else {
console.error("Unsupported platform for opening browser");
process.exit(1);
}
exec(openCommand, (error) => {
if (error) {
console.error("Failed to open browser:", error.message);
process.exit(1);
}
});
break;
case "-v":
case "version":
console.log(`claude-code-router version: ${version}`);
break;
case "restart":
// Stop the service if it's running
try {
const pid = parseInt(readFileSync(PID_FILE, "utf-8"));
process.kill(pid);
cleanupPidFile();
if (existsSync(REFERENCE_COUNT_FILE)) {
try {
fs.unlinkSync(REFERENCE_COUNT_FILE);
} catch (e) {
// Ignore cleanup errors
}
}
console.log("claude code router service has been stopped.");
} catch (e) {
console.log("Service was not running or failed to stop.");
cleanupPidFile();
}
// Start the service again in the background
console.log("Starting claude code router service...");
const cliPath = join(__dirname, "cli.js");
const startProcess = spawn("node", [cliPath, "start"], {
detached: true,
stdio: "ignore",
});
startProcess.on("error", (error) => {
console.error("Failed to start service:", error);
process.exit(1);
});
startProcess.unref();
console.log("✅ Service started successfully in the background.");
break;
case "-h":
case "help":
console.log(HELP_TEXT);
break;
default:
console.log(HELP_TEXT);
process.exit(1);
}
}
main().catch(console.error);
```
## /src/constants.ts
```ts path="/src/constants.ts"
import path from "node:path";
import os from "node:os";
export const HOME_DIR = path.join(os.homedir(), ".claude-code-router");
export const CONFIG_FILE = path.join(HOME_DIR, "config.json");
export const PLUGINS_DIR = path.join(HOME_DIR, "plugins");
export const PID_FILE = path.join(HOME_DIR, '.claude-code-router.pid');
export const REFERENCE_COUNT_FILE = path.join(os.tmpdir(), "claude-code-reference-count.txt");
// Claude projects directory
export const CLAUDE_PROJECTS_DIR = path.join(os.homedir(), ".claude", "projects");
export const DEFAULT_CONFIG = {
LOG: false,
OPENAI_API_KEY: "",
OPENAI_BASE_URL: "",
OPENAI_MODEL: "",
};
```
## /src/index.ts
```ts path="/src/index.ts"
import { existsSync } from "fs";
import { writeFile } from "fs/promises";
import { homedir } from "os";
import path, { join } from "path";
import { initConfig, initDir, cleanupLogFiles } from "./utils";
import { createServer } from "./server";
import { router } from "./utils/router";
import { apiKeyAuth } from "./middleware/auth";
import {
cleanupPidFile,
isServiceRunning,
savePid,
} from "./utils/processCheck";
import { CONFIG_FILE } from "./constants";
import { createStream } from 'rotating-file-stream';
import { HOME_DIR } from "./constants";
import { sessionUsageCache } from "./utils/cache";
import {SSEParserTransform} from "./utils/SSEParser.transform";
import {SSESerializerTransform} from "./utils/SSESerializer.transform";
import {rewriteStream} from "./utils/rewriteStream";
import JSON5 from "json5";
import { IAgent } from "./agents/type";
import agentsManager from "./agents";
import { EventEmitter } from "node:events";
const event = new EventEmitter()
async function initializeClaudeConfig() {
const homeDir = homedir();
const configPath = join(homeDir, ".claude.json");
if (!existsSync(configPath)) {
const userID = Array.from(
{ length: 64 },
() => Math.random().toString(16)[2]
).join("");
const configContent = {
numStartups: 184,
autoUpdaterStatus: "enabled",
userID,
hasCompletedOnboarding: true,
lastOnboardingVersion: "1.0.17",
projects: {},
};
await writeFile(configPath, JSON.stringify(configContent, null, 2));
}
}
interface RunOptions {
port?: number;
}
async function run(options: RunOptions = {}) {
// Check if service is already running
const isRunning = await isServiceRunning()
if (isRunning) {
console.log("✅ Service is already running in the background.");
return;
}
await initializeClaudeConfig();
await initDir();
// Clean up old log files, keeping only the 10 most recent ones
await cleanupLogFiles();
const config = await initConfig();
let HOST = config.HOST || "127.0.0.1";
if (config.HOST && !config.APIKEY) {
HOST = "127.0.0.1";
console.warn("⚠️ API key is not set. HOST is forced to 127.0.0.1.");
}
const port = config.PORT || 3456;
// Save the PID of the background process
savePid(process.pid);
// Handle SIGINT (Ctrl+C) to clean up PID file
process.on("SIGINT", () => {
console.log("Received SIGINT, cleaning up...");
cleanupPidFile();
process.exit(0);
});
// Handle SIGTERM to clean up PID file
process.on("SIGTERM", () => {
cleanupPidFile();
process.exit(0);
});
// Use port from environment variable if set (for background process)
const servicePort = process.env.SERVICE_PORT
? parseInt(process.env.SERVICE_PORT)
: port;
// Configure logger based on config settings
const pad = num => (num > 9 ? "" : "0") + num;
const generator = (time, index) => {
if (!time) {
time = new Date()
}
var month = time.getFullYear() + "" + pad(time.getMonth() + 1);
var day = pad(time.getDate());
var hour = pad(time.getHours());
var minute = pad(time.getMinutes());
return `./logs/ccr-${month}${day}${hour}${minute}${pad(time.getSeconds())}${index ? `_${index}` : ''}.log`;
};
const loggerConfig =
config.LOG !== false
? {
level: config.LOG_LEVEL || "debug",
stream: createStream(generator, {
path: HOME_DIR,
maxFiles: 3,
interval: "1d",
compress: false,
maxSize: "50M"
}),
}
: false;
const server = createServer({
jsonPath: CONFIG_FILE,
initialConfig: {
// ...config,
providers: config.Providers || config.providers,
HOST: HOST,
PORT: servicePort,
LOG_FILE: join(
homedir(),
".claude-code-router",
"claude-code-router.log"
),
},
logger: loggerConfig,
});
// Add global error handlers to prevent the service from crashing
process.on("uncaughtException", (err) => {
server.logger.error("Uncaught exception:", err);
});
process.on("unhandledRejection", (reason, promise) => {
server.logger.error("Unhandled rejection at:", promise, "reason:", reason);
});
// Add async preHandler hook for authentication
server.addHook("preHandler", async (req, reply) => {
return new Promise((resolve, reject) => {
const done = (err?: Error) => {
if (err) reject(err);
else resolve();
};
// Call the async auth function
apiKeyAuth(config)(req, reply, done).catch(reject);
});
});
server.addHook("preHandler", async (req, reply) => {
if (req.url.startsWith("/v1/messages") && !req.url.startsWith("/v1/messages/count_tokens")) {
const useAgents = []
for (const agent of agentsManager.getAllAgents()) {
if (agent.shouldHandle(req, config)) {
// 设置agent标识
useAgents.push(agent.name)
// change request body
agent.reqHandler(req, config);
// append agent tools
if (agent.tools.size) {
if (!req.body?.tools?.length) {
req.body.tools = []
}
req.body.tools.unshift(...Array.from(agent.tools.values()).map(item => {
return {
name: item.name,
description: item.description,
input_schema: item.input_schema
}
}))
}
}
}
if (useAgents.length) {
req.agents = useAgents;
}
await router(req, reply, {
config,
event
});
}
});
server.addHook("onError", async (request, reply, error) => {
event.emit('onError', request, reply, error);
})
server.addHook("onSend", (req, reply, payload, done) => {
if (req.sessionId && req.url.startsWith("/v1/messages") && !req.url.startsWith("/v1/messages/count_tokens")) {
if (payload instanceof ReadableStream) {
if (req.agents) {
const abortController = new AbortController();
const eventStream = payload.pipeThrough(new SSEParserTransform())
let currentAgent: undefined | IAgent;
let currentToolIndex = -1
let currentToolName = ''
let currentToolArgs = ''
let currentToolId = ''
const toolMessages: any[] = []
const assistantMessages: any[] = []
// 存储Anthropic格式的消息体，区分文本和工具类型
return done(null, rewriteStream(eventStream, async (data, controller) => {
try {
// 检测工具调用开始
if (data.event === 'content_block_start' && data?.data?.content_block?.name) {
const agent = req.agents.find((name: string) => agentsManager.getAgent(name)?.tools.get(data.data.content_block.name))
if (agent) {
currentAgent = agentsManager.getAgent(agent)
currentToolIndex = data.data.index
currentToolName = data.data.content_block.name
currentToolId = data.data.content_block.id
return undefined;
}
}
// 收集工具参数
if (currentToolIndex > -1 && data.data.index === currentToolIndex && data.data?.delta?.type === 'input_json_delta') {
currentToolArgs += data.data?.delta?.partial_json;
return undefined;
}
// 工具调用完成，处理agent调用
if (currentToolIndex > -1 && data.data.index === currentToolIndex && data.data.type === 'content_block_stop') {
try {
const args = JSON5.parse(currentToolArgs);
assistantMessages.push({
type: "tool_use",
id: currentToolId,
name: currentToolName,
input: args
})
const toolResult = await currentAgent?.tools.get(currentToolName)?.handler(args, {
req,
config
});
toolMessages.push({
"tool_use_id": currentToolId,
"type": "tool_result",
"content": toolResult
})
currentAgent = undefined
currentToolIndex = -1
currentToolName = ''
currentToolArgs = ''
currentToolId = ''
} catch (e) {
console.log(e);
}
return undefined;
}
if (data.event === 'message_delta' && toolMessages.length) {
req.body.messages.push({
role: 'assistant',
content: assistantMessages
})
req.body.messages.push({
role: 'user',
content: toolMessages
})
const response = await fetch(`http://127.0.0.1:${config.PORT || 3456}/v1/messages`, {
method: "POST",
headers: {
'x-api-key': config.APIKEY,
'content-type': 'application/json',
},
body: JSON.stringify(req.body),
})
if (!response.ok) {
return undefined;
}
const stream = response.body!.pipeThrough(new SSEParserTransform())
const reader = stream.getReader()
while (true) {
try {
const {value, done} = await reader.read();
if (done) {
break;
}
if (['message_start', 'message_stop'].includes(value.event)) {
continue
}
// 检查流是否仍然可写
if (!controller.desiredSize) {
break;
}
controller.enqueue(value)
}catch (readError: any) {
if (readError.name === 'AbortError' || readError.code === 'ERR_STREAM_PREMATURE_CLOSE') {
abortController.abort(); // 中止所有相关操作
break;
}
throw readError;
}
}
return undefined
}
return data
}catch (error: any) {
console.error('Unexpected error in stream processing:', error);
// 处理流提前关闭的错误
if (error.code === 'ERR_STREAM_PREMATURE_CLOSE') {
abortController.abort();
return undefined;
}
// 其他错误仍然抛出
throw error;
}
}).pipeThrough(new SSESerializerTransform()))
}
const [originalStream, clonedStream] = payload.tee();
const read = async (stream: ReadableStream) => {
const reader = stream.getReader();
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
// Process the value if needed
const dataStr = new TextDecoder().decode(value);
if (!dataStr.startsWith("event: message_delta")) {
continue;
}
const str = dataStr.slice(27);
try {
const message = JSON.parse(str);
sessionUsageCache.put(req.sessionId, message.usage);
} catch {}
}
} catch (readError: any) {
if (readError.name === 'AbortError' || readError.code === 'ERR_STREAM_PREMATURE_CLOSE') {
console.error('Background read stream closed prematurely');
} else {
console.error('Error in background stream reading:', readError);
}
} finally {
reader.releaseLock();
}
}
read(clonedStream);
return done(null, originalStream)
}
sessionUsageCache.put(req.sessionId, payload.usage);
if (typeof payload ==='object') {
if (payload.error) {
return done(payload.error, null)
} else {
return done(payload, null)
}
}
}
if (typeof payload ==='object' && payload.error) {
return done(payload.error, null)
}
done(null, payload)
});
server.addHook("onSend", async (req, reply, payload) => {
event.emit('onSend', req, reply, payload);
return payload;
})
server.start();
}
export { run };
// run();
```
## /src/middleware/auth.ts
```ts path="/src/middleware/auth.ts"
import { FastifyRequest, FastifyReply } from "fastify";
export const apiKeyAuth =
(config: any) =>
async (req: FastifyRequest, reply: FastifyReply, done: () => void) => {
// Public endpoints that don't require authentication
if (["/", "/health"].includes(req.url) || req.url.startsWith("/ui")) {
return done();
}
const apiKey = config.APIKEY;
if (!apiKey) {
// If no API key is set, enable CORS for local
const allowedOrigins = [
`http://127.0.0.1:${config.PORT || 3456}`,
`http://localhost:${config.PORT || 3456}`,
];
if (req.headers.origin && !allowedOrigins.includes(req.headers.origin)) {
reply.status(403).send("CORS not allowed for this origin");
return;
} else {
reply.header('Access-Control-Allow-Origin', `http://127.0.0.1:${config.PORT || 3456}`);
reply.header('Access-Control-Allow-Origin', `http://localhost:${config.PORT || 3456}`);
}
return done();
}
const authHeaderValue =
req.headers.authorization || req.headers["x-api-key"];
const authKey: string = Array.isArray(authHeaderValue)
? authHeaderValue[0]
: authHeaderValue || "";
if (!authKey) {
reply.status(401).send("APIKEY is missing");
return;
}
let token = "";
if (authKey.startsWith("Bearer")) {
token = authKey.split(" ")[1];
} else {
token = authKey;
}
if (token !== apiKey) {
reply.status(401).send("Invalid API key");
return;
}
done();
};
```
## /src/server.ts
```ts path="/src/server.ts"
import Server from "@musistudio/llms";
import { readConfigFile, writeConfigFile, backupConfigFile } from "./utils";
import { checkForUpdates, performUpdate } from "./utils";
import { join } from "path";
import fastifyStatic from "@fastify/static";
import { readdirSync, statSync, readFileSync, writeFileSync, existsSync } from "fs";
import { homedir } from "os";
import {calculateTokenCount} from "./utils/router";
export const createServer = (config: any): Server => {
const server = new Server(config);
server.app.post("/v1/messages/count_tokens", async (req, reply) => {
const {messages, tools, system} = req.body;
const tokenCount = calculateTokenCount(messages, system, tools);
return { "input_tokens": tokenCount }
});
// Add endpoint to read config.json with access control
server.app.get("/api/config", async (req, reply) => {
return await readConfigFile();
});
server.app.get("/api/transformers", async () => {
const transformers =
server.app._server!.transformerService.getAllTransformers();
const transformerList = Array.from(transformers.entries()).map(
([name, transformer]: any) => ({
name,
endpoint: transformer.endPoint || null,
})
);
return { transformers: transformerList };
});
// Add endpoint to save config.json with access control
server.app.post("/api/config", async (req, reply) => {
const newConfig = req.body;
// Backup existing config file if it exists
const backupPath = await backupConfigFile();
if (backupPath) {
console.log(`Backed up existing configuration file to ${backupPath}`);
}
await writeConfigFile(newConfig);
return { success: true, message: "Config saved successfully" };
});
// Add endpoint to restart the service with access control
server.app.post("/api/restart", async (req, reply) => {
reply.send({ success: true, message: "Service restart initiated" });
// Restart the service after a short delay to allow response to be sent
setTimeout(() => {
const { spawn } = require("child_process");
spawn(process.execPath, [process.argv[1], "restart"], {
detached: true,
stdio: "ignore",
});
}, 1000);
});
// Register static file serving with caching
server.app.register(fastifyStatic, {
root: join(__dirname, "..", "dist"),
prefix: "/ui/",
maxAge: "1h",
});
// Redirect /ui to /ui/ for proper static file serving
server.app.get("/ui", async (_, reply) => {
return reply.redirect("/ui/");
});
// 版本检查端点
server.app.get("/api/update/check", async (req, reply) => {
try {
// 获取当前版本
const currentVersion = require("../package.json").version;
const { hasUpdate, latestVersion, changelog } = await checkForUpdates(currentVersion);
return {
hasUpdate,
latestVersion: hasUpdate ? latestVersion : undefined,
changelog: hasUpdate ? changelog : undefined
};
} catch (error) {
console.error("Failed to check for updates:", error);
reply.status(500).send({ error: "Failed to check for updates" });
}
});
// 执行更新端点
server.app.post("/api/update/perform", async (req, reply) => {
try {
// 只允许完全访问权限的用户执行更新
const accessLevel = (req as any).accessLevel || "restricted";
if (accessLevel !== "full") {
reply.status(403).send("Full access required to perform updates");
return;
}
// 执行更新逻辑
const result = await performUpdate();
return result;
} catch (error) {
console.error("Failed to perform update:", error);
reply.status(500).send({ error: "Failed to perform update" });
}
});
// 获取日志文件列表端点
server.app.get("/api/logs/files", async (req, reply) => {
try {
const logDir = join(homedir(), ".claude-code-router", "logs");
const logFiles: Array<{ name: string; path: string; size: number; lastModified: string }> = [];
if (existsSync(logDir)) {
const files = readdirSync(logDir);
for (const file of files) {
if (file.endsWith('.log')) {
const filePath = join(logDir, file);
const stats = statSync(filePath);
logFiles.push({
name: file,
path: filePath,
size: stats.size,
lastModified: stats.mtime.toISOString()
});
}
}
// 按修改时间倒序排列
logFiles.sort((a, b) => new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime());
}
return logFiles;
} catch (error) {
console.error("Failed to get log files:", error);
reply.status(500).send({ error: "Failed to get log files" });
}
});
// 获取日志内容端点
server.app.get("/api/logs", async (req, reply) => {
try {
const filePath = (req.query as any).file as string;
let logFilePath: string;
if (filePath) {
// 如果指定了文件路径，使用指定的路径
logFilePath = filePath;
} else {
// 如果没有指定文件路径，使用默认的日志文件路径
logFilePath = join(homedir(), ".claude-code-router", "logs", "app.log");
}
if (!existsSync(logFilePath)) {
return [];
}
const logContent = readFileSync(logFilePath, 'utf8');
const logLines = logContent.split('\n').filter(line => line.trim())
return logLines;
} catch (error) {
console.error("Failed to get logs:", error);
reply.status(500).send({ error: "Failed to get logs" });
}
});
// 清除日志内容端点
server.app.delete("/api/logs", async (req, reply) => {
try {
const filePath = (req.query as any).file as string;
let logFilePath: string;
if (filePath) {
// 如果指定了文件路径，使用指定的路径
logFilePath = filePath;
} else {
// 如果没有指定文件路径，使用默认的日志文件路径
logFilePath = join(homedir(), ".claude-code-router", "logs", "app.log");
}
if (existsSync(logFilePath)) {
writeFileSync(logFilePath, '', 'utf8');
}
return { success: true, message: "Logs cleared successfully" };
} catch (error) {
console.error("Failed to clear logs:", error);
reply.status(500).send({ error: "Failed to clear logs" });
}
});
return server;
};
```
## /src/utils/SSEParser.transform.ts
```ts path="/src/utils/SSEParser.transform.ts"
export class SSEParserTransform extends TransformStream<string, any> {
private buffer = '';
private currentEvent: Record<string, any> = {};
constructor() {
super({
transform: (chunk: string, controller) => {
const decoder = new TextDecoder();
const text = decoder.decode(chunk);
this.buffer += text;
const lines = this.buffer.split('\n');
// 保留最后一行（可能不完整）
this.buffer = lines.pop() || '';
for (const line of lines) {
const event = this.processLine(line);
if (event) {
controller.enqueue(event);
}
}
},
flush: (controller) => {
// 处理缓冲区中剩余的内容
if (this.buffer.trim()) {
const events: any[] = [];
this.processLine(this.buffer.trim(), events);
events.forEach(event => controller.enqueue(event));
}
// 推送最后一个事件（如果有）
if (Object.keys(this.currentEvent).length > 0) {
controller.enqueue(this.currentEvent);
}
}
});
}
private processLine(line: string, events?: any[]): any | null {
if (!line.trim()) {
if (Object.keys(this.currentEvent).length > 0) {
const event = { ...this.currentEvent };
this.currentEvent = {};
if (events) {
events.push(event);
return null;
}
return event;
}
return null;
}
if (line.startsWith('event:')) {
this.currentEvent.event = line.slice(6).trim();
} else if (line.startsWith('data:')) {
const data = line.slice(5).trim();
if (data === '[DONE]') {
this.currentEvent.data = { type: 'done' };
} else {
try {
this.currentEvent.data = JSON.parse(data);
} catch (e) {
this.currentEvent.data = { raw: data, error: 'JSON parse failed' };
}
}
} else if (line.startsWith('id:')) {
this.currentEvent.id = line.slice(3).trim();
} else if (line.startsWith('retry:')) {
this.currentEvent.retry = parseInt(line.slice(6).trim());
}
return null;
}
}
```
## /src/utils/SSESerializer.transform.ts
```ts path="/src/utils/SSESerializer.transform.ts"
export class SSESerializerTransform extends TransformStream<any, string> {
constructor() {
super({
transform: (event, controller) => {
let output = '';
if (event.event) {
output += `event: ${event.event}\n`;
}
if (event.id) {
output += `id: ${event.id}\n`;
}
if (event.retry) {
output += `retry: ${event.retry}\n`;
}
if (event.data) {
if (event.data.type === 'done') {
output += 'data: [DONE]\n';
} else {
output += `data: ${JSON.stringify(event.data)}\n`;
}
}
output += '\n';
controller.enqueue(output);
}
});
}
}
```
## /src/utils/cache.ts
```ts path="/src/utils/cache.ts"
// LRU cache for session usage
export interface Usage {
input_tokens: number;
output_tokens: number;
}
class LRUCache<K, V> {
private capacity: number;
private cache: Map<K, V>;
constructor(capacity: number) {
this.capacity = capacity;
this.cache = new Map<K, V>();
}
get(key: K): V | undefined {
if (!this.cache.has(key)) {
return undefined;
}
const value = this.cache.get(key) as V;
// Move to end to mark as recently used
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
put(key: K, value: V): void {
if (this.cache.has(key)) {
// If key exists, delete it to update its position
this.cache.delete(key);
} else if (this.cache.size >= this.capacity) {
// If cache is full, delete the least recently used item
const leastRecentlyUsedKey = this.cache.keys().next().value;
if (leastRecentlyUsedKey !== undefined) {
this.cache.delete(leastRecentlyUsedKey);
}
}
this.cache.set(key, value);
}
values(): V[] {
return Array.from(this.cache.values());
}
}
export const sessionUsageCache = new LRUCache<string, Usage>(100);
```
## /src/utils/close.ts
```ts path="/src/utils/close.ts"
import { isServiceRunning, cleanupPidFile, getReferenceCount } from './processCheck';
import { readFileSync } from 'fs';
import { HOME_DIR } from '../constants';
import { join } from 'path';
export async function closeService() {
const PID_FILE = join(HOME_DIR, '.claude-code-router.pid');
const isRunning = await isServiceRunning()
if (!isRunning) {
console.log("No service is currently running.");
return;
}
if (getReferenceCount() > 0) {
return;
}
try {
const pid = parseInt(readFileSync(PID_FILE, 'utf-8'));
process.kill(pid);
cleanupPidFile();
console.log("claude code router service has been successfully stopped.");
} catch (e) {
console.log("Failed to stop the service. It may have already been stopped.");
cleanupPidFile();
}
}
```
## /src/utils/codeCommand.ts
```ts path="/src/utils/codeCommand.ts"
import { spawn, type StdioOptions } from "child_process";
import { readConfigFile } from ".";
import { closeService } from "./close";
import {
decrementReferenceCount,
incrementReferenceCount,
} from "./processCheck";
import { quote } from 'shell-quote';
import minimist from "minimist";
export async function executeCodeCommand(args: string[] = []) {
// Set environment variables
const config = await readConfigFile();
const port = config.PORT || 3456;
const env: Record<string, string> = {
ANTHROPIC_AUTH_TOKEN: config?.APIKEY || "test",
ANTHROPIC_API_KEY: '',
ANTHROPIC_BASE_URL: `http://127.0.0.1:${port}`,
NO_PROXY: `127.0.0.1`,
DISABLE_TELEMETRY: 'true',
DISABLE_COST_WARNINGS: 'true',
API_TIMEOUT_MS: String(config.API_TIMEOUT_MS ?? 600000), // Default to 10 minutes if not set
// Reset CLAUDE_CODE_USE_BEDROCK when running with ccr code
CLAUDE_CODE_USE_BEDROCK: undefined,
};
const settingsFlag = {
env
};
if (config?.StatusLine?.enabled) {
settingsFlag.statusLine = {
type: "command",
command: "ccr statusline",
padding: 0,
}
}
args.push('--settings', `${JSON.stringify(settingsFlag)}`);
// Non-interactive mode for automation environments
if (config.NON_INTERACTIVE_MODE) {
env.CI = "true";
env.FORCE_COLOR = "0";
env.NODE_NO_READLINE = "1";
env.TERM = "dumb";
}
// Set ANTHROPIC_SMALL_FAST_MODEL if it exists in config
if (config?.ANTHROPIC_SMALL_FAST_MODEL) {
env.ANTHROPIC_SMALL_FAST_MODEL = config.ANTHROPIC_SMALL_FAST_MODEL;
}
// Increment reference count when command starts
incrementReferenceCount();
// Execute claude command
const claudePath = config?.CLAUDE_PATH || process.env.CLAUDE_PATH || "claude";
const joinedArgs = args.length > 0 ? quote(args) : "";
const stdioConfig: StdioOptions = config.NON_INTERACTIVE_MODE
? ["pipe", "inherit", "inherit"] // Pipe stdin for non-interactive
: "inherit"; // Default inherited behavior
const argsObj = minimist(args)
const argsArr = []
for (const [argsObjKey, argsObjValue] of Object.entries(argsObj)) {
if (argsObjKey !== '_' && argsObj[argsObjKey]) {
const prefix = argsObjKey.length === 1 ? '-' : '--';
// For boolean flags, don't append the value
if (argsObjValue === true) {
argsArr.push(`${prefix}${argsObjKey}`);
} else {
argsArr.push(`${prefix}${argsObjKey} ${JSON.stringify(argsObjValue)}`);
}
}
}
const claudeProcess = spawn(
claudePath,
argsArr,
{
env: process.env,
stdio: stdioConfig,
shell: true,
}
);
// Close stdin for non-interactive mode
if (config.NON_INTERACTIVE_MODE) {
claudeProcess.stdin?.end();
}
claudeProcess.on("error", (error) => {
console.error("Failed to start claude command:", error.message);
console.log(
"Make sure Claude Code is installed: npm install -g @anthropic-ai/claude-code"
);
decrementReferenceCount();
process.exit(1);
});
claudeProcess.on("close", (code) => {
decrementReferenceCount();
closeService();
process.exit(code || 0);
});
}
```
## /src/utils/index.ts
```ts path="/src/utils/index.ts"
import fs from "node:fs/promises";
import readline from "node:readline";
import JSON5 from "json5";
import path from "node:path";
import {
CONFIG_FILE,
DEFAULT_CONFIG,
HOME_DIR,
PLUGINS_DIR,
} from "../constants";
import { cleanupLogFiles } from "./logCleanup";
// Function to interpolate environment variables in config values
const interpolateEnvVars = (obj: any): any => {
if (typeof obj === "string") {
// Replace $VAR_NAME or ${VAR_NAME} with environment variable values
return obj.replace(/\$\{([^}]+)\}|\$([A-Z_][A-Z0-9_]*)/g, (match, braced, unbraced) => {
const varName = braced || unbraced;
return process.env[varName] || match; // Keep original if env var doesn't exist
});
} else if (Array.isArray(obj)) {
return obj.map(interpolateEnvVars);
} else if (obj !== null && typeof obj === "object") {
const result: any = {};
for (const [key, value] of Object.entries(obj)) {
result[key] = interpolateEnvVars(value);
}
return result;
}
return obj;
};
const ensureDir = async (dir_path: string) => {
try {
await fs.access(dir_path);
} catch {
await fs.mkdir(dir_path, { recursive: true });
}
};
export const initDir = async () => {
await ensureDir(HOME_DIR);
await ensureDir(PLUGINS_DIR);
await ensureDir(path.join(HOME_DIR, "logs"));
};
const createReadline = () => {
return readline.createInterface({
input: process.stdin,
output: process.stdout,
});
};
const question = (query: string): Promise<string> => {
return new Promise((resolve) => {
const rl = createReadline();
rl.question(query, (answer) => {
rl.close();
resolve(answer);
});
});
};
const confirm = async (query: string): Promise<boolean> => {
const answer = await question(query);
return answer.toLowerCase() !== "n";
};
export const readConfigFile = async () => {
try {
const config = await fs.readFile(CONFIG_FILE, "utf-8");
try {
// Try to parse with JSON5 first (which also supports standard JSON)
const parsedConfig = JSON5.parse(config);
// Interpolate environment variables in the parsed config
return interpolateEnvVars(parsedConfig);
} catch (parseError) {
console.error(`Failed to parse config file at ${CONFIG_FILE}`);
console.error("Error details:", (parseError as Error).message);
console.error("Please check your config file syntax.");
process.exit(1);
}
} catch (readError: any) {
if (readError.code === "ENOENT") {
// Config file doesn't exist, prompt user for initial setup
try {
// Initialize directories
await initDir();
// Backup existing config file if it exists
const backupPath = await backupConfigFile();
if (backupPath) {
console.log(
`Backed up existing configuration file to ${backupPath}`
);
}
const config = {
PORT: 3456,
Providers: [],
Router: {},
}
// Create a minimal default config file
await writeConfigFile(config);
console.log(
"Created minimal default configuration file at ~/.claude-code-router/config.json"
);
console.log(
"Please edit this file with your actual configuration."
);
return config
} catch (error: any) {
console.error(
"Failed to create default configuration:",
error.message
);
process.exit(1);
}
} else {
console.error(`Failed to read config file at ${CONFIG_FILE}`);
console.error("Error details:", readError.message);
process.exit(1);
}
}
};
export const backupConfigFile = async () => {
try {
if (await fs.access(CONFIG_FILE).then(() => true).catch(() => false)) {
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const backupPath = `${CONFIG_FILE}.${timestamp}.bak`;
await fs.copyFile(CONFIG_FILE, backupPath);
// Clean up old backups, keeping only the 3 most recent
try {
const configDir = path.dirname(CONFIG_FILE);
const configFileName = path.basename(CONFIG_FILE);
const files = await fs.readdir(configDir);
// Find all backup files for this config
const backupFiles = files
.filter(file => file.startsWith(configFileName) && file.endsWith('.bak'))
.sort()
.reverse(); // Sort in descending order (newest first)
// Delete all but the 3 most recent backups
if (backupFiles.length > 3) {
for (let i = 3; i < backupFiles.length; i++) {
const oldBackupPath = path.join(configDir, backupFiles[i]);
await fs.unlink(oldBackupPath);
}
}
} catch (cleanupError) {
console.warn("Failed to clean up old backups:", cleanupError);
}
return backupPath;
}
} catch (error) {
console.error("Failed to backup config file:", error);
}
return null;
};
export const writeConfigFile = async (config: any) => {
await ensureDir(HOME_DIR);
const configWithComment = `${JSON.stringify(config, null, 2)}`;
await fs.writeFile(CONFIG_FILE, configWithComment);
};
export const initConfig = async () => {
const config = await readConfigFile();
Object.assign(process.env, config);
return config;
};
// 导出日志清理函数
export { cleanupLogFiles };
// 导出更新功能
export { checkForUpdates, performUpdate } from "./update";
```
## /src/utils/logCleanup.ts
```ts path="/src/utils/logCleanup.ts"
import fs from "node:fs/promises";
import path from "node:path";
import { HOME_DIR } from "../constants";
/**
* Cleans up old log files, keeping only the most recent ones
* @param maxFiles - Maximum number of log files to keep (default: 9)
*/
export async function cleanupLogFiles(maxFiles: number = 9): Promise<void> {
try {
const logsDir = path.join(HOME_DIR, "logs");
// Check if logs directory exists
try {
await fs.access(logsDir);
} catch {
// Logs directory doesn't exist, nothing to clean up
return;
}
// Read all files in the logs directory
const files = await fs.readdir(logsDir);
// Filter for log files (files starting with 'ccr-' and ending with '.log')
const logFiles = files
.filter(file => file.startsWith('ccr-') && file.endsWith('.log'))
.sort()
.reverse(); // Sort in descending order (newest first)
// Delete files exceeding the maxFiles limit
if (logFiles.length > maxFiles) {
for (let i = maxFiles; i < logFiles.length; i++) {
const filePath = path.join(logsDir, logFiles[i]);
try {
await fs.unlink(filePath);
} catch (error) {
console.warn(`Failed to delete log file ${filePath}:`, error);
}
}
}
} catch (error) {
console.warn("Failed to clean up log files:", error);
}
}
```
## /src/utils/modelSelector.ts
```ts path="/src/utils/modelSelector.ts"
import * as fs from 'fs';
import * as path from 'path';
import { select, input, confirm } from '@inquirer/prompts';
// ANSI color codes
const RESET = "\x1B[0m";
const DIM = "\x1B[2m";
const BOLDGREEN = "\x1B[1m\x1B[32m";
const CYAN = "\x1B[36m";
const BOLDCYAN = "\x1B[1m\x1B[36m";
const GREEN = "\x1B[32m";
const YELLOW = "\x1B[33m";
const BOLDYELLOW = "\x1B[1m\x1B[33m";
interface TransformerConfig {
use: Array<string | [string, any]>;
[key: string]: any;
}
interface Provider {
name: string;
api_base_url: string;
api_key: string;
models: string[];
transformer?: TransformerConfig;
}
interface RouterConfig {
default: string;
background?: string;
think?: string;
longContext?: string;
longContextThreshold?: number;
webSearch?: string;
image?: string;
[key: string]: string | number | undefined;
}
interface Config {
Providers: Provider[];
Router: RouterConfig;
[key: string]: any;
}
interface ModelResult {
providerName: string;
modelName: string;
modelType: string;
}
const AVAILABLE_TRANSFORMERS = [
'anthropic',
'deepseek',
'gemini',
'openrouter',
'groq',
'maxtoken',
'tooluse',
'gemini-cli',
'reasoning',
'sampling',
'enhancetool',
'cleancache',
'vertex-gemini',
'chutes-glm',
'qwen-cli',
'rovo-cli'
];
function getConfigPath(): string {
const configDir = path.join(process.env.HOME || process.env.USERPROFILE || '', '.claude-code-router');
const configPath = path.join(configDir, 'config.json');
if (!fs.existsSync(configPath)) {
throw new Error(`config.json not found at ${configPath}`);
}
return configPath;
}
function loadConfig(): Config {
const configPath = getConfigPath();
return JSON.parse(fs.readFileSync(configPath, 'utf-8'));
}
function saveConfig(config: Config): void {
const configPath = getConfigPath();
fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf-8');
console.log(`${GREEN}✓ config.json updated successfully${RESET}\n`);
}
function getAllModels(config: Config) {
const models: any[] = [];
for (const provider of config.Providers) {
for (const model of provider.models) {
models.push({
name: `${BOLDCYAN}${provider.name}${RESET} → ${CYAN} ${model}`,
value: `${provider.name},${model}`,
description: `\n${BOLDCYAN}Provider:${RESET} ${provider.name}`,
provider: provider.name,
model: model
});
}
}
return models;
}
function displayCurrentConfig(config: Config): void {
console.log(`\n${BOLDCYAN}═══════════════════════════════════════════════${RESET}`);
console.log(`${BOLDCYAN} Current Configuration${RESET}`);
console.log(`${BOLDCYAN}═══════════════════════════════════════════════${RESET}\n`);
const formatModel = (routerValue?: string | number) => {
if (!routerValue || typeof routerValue === 'number') {
return `${DIM}Not configured${RESET}`;
}
const [provider, model] = routerValue.split(',');
return `${YELLOW}${provider}${RESET} | ${model}\n ${DIM}- ${routerValue}${RESET}`;
};
console.log(`${BOLDCYAN}Default Model:${RESET}`);
console.log(` ${formatModel(config.Router.default)}\n`);
if (config.Router.background) {
console.log(`${BOLDCYAN}Background Model:${RESET}`);
console.log(` ${formatModel(config.Router.background)}\n`);
}
if (config.Router.think) {
console.log(`${BOLDCYAN}Think Model:${RESET}`);
console.log(` ${formatModel(config.Router.think)}\n`);
}
if (config.Router.longContext) {
console.log(`${BOLDCYAN}Long Context Model:${RESET}`);
console.log(` ${formatModel(config.Router.longContext)}\n`);
}
if (config.Router.webSearch) {
console.log(`${BOLDCYAN}Web Search Model:${RESET}`);
console.log(` ${formatModel(config.Router.webSearch)}\n`);
}
if (config.Router.image) {
console.log(`${BOLDCYAN}Image Model:${RESET}`);
console.log(` ${formatModel(config.Router.image)}\n`);
}
console.log(`\n${BOLDCYAN}═══════════════════════════════════════════════${RESET}`);
console.log(`${BOLDCYAN} Add/Update Model${RESET}`);
console.log(`${BOLDCYAN}═══════════════════════════════════════════════${RESET}\n`);
}
async function selectModelType() {
return await select({
message: `${BOLDYELLOW}Which model configuration do you want to update?${RESET}`,
choices: [
{ name: 'Default Model', value: 'default' },
{ name: 'Background Model', value: 'background' },
{ name: 'Think Model', value: 'think' },
{ name: 'Long Context Model', value: 'longContext' },
{ name: 'Web Search Model', value: 'webSearch' },
{ name: 'Image Model', value: 'image' },
{ name: `${BOLDGREEN}+ Add New Model${RESET}`, value: 'addModel' }
]
});
}
async function selectModel(config: Config, modelType: string) {
const models = getAllModels(config);
return await select({
message: `\n${BOLDYELLOW}Select a model for ${modelType}:${RESET}`,
choices: models,
pageSize: 15
});
}
async function configureTransformers(): Promise<TransformerConfig | undefined> {
const useTransformers = await confirm({
message: `\n${BOLDYELLOW}Add transformer configuration?${RESET}`,
default: false
});
if (!useTransformers) {
return undefined;
}
const transformers: Array<string | [string, any]> = [];
let addMore = true;
while (addMore) {
const transformer = await select({
message: `\n${BOLDYELLOW}Select a transformer:${RESET}`,
choices: AVAILABLE_TRANSFORMERS.map(t => ({ name: t, value: t })),
pageSize: 15
}) as string;
// Check if transformer needs options
if (transformer === 'maxtoken') {
const maxTokens = await input({
message: `\n${BOLDYELLOW}Max tokens:${RESET}`,
default: '30000',
validate: (value: string) => {
const num = parseInt(value);
if (isNaN(num) || num <= 0) {
return 'Please enter a valid positive number';
}
return true;
}
});
transformers.push(['maxtoken', { max_tokens: parseInt(maxTokens) }]);
} else if (transformer === 'openrouter') {
const addProvider = await confirm({
message: `\n${BOLDYELLOW}Add provider routing options?${RESET}`,
default: false
});
if (addProvider) {
const providerInput = await input({
message: 'Provider (e.g., moonshotai/fp8):',
validate: (value: string) => value.trim() !== '' || 'Provider cannot be empty'
});
transformers.push(['openrouter', { provider: { only: [providerInput] } }]);
} else {
transformers.push(transformer);
}
} else {
transformers.push(transformer);
}
addMore = await confirm({
message: `\n${BOLDYELLOW}Add another transformer?${RESET}`,
default: false
});
}
return { use: transformers };
}
async function addNewModel(config: Config): Promise<ModelResult | null> {
const providerChoices = config.Providers.map(p => ({
name: p.name,
value: p.name
}));
providerChoices.push({ name: `${BOLDGREEN}+ Add New Provider${RESET}`, value: '__new__' });
const selectedProvider = await select({
message: `\n${BOLDYELLOW}Select provider for the new model:${RESET}`,
choices: providerChoices
}) as string;
if (selectedProvider === '__new__') {
return await addNewProvider(config);
} else {
return await addModelToExistingProvider(config, selectedProvider);
}
}
async function addModelToExistingProvider(config: Config, providerName: string): Promise<ModelResult | null> {
const modelName = await input({
message: `\n${BOLDYELLOW}Enter the model name:${RESET}`,
validate: (value: string) => {
if (!value.trim()) {
return 'Model name cannot be empty';
}
return true;
}
});
const provider = config.Providers.find(p => p.name === providerName);
if (!provider) {
console.log(`${YELLOW}Provider not found${RESET}`);
return null;
}
if (provider.models.includes(modelName)) {
console.log(`${YELLOW}Model already exists in provider${RESET}`);
return null;
}
provider.models.push(modelName);
// Ask about model-specific transformers
const addModelTransformer = await confirm({
message: `\n${BOLDYELLOW}Add model-specific transformer configuration?${RESET}`,
default: false
});
if (addModelTransformer) {
const transformerConfig = await configureTransformers();
if (transformerConfig && provider.transformer) {
provider.transformer[modelName] = transformerConfig;
}
}
saveConfig(config);
console.log(`${GREEN}✓ Model "${modelName}" added to provider "${providerName}"${RESET}`);
const setAsDefault = await confirm({
message: `\n${BOLDYELLOW}Do you want to set this model in router configuration?${RESET}`,
default: false
});
if (setAsDefault) {
const modelType = await select({
message: `\n${BOLDYELLOW}Select configuration type:${RESET}`,
choices: [
{ name: 'Default Model', value: 'default' },
{ name: 'Background Model', value: 'background' },
{ name: 'Think Model', value: 'think' },
{ name: 'Long Context Model', value: 'longContext' },
{ name: 'Web Search Model', value: 'webSearch' },
{ name: 'Image Model', value: 'image' }
]
}) as string;
return { providerName, modelName, modelType };
}
return null;
}
async function addNewProvider(config: Config): Promise<ModelResult | null> {
console.log(`\n${BOLDCYAN}Adding New Provider${RESET}\n`);
const providerName = await input({
message: `${BOLDYELLOW}Provider name:${RESET}`,
validate: (value: string) => {
if (!value.trim()) {
return 'Provider name cannot be empty';
}
if (config.Providers.some(p => p.name === value)) {
return 'Provider already exists';
}
return true;
}
});
const apiBaseUrl = await input({
message: `\n${BOLDYELLOW}API base URL:${RESET}`,
validate: (value: string) => {
if (!value.trim()) {
return 'API base URL cannot be empty';
}
try {
new URL(value);
return true;
} catch {
return 'Please enter a valid URL';
}
}
});
const apiKey = await input({
message: `\n${BOLDYELLOW}API key:${RESET}`,
validate: (value: string) => {
if (!value.trim()) {
return 'API key cannot be empty';
}
return true;
}
});
const modelsInput = await input({
message: `\n${BOLDYELLOW}Model names (comma-separated):${RESET}`,
validate: (value: string) => {
if (!value.trim()) {
return 'At least one model name is required';
}
return true;
}
});
const models = modelsInput.split(',').map(m => m.trim()).filter(m => m);
const newProvider: Provider = {
name: providerName,
api_base_url: apiBaseUrl,
api_key: apiKey,
models: models
};
// Global transformer configuration
const transformerConfig = await configureTransformers();
if (transformerConfig) {
newProvider.transformer = transformerConfig;
}
config.Providers.push(newProvider);
saveConfig(config);
console.log(`${GREEN}\n✓ Provider "${providerName}" added successfully${RESET}`);
const setAsDefault = await confirm({
message: `\n${BOLDYELLOW}Do you want to set one of these models in router configuration?${RESET}`,
default: false
});
if (setAsDefault && models.length > 0) {
let selectedModel = models[0];
if (models.length > 1) {
selectedModel = await select({
message: `\n${BOLDYELLOW}Select which model to configure:${RESET}`,
choices: models.map(m => ({ name: m, value: m }))
}) as string;
}
const modelType = await select({
message: `\n${BOLDYELLOW}Select configuration type:${RESET}`,
choices: [
{ name: 'Default Model', value: 'default' },
{ name: 'Background Model', value: 'background' },
{ name: 'Think Model', value: 'think' },
{ name: 'Long Context Model', value: 'longContext' },
{ name: 'Web Search Model', value: 'webSearch' },
{ name: 'Image Model', value: 'image' }
]
}) as string;
return { providerName, modelName: selectedModel, modelType };
}
return null;
}
export async function runModelSelector(): Promise<void> {
console.clear();
try {
let config = loadConfig();
displayCurrentConfig(config);
const action = await selectModelType() as string;
if (action === 'addModel') {
const result = await addNewModel(config);
if (result) {
config = loadConfig();
config.Router[result.modelType] = `${result.providerName},${result.modelName}`;
saveConfig(config);
console.log(`${GREEN}✓ ${result.modelType} set to ${result.providerName},${result.modelName}${RESET}`);
}
} else {
const selectedModel = await selectModel(config, action) as string;
config.Router[action] = selectedModel;
saveConfig(config);
console.log(`${GREEN}✓ ${action} model updated to: ${selectedModel}${RESET}`);
}
displayCurrentConfig(config);
} catch (error: any) {
console.error(`${YELLOW}Error:${RESET}`, error.message);
process.exit(1);
}
}
```
## /src/utils/processCheck.ts
```ts path="/src/utils/processCheck.ts"
import { existsSync, readFileSync, writeFileSync } from 'fs';
import { PID_FILE, REFERENCE_COUNT_FILE } from '../constants';
import { readConfigFile } from '.';
import find from 'find-process';
import { execSync } from 'child_process'; // 引入 execSync 来执行命令行
export async function isProcessRunning(pid: number): Promise<boolean> {
try {
const processes = await find('pid', pid);
return processes.length > 0;
} catch (error) {
return false;
}
}
export function incrementReferenceCount() {
let count = 0;
if (existsSync(REFERENCE_COUNT_FILE)) {
count = parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
}
count++;
writeFileSync(REFERENCE_COUNT_FILE, count.toString());
}
export function decrementReferenceCount() {
let count = 0;
if (existsSync(REFERENCE_COUNT_FILE)) {
count = parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
}
count = Math.max(0, count - 1);
writeFileSync(REFERENCE_COUNT_FILE, count.toString());
}
export function getReferenceCount(): number {
if (!existsSync(REFERENCE_COUNT_FILE)) {
return 0;
}
return parseInt(readFileSync(REFERENCE_COUNT_FILE, 'utf-8')) || 0;
}
export function isServiceRunning(): boolean {
if (!existsSync(PID_FILE)) {
return false;
}
let pid: number;
try {
const pidStr = readFileSync(PID_FILE, 'utf-8');
pid = parseInt(pidStr, 10);
if (isNaN(pid)) {
// PID 文件内容无效
cleanupPidFile();
return false;
}
} catch (e) {
// 读取文件失败
return false;
}
try {
if (process.platform === 'win32') {
// --- Windows 平台逻辑 ---
// 使用 tasklist 命令并通过 PID 过滤器查找进程
// stdio: 'pipe' 压制命令的输出，防止其显示在控制台
const command = `tasklist /FI "PID eq ${pid}"`;
const output = execSync(command, { stdio: 'pipe' }).toString();
// 如果输出中包含了 PID，说明进程存在
// tasklist 找不到进程时会返回 "INFO: No tasks are running..."
// 所以一个简单的包含检查就足够了
if (output.includes(pid.toString())) {
return true;
} else {
// 理论上如果 tasklist 成功执行但没找到，这里不会被命中
// 但作为保险，我们仍然认为进程不存在
cleanupPidFile();
return false;
}
} else {
// --- Linux, macOS 等其他平台逻辑 ---
// 使用信号 0 来检查进程是否存在，这不会真的杀死进程
process.kill(pid, 0);
return true; // 如果没有抛出异常，说明进程存在
}
} catch (e) {
// 捕获到异常，说明进程不存在 (无论是 kill 还是 execSync 失败)
// 清理掉无效的 PID 文件
cleanupPidFile();
return false;
}
}
export function savePid(pid: number) {
writeFileSync(PID_FILE, pid.toString());
}
export function cleanupPidFile() {
if (existsSync(PID_FILE)) {
try {
const fs = require('fs');
fs.unlinkSync(PID_FILE);
} catch (e) {
// Ignore cleanup errors
}
}
}
export function getServicePid(): number | null {
if (!existsSync(PID_FILE)) {
return null;
}
try {
const pid = parseInt(readFileSync(PID_FILE, 'utf-8'));
return isNaN(pid) ? null : pid;
} catch (e) {
return null;
}
}
export async function getServiceInfo() {
const pid = getServicePid();
const running = await isServiceRunning();
const config = await readConfigFile();
const port = config.PORT || 3456;
return {
running,
pid,
port,
endpoint: `http://127.0.0.1:${port}`,
pidFile: PID_FILE,
referenceCount: getReferenceCount()
};
}
```
## /src/utils/rewriteStream.ts
```ts path="/src/utils/rewriteStream.ts"
/**rewriteStream
* 读取源readablestream，返回一个新的readablestream，由processor对源数据进行处理后将返回的新值推送到新的stream，如果没有返回值则不推送
* @param stream
* @param processor
*/
export const rewriteStream = (stream: ReadableStream, processor: (data: any, controller: ReadableStreamController<any>) => Promise<any>): ReadableStream => {
const reader = stream.getReader()
return new ReadableStream({
async start(controller) {
try {
while (true) {
const { done, value } = await reader.read()
if (done) {
controller.close()
break
}
const processed = await processor(value, controller)
if (processed !== undefined) {
controller.enqueue(processed)
}
}
} catch (error) {
controller.error(error)
} finally {
reader.releaseLock()
}
}
})
}
```
## /src/utils/router.ts
```ts path="/src/utils/router.ts"
import {
MessageCreateParamsBase,
MessageParam,
Tool,
} from "@anthropic-ai/sdk/resources/messages";
import { get_encoding } from "tiktoken";
import { sessionUsageCache, Usage } from "./cache";
import { readFile, access } from "fs/promises";
import { opendir, stat } from "fs/promises";
import { join } from "path";
import { CLAUDE_PROJECTS_DIR, HOME_DIR } from "../constants";
import { LRUCache } from "lru-cache";
const enc = get_encoding("cl100k_base");
export const calculateTokenCount = (
messages: MessageParam[],
system: any,
tools: Tool[]
) => {
let tokenCount = 0;
if (Array.isArray(messages)) {
messages.forEach((message) => {
if (typeof message.content === "string") {
tokenCount += enc.encode(message.content).length;
} else if (Array.isArray(message.content)) {
message.content.forEach((contentPart: any) => {
if (contentPart.type === "text") {
tokenCount += enc.encode(contentPart.text).length;
} else if (contentPart.type === "tool_use") {
tokenCount += enc.encode(JSON.stringify(contentPart.input)).length;
} else if (contentPart.type === "tool_result") {
tokenCount += enc.encode(
typeof contentPart.content === "string"
? contentPart.content
: JSON.stringify(contentPart.content)
).length;
}
});
}
});
}
if (typeof system === "string") {
tokenCount += enc.encode(system).length;
} else if (Array.isArray(system)) {
system.forEach((item: any) => {
if (item.type !== "text") return;
if (typeof item.text === "string") {
tokenCount += enc.encode(item.text).length;
} else if (Array.isArray(item.text)) {
item.text.forEach((textPart: any) => {
tokenCount += enc.encode(textPart || "").length;
});
}
});
}
if (tools) {
tools.forEach((tool: Tool) => {
if (tool.description) {
tokenCount += enc.encode(tool.name + tool.description).length;
}
if (tool.input_schema) {
tokenCount += enc.encode(JSON.stringify(tool.input_schema)).length;
}
});
}
return tokenCount;
};
const readConfigFile = async (filePath: string) => {
try {
await access(filePath);
const content = await readFile(filePath, "utf8");
return JSON.parse(content);
} catch (error) {
return null; // 文件不存在或读取失败时返回null
}
};
const getProjectSpecificRouter = async (req: any) => {
// 检查是否有项目特定的配置
if (req.sessionId) {
const project = await searchProjectBySession(req.sessionId);
if (project) {
const projectConfigPath = join(HOME_DIR, project, "config.json");
const sessionConfigPath = join(
HOME_DIR,
project,
`${req.sessionId}.json`
);
// 首先尝试读取sessionConfig文件
const sessionConfig = await readConfigFile(sessionConfigPath);
if (sessionConfig && sessionConfig.Router) {
return sessionConfig.Router;
}
const projectConfig = await readConfigFile(projectConfigPath);
if (projectConfig && projectConfig.Router) {
return projectConfig.Router;
}
}
}
return undefined; // 返回undefined表示使用原始配置
};
const getUseModel = async (
req: any,
tokenCount: number,
config: any,
lastUsage?: Usage | undefined
) => {
const projectSpecificRouter = await getProjectSpecificRouter(req);
const Router = projectSpecificRouter || config.Router;
if (req.body.model.includes(",")) {
const [provider, model] = req.body.model.split(",");
const finalProvider = config.Providers.find(
(p: any) => p.name.toLowerCase() === provider
);
const finalModel = finalProvider?.models?.find(
(m: any) => m.toLowerCase() === model
);
if (finalProvider && finalModel) {
return `${finalProvider.name},${finalModel}`;
}
return req.body.model;
}
// if tokenCount is greater than the configured threshold, use the long context model
const longContextThreshold = Router.longContextThreshold || 60000;
const lastUsageThreshold =
lastUsage &&
lastUsage.input_tokens > longContextThreshold &&
tokenCount > 20000;
const tokenCountThreshold = tokenCount > longContextThreshold;
if ((lastUsageThreshold || tokenCountThreshold) && Router.longContext) {
req.log.info(
`Using long context model due to token count: ${tokenCount}, threshold: ${longContextThreshold}`
);
return Router.longContext;
}
if (
req.body?.system?.length > 1 &&
req.body?.system[1]?.text?.startsWith("<CCR-SUBAGENT-MODEL>")
) {
const model = req.body?.system[1].text.match(
/<CCR-SUBAGENT-MODEL>(.*?)<\/CCR-SUBAGENT-MODEL>/s
);
if (model) {
req.body.system[1].text = req.body.system[1].text.replace(
`<CCR-SUBAGENT-MODEL>${model[1]}</CCR-SUBAGENT-MODEL>`,
""
);
return model[1];
}
}
// Use the background model for any Claude Haiku variant
if (
req.body.model?.includes("claude") &&
req.body.model?.includes("haiku") &&
config.Router.background
) {
req.log.info(`Using background model for ${req.body.model}`);
return config.Router.background;
}
// The priority of websearch must be higher than thinking.
if (
Array.isArray(req.body.tools) &&
req.body.tools.some((tool: any) => tool.type?.startsWith("web_search")) &&
Router.webSearch
) {
return Router.webSearch;
}
// if exits thinking, use the think model
if (req.body.thinking && Router.think) {
req.log.info(`Using think model for ${req.body.thinking}`);
return Router.think;
}
return Router!.default;
};
export const router = async (req: any, _res: any, context: any) => {
const { config, event } = context;
// Parse sessionId from metadata.user_id
if (req.body.metadata?.user_id) {
const parts = req.body.metadata.user_id.split("_session_");
if (parts.length > 1) {
req.sessionId = parts[1];
}
}
const lastMessageUsage = sessionUsageCache.get(req.sessionId);
const { messages, system = [], tools }: MessageCreateParamsBase = req.body;
if (
config.REWRITE_SYSTEM_PROMPT &&
system.length > 1 &&
system[1]?.text?.includes("<env>")
) {
const prompt = await readFile(config.REWRITE_SYSTEM_PROMPT, "utf-8");
system[1].text = `${prompt}<env>${system[1].text.split("<env>").pop()}`;
}
try {
const tokenCount = calculateTokenCount(
messages as MessageParam[],
system,
tools as Tool[]
);
let model;
if (config.CUSTOM_ROUTER_PATH) {
try {
const customRouter = require(config.CUSTOM_ROUTER_PATH);
req.tokenCount = tokenCount; // Pass token count to custom router
model = await customRouter(req, config, {
event,
});
} catch (e: any) {
req.log.error(`failed to load custom router: ${e.message}`);
}
}
if (!model) {
model = await getUseModel(req, tokenCount, config, lastMessageUsage);
}
req.body.model = model;
} catch (error: any) {
req.log.error(`Error in router middleware: ${error.message}`);
req.body.model = config.Router!.default;
}
return;
};
// 内存缓存，存储sessionId到项目名称的映射
// null值表示之前已查找过但未找到项目
// 使用LRU缓存，限制最大1000个条目
const sessionProjectCache = new LRUCache<string, string | null>({
max: 1000,
});
export const searchProjectBySession = async (
sessionId: string
): Promise<string | null> => {
// 首先检查缓存
if (sessionProjectCache.has(sessionId)) {
return sessionProjectCache.get(sessionId)!;
}
try {
const dir = await opendir(CLAUDE_PROJECTS_DIR);
const folderNames: string[] = [];
// 收集所有文件夹名称
for await (const dirent of dir) {
if (dirent.isDirectory()) {
folderNames.push(dirent.name);
}
}
// 并发检查每个项目文件夹中是否存在sessionId.jsonl文件
const checkPromises = folderNames.map(async (folderName) => {
const sessionFilePath = join(
CLAUDE_PROJECTS_DIR,
folderName,
`${sessionId}.jsonl`
);
try {
const fileStat = await stat(sessionFilePath);
return fileStat.isFile() ? folderName : null;
} catch {
// 文件不存在，继续检查下一个
return null;
}
});
const results = await Promise.all(checkPromises);
// 返回第一个存在的项目目录名称
for (const result of results) {
if (result) {
// 缓存找到的结果
sessionProjectCache.set(sessionId, result);
return result;
}
}
// 缓存未找到的结果（null值表示之前已查找过但未找到项目）
sessionProjectCache.set(sessionId, null);
return null; // 没有找到匹配的项目
} catch (error) {
console.error("Error searching for project by session:", error);
// 出错时也缓存null结果，避免重复出错
sessionProjectCache.set(sessionId, null);
return null;
}
};
```
## /src/utils/status.ts
```ts path="/src/utils/status.ts"
import { getServiceInfo } from './processCheck';
export async function showStatus() {
const info = await getServiceInfo();
console.log('\n📊 Claude Code Router Status');
console.log('═'.repeat(40));
if (info.running) {
console.log('✅ Status: Running');
console.log(`🆔 Process ID: ${info.pid}`);
console.log(`🌐 Port: ${info.port}`);
console.log(`📡 API Endpoint: ${info.endpoint}`);
console.log(`📄 PID File: ${info.pidFile}`);
console.log('');
console.log('🚀 Ready to use! Run the following commands:');
console.log(' ccr code # Start coding with Claude');
console.log(' ccr stop # Stop the service');
} else {
console.log('❌ Status: Not Running');
console.log('');
console.log('💡 To start the service:');
console.log(' ccr start');
}
console.log('');
}
```
## /src/utils/statusline.ts
```ts path="/src/utils/statusline.ts"
import fs from "node:fs/promises";
import { execSync } from "child_process";
import path from "node:path";
import { CONFIG_FILE, HOME_DIR } from "../constants";
import JSON5 from "json5";
export interface StatusLineModuleConfig {
type: string;
icon?: string;
text: string;
color?: string;
background?: string;
scriptPath?: string; // 用于script类型的模块，指定要执行的Node.js脚本文件路径
}
export interface StatusLineThemeConfig {
modules: StatusLineModuleConfig[];
}
export interface StatusLineInput {
hook_event_name: string;
session_id: string;
transcript_path: string;
cwd: string;
model: {
id: string;
display_name: string;
};
workspace: {
current_dir: string;
project_dir: string;
};
}
export interface AssistantMessage {
type: "assistant";
message: {
model: string;
usage: {
input_tokens: number;
output_tokens: number;
};
};
}
// ANSIColor代码
const COLORS: Record<string, string> = {
reset: "\x1b[0m",
bold: "\x1b[1m",
dim: "\x1b[2m",
// 标准颜色
black: "\x1b[30m",
red: "\x1b[31m",
green: "\x1b[32m",
yellow: "\x1b[33m",
blue: "\x1b[34m",
magenta: "\x1b[35m",
cyan: "\x1b[36m",
white: "\x1b[37m",
// 亮色
bright_black: "\x1b[90m",
bright_red: "\x1b[91m",
bright_green: "\x1b[92m",
bright_yellow: "\x1b[93m",
bright_blue: "\x1b[94m",
bright_magenta: "\x1b[95m",
bright_cyan: "\x1b[96m",
bright_white: "\x1b[97m",
// 背景颜色
bg_black: "\x1b[40m",
bg_red: "\x1b[41m",
bg_green: "\x1b[42m",
bg_yellow: "\x1b[43m",
bg_blue: "\x1b[44m",
bg_magenta: "\x1b[45m",
bg_cyan: "\x1b[46m",
bg_white: "\x1b[47m",
// 亮背景色
bg_bright_black: "\x1b[100m",
bg_bright_red: "\x1b[101m",
bg_bright_green: "\x1b[102m",
bg_bright_yellow: "\x1b[103m",
bg_bright_blue: "\x1b[104m",
bg_bright_magenta: "\x1b[105m",
bg_bright_cyan: "\x1b[106m",
bg_bright_white: "\x1b[107m",
};
// 使用TrueColor(24位色)支持十六进制颜色
const TRUE_COLOR_PREFIX = "\x1b[38;2;";
const TRUE_COLOR_BG_PREFIX = "\x1b[48;2;";
// 将十六进制颜色转为RGB格式
function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
// 移除#和空格
hex = hex.replace(/^#/, '').trim();
// 处理简写形式 (#RGB -> #RRGGBB)
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
return null;
}
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// 验证RGB值是否有效
if (isNaN(r) || isNaN(g) || isNaN(b) || r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
return null;
}
return { r, g, b };
}
// 获取颜色代码
function getColorCode(colorName: string): string {
// 检查是否是十六进制颜色
if (colorName.startsWith('#') || /^[0-9a-fA-F]{6}$/.test(colorName) || /^[0-9a-fA-F]{3}$/.test(colorName)) {
const rgb = hexToRgb(colorName);
if (rgb) {
return `${TRUE_COLOR_PREFIX}${rgb.r};${rgb.g};${rgb.b}m`;
}
}
// 默认返回空字符串
return "";
}
// 变量替换函数，支持{{var}}格式的变量替换
function replaceVariables(text: string, variables: Record<string, string>): string {
return text.replace(/\{\{(\w+)\}\}/g, (_match, varName) => {
return variables[varName] || "";
});
}
// 执行脚本并获取输出
async function executeScript(scriptPath: string, variables: Record<string, string>): Promise<string> {
try {
// 检查文件是否存在
await fs.access(scriptPath);
// 使用require动态加载脚本模块
const scriptModule = require(scriptPath);
// 如果导出的是函数，则调用它并传入变量
if (typeof scriptModule === 'function') {
const result = scriptModule(variables);
// 如果返回的是Promise，则等待它完成
if (result instanceof Promise) {
return await result;
}
return result;
}
// 如果导出的是default函数，则调用它
if (scriptModule.default && typeof scriptModule.default === 'function') {
const result = scriptModule.default(variables);
// 如果返回的是Promise，则等待它完成
if (result instanceof Promise) {
return await result;
}
return result;
}
// 如果导出的是字符串，则直接返回
if (typeof scriptModule === 'string') {
return scriptModule;
}
// 如果导出的是default字符串，则返回它
if (scriptModule.default && typeof scriptModule.default === 'string') {
return scriptModule.default;
}
// 默认情况下返回空字符串
return "";
} catch (error) {
console.error(`执行脚本 ${scriptPath} 时出错:`, error);
return "";
}
}
// 默认主题配置 - 使用Nerd Fonts图标和美观配色
const DEFAULT_THEME: StatusLineThemeConfig = {
modules: [
{
type: "workDir",
icon: "", // nf-md-folder_outline
text: "{{workDirName}}",
color: "bright_blue"
},
{
type: "gitBranch",
icon: "", // nf-dev-git_branch
text: "{{gitBranch}}",
color: "bright_magenta"
},
{
type: "model",
icon: "", // nf-md-robot_outline
text: "{{model}}",
color: "bright_cyan"
},
{
type: "usage",
icon: "↑", // 上箭头
text: "{{inputTokens}}",
color: "bright_green"
},
{
type: "usage",
icon: "↓", // 下箭头
text: "{{outputTokens}}",
color: "bright_yellow"
}
]
};
// Powerline风格主题配置
const POWERLINE_THEME: StatusLineThemeConfig = {
modules: [
{
type: "workDir",
icon: "", // nf-md-folder_outline
text: "{{workDirName}}",
color: "white",
background: "bg_bright_blue"
},
{
type: "gitBranch",
icon: "", // nf-dev-git_branch
text: "{{gitBranch}}",
color: "white",
background: "bg_bright_magenta"
},
{
type: "model",
icon: "", // nf-md-robot_outline
text: "{{model}}",
color: "white",
background: "bg_bright_cyan"
},
{
type: "usage",
icon: "↑", // 上箭头
text: "{{inputTokens}}",
color: "white",
background: "bg_bright_green"
},
{
type: "usage",
icon: "↓", // 下箭头
text: "{{outputTokens}}",
color: "white",
background: "bg_bright_yellow"
}
]
};
// 简单文本主题配置 - 用于图标无法显示时的fallback
const SIMPLE_THEME: StatusLineThemeConfig = {
modules: [
{
type: "workDir",
icon: "",
text: "{{workDirName}}",
color: "bright_blue"
},
{
type: "gitBranch",
icon: "",
text: "{{gitBranch}}",
color: "bright_magenta"
},
{
type: "model",
icon: "",
text: "{{model}}",
color: "bright_cyan"
},
{
type: "usage",
icon: "↑",
text: "{{inputTokens}}",
color: "bright_green"
},
{
type: "usage",
icon: "↓",
text: "{{outputTokens}}",
color: "bright_yellow"
}
]
};
// 格式化usage信息，如果大于1000则使用k单位
function formatUsage(input_tokens: number, output_tokens: number): string {
if (input_tokens > 1000 || output_tokens > 1000) {
const inputFormatted = input_tokens > 1000 ? `${(input_tokens / 1000).toFixed(1)}k` : `${input_tokens}`;
const outputFormatted = output_tokens > 1000 ? `${(output_tokens / 1000).toFixed(1)}k` : `${output_tokens}`;
return `${inputFormatted} ${outputFormatted}`;
}
return `${input_tokens} ${output_tokens}`;
}
// 读取用户主目录的主题配置
async function getProjectThemeConfig(): Promise<{ theme: StatusLineThemeConfig | null, style: string }> {
try {
// 只使用主目录的固定配置文件
const configPath = CONFIG_FILE;
// 检查配置文件是否存在
try {
await fs.access(configPath);
} catch {
return { theme: null, style: 'default' };
}
const configContent = await fs.readFile(configPath, "utf-8");
const config = JSON5.parse(configContent);
// 检查是否有StatusLine配置
if (config.StatusLine) {
// 获取当前使用的风格，默认为default
const currentStyle = config.StatusLine.currentStyle || 'default';
// 检查是否有对应风格的配置
if (config.StatusLine[currentStyle] && config.StatusLine[currentStyle].modules) {
return { theme: config.StatusLine[currentStyle], style: currentStyle };
}
}
} catch (error) {
// 如果读取失败，返回null
// console.error("Failed to read theme config:", error);
}
return { theme: null, style: 'default' };
}
// 检查是否应该使用简单主题（fallback方案）
// 当环境变量 USE_SIMPLE_ICONS 被设置时，或者当检测到可能不支持Nerd Fonts的终端时
function shouldUseSimpleTheme(): boolean {
// 检查环境变量
if (process.env.USE_SIMPLE_ICONS === 'true') {
return true;
}
// 检查终端类型（一些常见的不支持复杂图标的终端）
const term = process.env.TERM || '';
const unsupportedTerms = ['dumb', 'unknown'];
if (unsupportedTerms.includes(term)) {
return true;
}
// 默认情况下，假设终端支持Nerd Fonts
return false;
}
// 检查Nerd Fonts图标是否能正确显示
// 通过检查终端字体信息或使用试探性方法
function canDisplayNerdFonts(): boolean {
// 如果环境变量明确指定使用简单图标，则不能显示Nerd Fonts
if (process.env.USE_SIMPLE_ICONS === 'true') {
return false;
}
// 检查一些常见的支持Nerd Fonts的终端环境变量
const fontEnvVars = ['NERD_FONT', 'NERDFONT', 'FONT'];
for (const envVar of fontEnvVars) {
const value = process.env[envVar];
if (value && (value.includes('Nerd') || value.includes('nerd'))) {
return true;
}
}
// 检查终端类型
const termProgram = process.env.TERM_PROGRAM || '';
const supportedTerminals = ['iTerm.app', 'vscode', 'Hyper', 'kitty', 'alacritty'];
if (supportedTerminals.includes(termProgram)) {
return true;
}
// 检查COLORTERM环境变量
const colorTerm = process.env.COLORTERM || '';
if (colorTerm.includes('truecolor') || colorTerm.includes('24bit')) {
return true;
}
// 默认情况下，假设可以显示Nerd Fonts（但允许用户通过环境变量覆盖）
return process.env.USE_SIMPLE_ICONS !== 'true';
}
// 检查特定Unicode字符是否能正确显示
// 这是一个简单的试探性检查
function canDisplayUnicodeCharacter(char: string): boolean {
// 对于Nerd Fonts图标，我们假设支持UTF-8的终端可以显示
// 但实际上很难准确检测，所以我们依赖环境变量和终端类型检测
try {
// 检查终端是否支持UTF-8
const lang = process.env.LANG || process.env.LC_ALL || process.env.LC_CTYPE || '';
if (lang.includes('UTF-8') || lang.includes('utf8') || lang.includes('UTF8')) {
return true;
}
// 检查LC_*环境变量
const lcVars = ['LC_ALL', 'LC_CTYPE', 'LANG'];
for (const lcVar of lcVars) {
const value = process.env[lcVar];
if (value && (value.includes('UTF-8') || value.includes('utf8'))) {
return true;
}
}
} catch (e) {
// 如果检查失败，默认返回true
return true;
}
// 默认情况下，假设可以显示
return true;
}
export async function parseStatusLineData(input: StatusLineInput): Promise<string> {
try {
// 检查是否应该使用简单主题
const useSimpleTheme = shouldUseSimpleTheme();
// 检查是否可以显示Nerd Fonts图标
const canDisplayNerd = canDisplayNerdFonts();
// 确定使用的主题：如果用户强制使用简单主题或无法显示Nerd Fonts，则使用简单主题
const effectiveTheme = useSimpleTheme || !canDisplayNerd ? SIMPLE_THEME : DEFAULT_THEME;
// 获取主目录的主题配置，如果没有则使用确定的默认配置
const { theme: projectTheme, style: currentStyle } = await getProjectThemeConfig();
const theme = projectTheme || effectiveTheme;
// 获取当前工作目录和Git分支
const workDir = input.workspace.current_dir;
let gitBranch = "";
try {
// 尝试获取Git分支名
gitBranch = execSync("git branch --show-current", {
cwd: workDir,
stdio: ["pipe", "pipe", "ignore"],
})
.toString()
.trim();
} catch (error) {
// 如果不是Git仓库或获取失败，则忽略错误
}
// 从transcript_path文件中读取最后一条assistant消息
const transcriptContent = await fs.readFile(input.transcript_path, "utf-8");
const lines = transcriptContent.trim().split("\n");
// 反向遍历寻找最后一条assistant消息
let model = "";
let inputTokens = 0;
let outputTokens = 0;
for (let i = lines.length - 1; i >= 0; i--) {
try {
const message: AssistantMessage = JSON.parse(lines[i]);
if (message.type === "assistant" && message.message.model) {
model = message.message.model;
if (message.message.usage) {
inputTokens = message.message.usage.input_tokens;
outputTokens = message.message.usage.output_tokens;
}
break;
}
} catch (parseError) {
// 忽略解析错误，继续查找
continue;
}
}
// 如果没有从transcript中获取到模型名称，则尝试从配置文件中获取
if (!model) {
try {
// 获取项目配置文件路径
const projectConfigPath = path.join(workDir, ".claude-code-router", "config.json");
let configPath = projectConfigPath;
// 检查项目配置文件是否存在，如果不存在则使用用户主目录的配置文件
try {
await fs.access(projectConfigPath);
} catch {
configPath = CONFIG_FILE;
}
// 读取配置文件
const configContent = await fs.readFile(configPath, "utf-8");
const config = JSON5.parse(configContent);
// 从Router字段的default内容中获取模型名称
if (config.Router && config.Router.default) {
const [, defaultModel] = config.Router.default.split(",");
if (defaultModel) {
model = defaultModel.trim();
}
}
} catch (configError) {
// 如果配置文件读取失败，则忽略错误
}
}
// 如果仍然没有获取到模型名称，则使用传入的JSON数据中的model字段的display_name
if (!model) {
model = input.model.display_name;
}
// 获取工作目录名
const workDirName = workDir.split("/").pop() || "";
// 格式化usage信息
const usage = formatUsage(inputTokens, outputTokens);
const [formattedInputTokens, formattedOutputTokens] = usage.split(" ");
// 定义变量替换映射
const variables = {
workDirName,
gitBranch,
model,
inputTokens: formattedInputTokens,
outputTokens: formattedOutputTokens
};
// 确定使用的风格
const isPowerline = currentStyle === 'powerline';
// 根据风格渲染状态行
if (isPowerline) {
return await renderPowerlineStyle(theme, variables);
} else {
return await renderDefaultStyle(theme, variables);
}
} catch (error) {
// 发生错误时返回空字符串
return "";
}
}
// 读取用户主目录的主题配置（指定风格）
async function getProjectThemeConfigForStyle(style: string): Promise<StatusLineThemeConfig | null> {
try {
// 只使用主目录的固定配置文件
const configPath = CONFIG_FILE;
// 检查配置文件是否存在
try {
await fs.access(configPath);
} catch {
return null;
}
const configContent = await fs.readFile(configPath, "utf-8");
const config = JSON5.parse(configContent);
// 检查是否有StatusLine配置
if (config.StatusLine && config.StatusLine[style] && config.StatusLine[style].modules) {
return config.StatusLine[style];
}
} catch (error) {
// 如果读取失败，返回null
// console.error("Failed to read theme config:", error);
}
return null;
}
// 渲染默认风格的状态行
async function renderDefaultStyle(
theme: StatusLineThemeConfig,
variables: Record<string, string>
): Promise<string> {
const modules = theme.modules || DEFAULT_THEME.modules;
const parts: string[] = [];
// 遍历模块数组，渲染每个模块
for (let i = 0; i < Math.min(modules.length, 5); i++) {
const module = modules[i];
const color = module.color ? getColorCode(module.color) : "";
const background = module.background ? getColorCode(module.background) : "";
const icon = module.icon || "";
// 如果是script类型，执行脚本获取文本
let text = "";
if (module.type === "script" && module.scriptPath) {
text = await executeScript(module.scriptPath, variables);
} else {
text = replaceVariables(module.text, variables);
}
// 构建显示文本
let displayText = "";
if (icon) {
displayText += `${icon} `;
}
displayText += text;
// 如果displayText为空，或者只有图标没有实际文本，则跳过该模块
if (!displayText || !text) {
continue;
}
// 构建模块字符串
let part = `${background}${color}`;
part += `${displayText}${COLORS.reset}`;
parts.push(part);
}
// 使用空格连接所有部分
return parts.join(" ");
}
// Powerline符号
const SEP_RIGHT = "\uE0B0"; //
// 颜色编号（256色表）
const COLOR_MAP: Record<string, number> = {
// 基础颜色映射到256色
black: 0,
red: 1,
green: 2,
yellow: 3,
blue: 4,
magenta: 5,
cyan: 6,
white: 7,
bright_black: 8,
bright_red: 9,
bright_green: 10,
bright_yellow: 11,
bright_blue: 12,
bright_magenta: 13,
bright_cyan: 14,
bright_white: 15,
// 亮背景色映射
bg_black: 0,
bg_red: 1,
bg_green: 2,
bg_yellow: 3,
bg_blue: 4,
bg_magenta: 5,
bg_cyan: 6,
bg_white: 7,
bg_bright_black: 8,
bg_bright_red: 9,
bg_bright_green: 10,
bg_bright_yellow: 11,
bg_bright_blue: 12,
bg_bright_magenta: 13,
bg_bright_cyan: 14,
bg_bright_white: 15,
// 自定义颜色映射
bg_bright_orange: 202,
bg_bright_purple: 129,
};
// 获取TrueColor的RGB值
function getTrueColorRgb(colorName: string): { r: number; g: number; b: number } | null {
// 如果是预定义颜色，返回对应RGB
if (COLOR_MAP[colorName] !== undefined) {
const color256 = COLOR_MAP[colorName];
return color256ToRgb(color256);
}
// 处理十六进制颜色
if (colorName.startsWith('#') || /^[0-9a-fA-F]{6}$/.test(colorName) || /^[0-9a-fA-F]{3}$/.test(colorName)) {
return hexToRgb(colorName);
}
// 处理背景色十六进制
if (colorName.startsWith('bg_#')) {
return hexToRgb(colorName.substring(3));
}
return null;
}
// 将256色表索引转换为RGB值
function color256ToRgb(index: number): { r: number; g: number; b: number } | null {
if (index < 0 || index > 255) return null;
// ANSI 256色表转换
if (index < 16) {
// 基本颜色
const basicColors = [
[0, 0, 0], [128, 0, 0], [0, 128, 0], [128, 128, 0],
[0, 0, 128], [128, 0, 128], [0, 128, 128], [192, 192, 192],
[128, 128, 128], [255, 0, 0], [0, 255, 0], [255, 255, 0],
[0, 0, 255], [255, 0, 255], [0, 255, 255], [255, 255, 255]
];
return { r: basicColors[index][0], g: basicColors[index][1], b: basicColors[index][2] };
} else if (index < 232) {
// 216色：6×6×6的颜色立方体
const i = index - 16;
const r = Math.floor(i / 36);
const g = Math.floor((i % 36) / 6);
const b = i % 6;
const rgb = [0, 95, 135, 175, 215, 255];
return { r: rgb[r], g: rgb[g], b: rgb[b] };
} else {
// 灰度色
const gray = 8 + (index - 232) * 10;
return { r: gray, g: gray, b: gray };
}
}
// 生成一个无缝拼接的段：文本在 bgN 上显示，分隔符从 bgN 过渡到 nextBgN
function segment(text: string, textFg: string, bgColor: string, nextBgColor: string | null): string {
const bgRgb = getTrueColorRgb(bgColor);
if (!bgRgb) {
// 如果无法获取RGB，使用默认蓝色背景
const defaultBlueRgb = { r: 33, g: 150, b: 243 };
const curBg = `\x1b[48;2;${defaultBlueRgb.r};${defaultBlueRgb.g};${defaultBlueRgb.b}m`;
const fgColor = `\x1b[38;2;255;255;255m`;
const body = `${curBg}${fgColor} ${text} \x1b[0m`;
return body;
}
const curBg = `\x1b[48;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
// 获取前景色RGB
let fgRgb = { r: 255, g: 255, b: 255 }; // 默认前景色为白色
const textFgRgb = getTrueColorRgb(textFg);
if (textFgRgb) {
fgRgb = textFgRgb;
}
const fgColor = `\x1b[38;2;${fgRgb.r};${fgRgb.g};${fgRgb.b}m`;
const body = `${curBg}${fgColor} ${text} \x1b[0m`;
if (nextBgColor != null) {
const nextBgRgb = getTrueColorRgb(nextBgColor);
if (nextBgRgb) {
// 分隔符：前景色是当前段的背景色，背景色是下一段的背景色
const sepCurFg = `\x1b[38;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
const sepNextBg = `\x1b[48;2;${nextBgRgb.r};${nextBgRgb.g};${nextBgRgb.b}m`;
const sep = `${sepCurFg}${sepNextBg}${SEP_RIGHT}\x1b[0m`;
return body + sep;
}
// 如果没有下一个背景色，假设终端背景为黑色并渲染黑色箭头
const sepCurFg = `\x1b[38;2;${bgRgb.r};${bgRgb.g};${bgRgb.b}m`;
const sepNextBg = `\x1b[48;2;0;0;0m`; // 黑色背景
const sep = `${sepCurFg}${sepNextBg}${SEP_RIGHT}\x1b[0m`;
return body + sep;
}
return body;
}
// 渲染Powerline风格的状态行
async function renderPowerlineStyle(
theme: StatusLineThemeConfig,
variables: Record<string, string>
): Promise<string> {
const modules = theme.modules || POWERLINE_THEME.modules;
const segments: string[] = [];
// 遍历模块数组，渲染每个模块
for (let i = 0; i < Math.min(modules.length, 5); i++) {
const module = modules[i];
const color = module.color || "white";
const backgroundName = module.background || "";
const icon = module.icon || "";
// 如果是script类型，执行脚本获取文本
let text = "";
if (module.type === "script" && module.scriptPath) {
text = await executeScript(module.scriptPath, variables);
} else {
text = replaceVariables(module.text, variables);
}
// 构建显示文本
let displayText = "";
if (icon) {
displayText += `${icon} `;
}
displayText += text;
// 如果displayText为空，或者只有图标没有实际文本，则跳过该模块
if (!displayText || !text) {
continue;
}
// 获取下一个模块的背景色（用于分隔符）
let nextBackground: string | null = null;
if (i < modules.length - 1) {
const nextModule = modules[i + 1];
nextBackground = nextModule.background || null;
}
// 使用模块定义的背景色，或者为Powerline风格提供默认背景色
const actualBackground = backgroundName || "bg_bright_blue";
// 生成段，支持十六进制颜色
const segmentStr = segment(displayText, color, actualBackground, nextBackground);
segments.push(segmentStr);
}
return segments.join("");
}
```
## /src/utils/update.ts
```ts path="/src/utils/update.ts"
import { exec } from "child_process";
import { promisify } from "util";
import { join } from "path";
import { readFileSync } from "fs";
const execPromise = promisify(exec);
/**
* 检查是否有新版本可用
* @param currentVersion 当前版本
* @returns 包含更新信息的对象
*/
export async function checkForUpdates(currentVersion: string) {
try {
// 从npm registry获取最新版本信息
const { stdout } = await execPromise("npm view @musistudio/claude-code-router version");
const latestVersion = stdout.trim();
// 比较版本
const hasUpdate = compareVersions(latestVersion, currentVersion) > 0;
// 如果有更新，获取更新日志
let changelog = "";
return { hasUpdate, latestVersion, changelog };
} catch (error) {
console.error("Error checking for updates:", error);
// 如果检查失败，假设没有更新
return { hasUpdate: false, latestVersion: currentVersion, changelog: "" };
}
}
/**
* 执行更新操作
* @returns 更新结果
*/
export async function performUpdate() {
try {
// 执行npm update命令
const { stdout, stderr } = await execPromise("npm update -g @musistudio/claude-code-router");
if (stderr) {
console.error("Update stderr:", stderr);
}
console.log("Update stdout:", stdout);
return {
success: true,
message: "Update completed successfully. Please restart the application to apply changes."
};
} catch (error) {
console.error("Error performing update:", error);
return {
success: false,
message: `Failed to perform update: ${error instanceof Error ? error.message : 'Unknown error'}`
};
}
}
/**
* 比较两个版本号
* @param v1 版本号1
* @param v2 版本号2
* @returns 1 if v1 > v2, -1 if v1 < v2, 0 if equal
*/
function compareVersions(v1: string, v2: string): number {
const parts1 = v1.split(".").map(Number);
const parts2 = v2.split(".").map(Number);
for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
const num1 = i < parts1.length ? parts1[i] : 0;
const num2 = i < parts2.length ? parts2[i] : 0;
if (num1 > num2) return 1;
if (num1 < num2) return -1;
}
return 0;
}
```
## /tsconfig.json
```json path="/tsconfig.json"
{
"compilerOptions": {
"target": "ES2022",
"module": "CommonJS",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"declaration": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]
}
```
## /ui/CLAUDE.md
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
This is a frontend project for a configuration settings UI. The goal is to produce a single, self-contained HTML file with all JavaScript and CSS inlined. The application should be designed with a clean, modern UI and support both English and Chinese languages.
## Tech Stack
- **Package Manager:** pnpm
- **Build Tool:** Vite.js
- **Framework:** React.js
- **Styling:** Tailwind CSS with shadcn-ui
- **Languages:** TypeScript, English, Chinese
## Key Commands
- **Run development server:** `pnpm dev`
- **Build for production:** `pnpm build` (This produces a single HTML file)
- **Lint files:** `pnpm lint`
- **Preview production build:** `pnpm preview`
## Architecture & Development Notes
- **Configuration:** The application's configuration structure is defined in `config.example.json`. This file should be used as a reference for mocking data, as no backend APIs will be implemented.
- **Build Target:** The final build output must be a single HTML file. This is configured in `vite.config.ts` using `vite-plugin-singlefile`.
- **Internationalization (i18n):** The project uses `i18next` to support both English and Chinese. Locale files are located in `src/locales/`. When adding or changing text, ensure it is properly added to the translation files.
- **UI:** The UI is built with `shadcn-ui` components. Refer to existing components in `src/components/ui/` for styling conventions.
- **API Client:** The project uses a custom `ApiClient` class for handling HTTP requests with baseUrl and API key authentication. The class is defined in `src/lib/api.ts` and provides methods for GET, POST, PUT, and DELETE requests.
## 项目描述
参考`PROJECT.md`文件
## /ui/PROJECT.md
# 项目指南
> 这是一个用于设置配置的前端项目，配置格式参考config.example.json
## 技术栈
1. 使用pnpm作为包管理工具
2. 使用vite.js作为构建工具
3. 使用react.js + tailwindcss + shadcn-ui构建前端界面
## UI设计
采用现代化的UI风格，让界面整体体现出呼吸感。整体配置应该简洁和通俗易懂，需要有必要的校验，易用的交互体验。
## 接口设计
不需要实现任何接口，但你需要根据config.example.json文件的内容mock数据
## 代码指引
在使用任何库之前你都需要使用websearch工具查找最新的文档，不要使用你知识库的内容，即使是显而易见的你以为的确定性的知识。
## 多语言设计
项目需要同时支持中文和英文
## 构建发布
最后需要构建出一个HTML文件，其中所有的js和css采用内联的方式，构建产物应该只包含一个html文件。
## /ui/README.md
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
## /ui/components.json
```json path="/ui/components.json"
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
```
## /ui/config.example.json
```json path="/ui/config.example.json"
{
"LOG": true,
"CLAUDE_PATH": "/Users/jinhuilee/.claude/local/claude",
"HOST": "127.0.0.1",
"PORT": 8080,
"APIKEY": "1",
"API_TIMEOUT_MS": 600000,
"transformers": [
{
"path": "/Users/abc/.claude-code-router/plugins/gemini-cli.js",
"options": {
"project": "x"
}
}
],
"Providers": [
{
"name": "siliconflow",
"api_base_url": "https://api.moonshot.cn/v1/chat/completions",
"api_key": "sk-",
"models": [
"kimi-k2-0711-preview"
],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 130000
}
]
]
}
},
{
"name": "kimi",
"api_base_url": "https://api.moonshot.cn/v1/chat/completions",
"api_key": "sk-",
"models": [
"kimi-k2-0711-preview"
]
},
{
"name": "groq",
"api_base_url": "https://api.groq.com/openai/v1/chat/completions",
"api_key": "",
"models": [
"moonshotai/kimi-k2-instruct"
],
"transformer": {
"use": [
[
"maxtoken",
{
"max_tokens": 16384
}
],
"groq"
]
}
},
{
"name": "openrouter",
"api_base_url": "https://openrouter.ai/api/v1/chat/completions",
"api_key": "sk-or-v1-",
"models": [
"google/gemini-2.5-pro-preview",
"anthropic/claude-sonnet-4",
"anthropic/claude-3.5-sonnet",
"anthropic/claude-3.7-sonnet:thinking",
"deepseek/deepseek-chat-v3-0324",
"@preset/kimi"
],
"transformer": {
"use": [
"openrouter"
],
"deepseek/deepseek-chat-v3-0324": {
"use": [
"tooluse"
]
}
}
},
{
"name": "deepseek",
"api_base_url": "https://api.deepseek.com/chat/completions",
"api_key": "sk-",
"models": [
"deepseek-chat",
"deepseek-reasoner"
],
"transformer": {
"use": [
"deepseek"
],
"deepseek-chat": {
"use": [
"tooluse"
]
}
}
},
{
"name": "test",
"api_base_url": "https://tbai.xin/v1/chat/completions",
"api_key": "sk-",
"models": [
"gemini-2.5-pro"
]
},
{
"name": "ollama",
"api_base_url": "http://localhost:11434/v1/chat/completions",
"api_key": "ollama",
"models": [
"qwen2.5-coder:latest"
]
},
{
"name": "gemini",
"api_base_url": "https://generativelanguage.googleapis.com/v1beta/models/",
"api_key": "",
"models": [
"gemini-2.5-flash",
"gemini-2.5-pro"
],
"transformer": {
"use": [
"gemini"
]
}
},
{
"name": "volcengine",
"api_base_url": "https://ark.cn-beijing.volces.com/api/v3/chat/completions",
"api_key": "sk-xxx",
"models": [
"deepseek-v3-250324",
"deepseek-r1-250528"
],
"transformer": {
"use": [
"deepseek"
]
}
},
{
"name": "gemini-cli",
"api_base_url": "https://cloudcode-pa.googleapis.com/v1internal",
"api_key": "sk-xxx",
"models": [
"gemini-2.5-flash",
"gemini-2.5-pro"
],
"transformer": {
"use": [
"gemini-cli"
]
}
},
{
"name": "azure",
"api_base_url": "https://your-resource-name.openai.azure.com/",
"api_key": "",
"models": [
"gpt-4"
]
}
],
"Router": {
"default": "gemini-cli,gemini-2.5-pro",
"background": "gemini-cli,gemini-2.5-flash",
"think": "gemini-cli,gemini-2.5-pro",
"longContext": "gemini-cli,gemini-2.5-pro",
"webSearch": "gemini-cli,gemini-2.5-flash"
},
"NON_INTERACTIVE_MODE": false
}
```
## /ui/eslint.config.js
```js path="/ui/eslint.config.js"
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { globalIgnores } from 'eslint/config'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])
```
## /ui/index.html
```html path="/ui/index.html"
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CCR UI</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
```
## /ui/package.json
```json path="/ui/package.json"
{
"name": "temp-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@monaco-editor/react": "^4.7.0",
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-popover": "^1.1.14",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.5",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.7",
"@tailwindcss/vite": "^4.1.11",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"i18next": "^25.3.2",
"i18next-browser-languagedetector": "^8.2.0",
"lucide-react": "^0.525.0",
"react": "^19.1.0",
"react-colorful": "^5.6.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^19.1.0",
"react-i18next": "^15.6.1",
"react-router-dom": "^7.7.0",
"tailwind-merge": "^3.3.1",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/js": "^9.30.1",
"@tailwindcss/postcss": "^4.1.11",
"@types/node": "^24.1.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
"autoprefixer": "^10.4.21",
"eslint": "^9.30.1",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.3.0",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.11",
"tw-animate-css": "^1.3.5",
"typescript": "~5.8.3",
"typescript-eslint": "^8.35.1",
"vite": "^7.0.4",
"vite-plugin-singlefile": "^2.3.0"
}
}
```
## /ui/public/vite.svg
```svg path="/ui/public/vite.svg"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
```
## /ui/src/App.tsx
```tsx path="/ui/src/App.tsx"
import { useState, useEffect, useCallback, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { SettingsDialog } from "@/components/SettingsDialog";
import { Transformers } from "@/components/Transformers";
import { Providers } from "@/components/Providers";
import { Router } from "@/components/Router";
import { JsonEditor } from "@/components/JsonEditor";
import { LogViewer } from "@/components/LogViewer";
import { Button } from "@/components/ui/button";
import { useConfig } from "@/components/ConfigProvider";
import { api } from "@/lib/api";
import { Settings, Languages, Save, RefreshCw, FileJson, CircleArrowUp, FileText } from "lucide-react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Toast } from "@/components/ui/toast";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
DialogDescription,
} from "@/components/ui/dialog";
import "@/styles/animations.css";
function App() {
const { t, i18n } = useTranslation();
const navigate = useNavigate();
const { config, error } = useConfig();
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
const [isJsonEditorOpen, setIsJsonEditorOpen] = useState(false);
const [isLogViewerOpen, setIsLogViewerOpen] = useState(false);
const [isCheckingAuth, setIsCheckingAuth] = useState(true);
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' | 'warning' } | null>(null);
// 版本检查状态
const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
const [isUpdateDialogOpen, setIsUpdateDialogOpen] = useState(false);
const [newVersionInfo, setNewVersionInfo] = useState<{ version: string; changelog: string } | null>(null);
const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
const [hasCheckedUpdate, setHasCheckedUpdate] = useState(false);
const hasAutoCheckedUpdate = useRef(false);
const saveConfig = async () => {
// Handle case where config might be null or undefined
if (!config) {
setToast({ message: t('app.config_missing'), type: 'error' });
return;
}
try {
// Save to API
const response = await api.updateConfig(config);
// Show success message or handle as needed
console.log('Config saved successfully');
// 根据响应信息进行提示
if (response && typeof response === 'object' && 'success' in response) {
const apiResponse = response as { success: boolean; message?: string };
if (apiResponse.success) {
setToast({ message: apiResponse.message || t('app.config_saved_success'), type: 'success' });
} else {
setToast({ message: apiResponse.message || t('app.config_saved_failed'), type: 'error' });
}
} else {
// 默认成功提示
setToast({ message: t('app.config_saved_success'), type: 'success' });
}
} catch (error) {
console.error('Failed to save config:', error);
// Handle error appropriately
setToast({ message: t('app.config_saved_failed') + ': ' + (error as Error).message, type: 'error' });
}
};
const saveConfigAndRestart = async () => {
// Handle case where config might be null or undefined
if (!config) {
setToast({ message: t('app.config_missing'), type: 'error' });
return;
}
try {
// Save to API
const response = await api.updateConfig(config);
// Check if save was successful before restarting
let saveSuccessful = true;
if (response && typeof response === 'object' && 'success' in response) {
const apiResponse = response as { success: boolean; message?: string };
if (!apiResponse.success) {
saveSuccessful = false;
setToast({ message: apiResponse.message || t('app.config_saved_failed'), type: 'error' });
}
}
// Only restart if save was successful
if (saveSuccessful) {
// Restart service
const response = await api.restartService();
// Show success message or handle as needed
console.log('Config saved and service restarted successfully');
// 根据响应信息进行提示
if (response && typeof response === 'object' && 'success' in response) {
const apiResponse = response as { success: boolean; message?: string };
if (apiResponse.success) {
setToast({ message: apiResponse.message || t('app.config_saved_restart_success'), type: 'success' });
}
} else {
// 默认成功提示
setToast({ message: t('app.config_saved_restart_success'), type: 'success' });
}
}
} catch (error) {
console.error('Failed to save config and restart:', error);
// Handle error appropriately
setToast({ message: t('app.config_saved_restart_failed') + ': ' + (error as Error).message, type: 'error' });
}
};
// 检查更新函数
const checkForUpdates = useCallback(async (showDialog: boolean = true) => {
// 如果已经检查过且有新版本，根据参数决定是否显示对话框
if (hasCheckedUpdate && isNewVersionAvailable) {
if (showDialog) {
setIsUpdateDialogOpen(true);
}
return;
}
setIsCheckingUpdate(true);
try {
const updateInfo = await api.checkForUpdates();
if (updateInfo.hasUpdate && updateInfo.latestVersion && updateInfo.changelog) {
setIsNewVersionAvailable(true);
setNewVersionInfo({
version: updateInfo.latestVersion,
changelog: updateInfo.changelog
});
// 只有在showDialog为true时才显示对话框
if (showDialog) {
setIsUpdateDialogOpen(true);
}
} else if (showDialog) {
// 只有在showDialog为true时才显示没有更新的提示
setToast({ message: t('app.no_updates_available'), type: 'success' });
}
setHasCheckedUpdate(true);
} catch (error) {
console.error('Failed to check for updates:', error);
if (showDialog) {
setToast({ message: t('app.update_check_failed') + ': ' + (error as Error).message, type: 'error' });
}
} finally {
setIsCheckingUpdate(false);
}
}, [hasCheckedUpdate, isNewVersionAvailable, t]);
useEffect(() => {
const checkAuth = async () => {
// If we already have a config, we're authenticated
if (config) {
setIsCheckingAuth(false);
// 自动检查更新，但不显示对话框
if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
hasAutoCheckedUpdate.current = true;
checkForUpdates(false);
}
return;
}
// For empty API key, allow access without checking config
const apiKey = localStorage.getItem('apiKey');
if (!apiKey) {
setIsCheckingAuth(false);
return;
}
// If we don't have a config, try to fetch it
try {
await api.getConfig();
// If successful, we don't need to do anything special
// The ConfigProvider will handle setting the config
} catch (err) {
// If it's a 401, the API client will redirect to login
// For other errors, we still show the app to display the error
console.error('Error checking auth:', err);
// Redirect to login on authentication error
if ((err as Error).message === 'Unauthorized') {
navigate('/login');
}
} finally {
setIsCheckingAuth(false);
// 在获取配置完成后检查更新，但不显示对话框
if (!hasCheckedUpdate && !hasAutoCheckedUpdate.current) {
hasAutoCheckedUpdate.current = true;
checkForUpdates(false);
}
}
};
checkAuth();
// Listen for unauthorized events
const handleUnauthorized = () => {
navigate('/login');
};
window.addEventListener('unauthorized', handleUnauthorized);
return () => {
window.removeEventListener('unauthorized', handleUnauthorized);
};
}, [config, navigate, hasCheckedUpdate, checkForUpdates]);
// 执行更新函数
const performUpdate = async () => {
if (!newVersionInfo) return;
try {
const result = await api.performUpdate();
if (result.success) {
setToast({ message: t('app.update_successful'), type: 'success' });
setIsNewVersionAvailable(false);
setIsUpdateDialogOpen(false);
setHasCheckedUpdate(false); // 重置检查状态，以便下次重新检查
} else {
setToast({ message: t('app.update_failed') + ': ' + result.message, type: 'error' });
}
} catch (error) {
console.error('Failed to perform update:', error);
setToast({ message: t('app.update_failed') + ': ' + (error as Error).message, type: 'error' });
}
};
if (isCheckingAuth) {
return (
<div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
<div className="text-gray-500">Loading application...</div>
</div>
);
}
if (error) {
return (
<div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
<div className="text-red-500">Error: {error.message}</div>
</div>
);
}
// Handle case where config is null or undefined
if (!config) {
return (
<div className="h-screen bg-gray-50 font-sans flex items-center justify-center">
<div className="text-gray-500">Loading configuration...</div>
</div>
);
}
return (
<div className="h-screen bg-gray-50 font-sans">
<header className="flex h-16 items-center justify-between border-b bg-white px-6">
<h1 className="text-xl font-semibold text-gray-800">{t('app.title')}</h1>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon" onClick={() => setIsSettingsOpen(true)} className="transition-all-ease hover:scale-110">
<Settings className="h-5 w-5" />
</Button>
<Button variant="ghost" size="icon" onClick={() => setIsJsonEditorOpen(true)} className="transition-all-ease hover:scale-110">
<FileJson className="h-5 w-5" />
</Button>
<Button variant="ghost" size="icon" onClick={() => setIsLogViewerOpen(true)} className="transition-all-ease hover:scale-110">
<FileText className="h-5 w-5" />
</Button>
<Popover>
<PopoverTrigger asChild>
<Button variant="ghost" size="icon" className="transition-all-ease hover:scale-110">
<Languages className="h-5 w-5" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-32 p-2">
<div className="space-y-1">
<Button
variant={i18n.language.startsWith('en') ? 'default' : 'ghost'}
className="w-full justify-start transition-all-ease hover:scale-[1.02]"
onClick={() => i18n.changeLanguage('en')}
>
English
</Button>
<Button
variant={i18n.language.startsWith('zh') ? 'default' : 'ghost'}
className="w-full justify-start transition-all-ease hover:scale-[1.02]"
onClick={() => i18n.changeLanguage('zh')}
>
中文
</Button>
</div>
</PopoverContent>
</Popover>
{/* 更新版本按钮 */}
<Button
variant="ghost"
size="icon"
onClick={() => checkForUpdates(true)}
disabled={isCheckingUpdate}
className="transition-all-ease hover:scale-110 relative"
>
<div className="relative">
<CircleArrowUp className="h-5 w-5" />
{isNewVersionAvailable && !isCheckingUpdate && (
<div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>
)}
</div>
{isCheckingUpdate && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
</div>
)}
</Button>
<Button onClick={saveConfig} variant="outline" className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]">
<Save className="mr-2 h-4 w-4" />
{t('app.save')}
</Button>
<Button onClick={saveConfigAndRestart} className="transition-all-ease hover:scale-[1.02] active:scale-[0.98]">
<RefreshCw className="mr-2 h-4 w-4" />
{t('app.save_and_restart')}
</Button>
</div>
</header>
<main className="flex h-[calc(100vh-4rem)] gap-4 p-4 overflow-hidden">
<div className="w-3/5">
<Providers />
</div>
<div className="flex w-2/5 flex-col gap-4">
<div className="h-3/5">
<Router />
</div>
<div className="flex-1 overflow-hidden">
<Transformers />
</div>
</div>
</main>
<SettingsDialog isOpen={isSettingsOpen} onOpenChange={setIsSettingsOpen} />
<JsonEditor
open={isJsonEditorOpen}
onOpenChange={setIsJsonEditorOpen}
showToast={(message, type) => setToast({ message, type })}
/>
<LogViewer
open={isLogViewerOpen}
onOpenChange={setIsLogViewerOpen}
showToast={(message, type) => setToast({ message, type })}
/>
{/* 版本更新对话框 */}
<Dialog open={isUpdateDialogOpen} onOpenChange={setIsUpdateDialogOpen}>
<DialogContent className="max-w-2xl">
<DialogHeader>
<DialogTitle>
{t('app.new_version_available')}
{newVersionInfo && (
<span className="ml-2 text-sm font-normal text-muted-foreground">
v{newVersionInfo.version}
</span>
)}
</DialogTitle>
<DialogDescription>
{t('app.update_description')}
</DialogDescription>
</DialogHeader>
<div className="max-h-96 overflow-y-auto py-4">
{newVersionInfo?.changelog ? (
<div className="whitespace-pre-wrap text-sm">
{newVersionInfo.changelog}
</div>
) : (
<div className="text-muted-foreground">
{t('app.no_changelog_available')}
</div>
)}
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setIsUpdateDialogOpen(false)}
>
{t('app.later')}
</Button>
<Button onClick={performUpdate}>
{t('app.update_now')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{toast && (
<Toast
message={toast.message}
type={toast.type}
onClose={() => setToast(null)}
/>
)}
</div>
);
}
export default App;
```
## /ui/src/assets/react.svg
```svg path="/ui/src/assets/react.svg"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
```
## /ui/src/components/ConfigProvider.tsx
```tsx path="/ui/src/components/ConfigProvider.tsx"
import { createContext, useContext, useState, useEffect } from 'react';
import type { ReactNode, Dispatch, SetStateAction } from 'react';
import { api } from '@/lib/api';
import type { Config, StatusLineConfig } from '@/types';
interface ConfigContextType {
config: Config | null;
setConfig: Dispatch<SetStateAction<Config | null>>;
error: Error | null;
}
const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
// eslint-disable-next-line react-refresh/only-export-components
export function useConfig() {
const context = useContext(ConfigContext);
if (context === undefined) {
throw new Error('useConfig must be used within a ConfigProvider');
}
return context;
}
interface ConfigProviderProps {
children: ReactNode;
}
export function ConfigProvider({ children }: ConfigProviderProps) {
const [config, setConfig] = useState<Config | null>(null);
const [error, setError] = useState<Error | null>(null);
const [hasFetched, setHasFetched] = useState<boolean>(false);
const [apiKey, setApiKey] = useState<string | null>(localStorage.getItem('apiKey'));
// Listen for localStorage changes
useEffect(() => {
const handleStorageChange = () => {
setApiKey(localStorage.getItem('apiKey'));
};
window.addEventListener('storage', handleStorageChange);
return () => {
window.removeEventListener('storage', handleStorageChange);
};
}, []);
useEffect(() => {
const fetchConfig = async () => {
// Reset fetch state when API key changes
setHasFetched(false);
setConfig(null);
setError(null);
};
fetchConfig();
}, [apiKey]);
useEffect(() => {
const fetchConfig = async () => {
// Prevent duplicate API calls in React StrictMode
// Skip if we've already fetched
if (hasFetched) {
return;
}
setHasFetched(true);
try {
// Try to fetch config regardless of API key presence
const data = await api.getConfig();
// Validate the received data to ensure it has the expected structure
const validConfig = {
LOG: typeof data.LOG === 'boolean' ? data.LOG : false,
LOG_LEVEL: typeof data.LOG_LEVEL === 'string' ? data.LOG_LEVEL : 'debug',
CLAUDE_PATH: typeof data.CLAUDE_PATH === 'string' ? data.CLAUDE_PATH : '',
HOST: typeof data.HOST === 'string' ? data.HOST : '127.0.0.1',
PORT: typeof data.PORT === 'number' ? data.PORT : 3456,
APIKEY: typeof data.APIKEY === 'string' ? data.APIKEY : '',
API_TIMEOUT_MS: typeof data.API_TIMEOUT_MS === 'string' ? data.API_TIMEOUT_MS : '600000',
PROXY_URL: typeof data.PROXY_URL === 'string' ? data.PROXY_URL : '',
transformers: Array.isArray(data.transformers) ? data.transformers : [],
Providers: Array.isArray(data.Providers) ? data.Providers : [],
StatusLine: data.StatusLine && typeof data.StatusLine === 'object' ? {
enabled: typeof data.StatusLine.enabled === 'boolean' ? data.StatusLine.enabled : false,
currentStyle: typeof data.StatusLine.currentStyle === 'string' ? data.StatusLine.currentStyle : 'default',
default: data.StatusLine.default && typeof data.StatusLine.default === 'object' && Array.isArray(data.StatusLine.default.modules) ? data.StatusLine.default : { modules: [] },
powerline: data.StatusLine.powerline && typeof data.StatusLine.powerline === 'object' && Array.isArray(data.StatusLine.powerline.modules) ? data.StatusLine.powerline : { modules: [] }
} : {
enabled: false,
currentStyle: 'default',
default: { modules: [] },
powerline: { modules: [] }
},
Router: data.Router && typeof data.Router === 'object' ? {
default: typeof data.Router.default === 'string' ? data.Router.default : '',
background: typeof data.Router.background === 'string' ? data.Router.background : '',
think: typeof data.Router.think === 'string' ? data.Router.think : '',
longContext: typeof data.Router.longContext === 'string' ? data.Router.longContext : '',
longContextThreshold: typeof data.Router.longContextThreshold === 'number' ? data.Router.longContextThreshold : 60000,
webSearch: typeof data.Router.webSearch === 'string' ? data.Router.webSearch : '',
image: typeof data.Router.image === 'string' ? data.Router.image : ''
} : {
default: '',
background: '',
think: '',
longContext: '',
longContextThreshold: 60000,
webSearch: '',
image: ''
},
CUSTOM_ROUTER_PATH: typeof data.CUSTOM_ROUTER_PATH === 'string' ? data.CUSTOM_ROUTER_PATH : ''
};
setConfig(validConfig);
} catch (err) {
console.error('Failed to fetch config:', err);
// If we get a 401, the API client will redirect to login
// Otherwise, set an empty config or error
if ((err as Error).message !== 'Unauthorized') {
// Set default empty config when fetch fails
setConfig({
LOG: false,
LOG_LEVEL: 'debug',
CLAUDE_PATH: '',
HOST: '127.0.0.1',
PORT: 3456,
APIKEY: '',
API_TIMEOUT_MS: '600000',
PROXY_URL: '',
transformers: [],
Providers: [],
StatusLine: undefined,
Router: {
default: '',
background: '',
think: '',
longContext: '',
longContextThreshold: 60000,
webSearch: '',
image: ''
},
CUSTOM_ROUTER_PATH: ''
});
setError(err as Error);
}
}
};
fetchConfig();
}, [hasFetched, apiKey]);
return (
<ConfigContext.Provider value={{ config, setConfig, error }}>
{children}
</ConfigContext.Provider>
);
}
```
## /ui/src/components/DebugPage.tsx
```tsx path="/ui/src/components/DebugPage.tsx"
import React, { useState, useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Send, Copy, Square, History, Maximize } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import MonacoEditor from '@monaco-editor/react';
import { RequestHistoryDrawer } from './RequestHistoryDrawer';
import { requestHistoryDB } from '@/lib/db';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
export function DebugPage() {
const navigate = useNavigate();
const location = useLocation();
const [requestData, setRequestData] = useState({
url: '',
method: 'POST',
headers: '{}',
body: '{}'
});
const [responseData, setResponseData] = useState({
status: 0,
responseTime: 0,
body: '',
headers: '{}'
});
const [isLoading, setIsLoading] = useState(false);
const [isHistoryDrawerOpen, setIsHistoryDrawerOpen] = useState(false);
const [fullscreenEditor, setFullscreenEditor] = useState<'headers' | 'body' | null>(null);
const headersEditorRef = useRef<any>(null);
const bodyEditorRef = useRef<any>(null);
// 切换全屏模式
const toggleFullscreen = (editorType: 'headers' | 'body') => {
const isEnteringFullscreen = fullscreenEditor !== editorType;
setFullscreenEditor(isEnteringFullscreen ? editorType : null);
// 延迟触发Monaco编辑器的重新布局，等待DOM更新完成
setTimeout(() => {
if (headersEditorRef.current) {
headersEditorRef.current.layout();
}
if (bodyEditorRef.current) {
bodyEditorRef.current.layout();
}
}, 300);
};
// 从URL参数中解析日志数据
useEffect(() => {
const params = new URLSearchParams(location.search);
const logDataParam = params.get('logData');
if (logDataParam) {
try {
const parsedData = JSON.parse(decodeURIComponent(logDataParam));
// 解析URL - 支持多种字段名
const url = parsedData.url || parsedData.requestUrl || parsedData.endpoint || '';
// 解析Method - 支持多种字段名和大小写
const method = (parsedData.method || parsedData.requestMethod || 'POST').toUpperCase();
// 解析Headers - 支持多种格式
let headers: Record<string, string> = {};
if (parsedData.headers) {
if (typeof parsedData.headers === 'string') {
try {
headers = JSON.parse(parsedData.headers);
} catch {
// 如果是字符串格式，尝试解析为键值对
const headerLines = parsedData.headers.split('\n');
headerLines.forEach((line: string) => {
const [key, ...values] = line.split(':');
if (key && values.length > 0) {
headers[key.trim()] = values.join(':').trim();
}
});
}
} else {
headers = parsedData.headers;
}
}
// 解析Body - 支持多种格式和嵌套结构
let body: Record<string, unknown> = {};
let bodyData = null;
// 支持多种字段名和嵌套结构
if (parsedData.body) {
bodyData = parsedData.body;
} else if (parsedData.request && parsedData.request.body) {
bodyData = parsedData.request.body;
}
if (bodyData) {
if (typeof bodyData === 'string') {
try {
// 尝试解析为JSON对象
const parsed = JSON.parse(bodyData);
body = parsed;
} catch {
// 如果不是JSON，检查是否是纯文本
const trimmed = bodyData.trim();
if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
// 看起来像JSON但解析失败，作为字符串保存
body = { raw: bodyData };
} else {
// 普通文本，直接保存
body = { content: bodyData };
}
}
} else if (typeof bodyData === 'object') {
// 已经是对象，直接使用
body = bodyData;
} else {
// 其他类型，转换为字符串
body = { content: String(bodyData) };
}
}
// 预填充请求表单
setRequestData({
url,
method,
headers: JSON.stringify(headers, null, 2),
body: JSON.stringify(body, null, 2)
});
console.log('Log data parsed successfully:', { url, method, headers, body });
} catch (error) {
console.error('Failed to parse log data:', error);
console.error('Raw log data:', logDataParam);
}
}
}, [location.search]);
// 发送请求
const sendRequest = async () => {
try {
setIsLoading(true);
const headers = JSON.parse(requestData.headers);
const body = JSON.parse(requestData.body);
const startTime = Date.now();
const response = await fetch(requestData.url, {
method: requestData.method,
headers: {
'Content-Type': 'application/json',
...headers
},
body: requestData.method !== 'GET' ? JSON.stringify(body) : undefined
});
const endTime = Date.now();
const responseTime = endTime - startTime;
const responseHeaders: Record<string, string> = {};
response.headers.forEach((value, key) => {
responseHeaders[key] = value;
});
const responseText = await response.text();
let responseBody = responseText;
// 尝试解析JSON响应
try {
const jsonResponse = JSON.parse(responseText);
responseBody = JSON.stringify(jsonResponse, null, 2);
} catch {
// 如果不是JSON，保持原样
}
const responseHeadersString = JSON.stringify(responseHeaders, null, 2);
setResponseData({
status: response.status,
responseTime,
body: responseBody,
headers: responseHeadersString
});
// 保存到IndexedDB
await requestHistoryDB.saveRequest({
url: requestData.url,
method: requestData.method,
headers: requestData.headers,
body: requestData.body,
status: response.status,
responseTime,
responseBody,
responseHeaders: responseHeadersString
});
} catch (error) {
console.error('Request failed:', error);
setResponseData({
status: 0,
responseTime: 0,
body: `请求失败: ${error instanceof Error ? error.message : '未知错误'}`,
headers: '{}'
});
} finally {
setIsLoading(false);
}
};
// 从历史记录中选择请求
const handleSelectRequest = (request: import('@/lib/db').RequestHistoryItem) => {
setRequestData({
url: request.url,
method: request.method,
headers: request.headers,
body: request.body
});
setResponseData({
status: request.status,
responseTime: request.responseTime,
body: request.responseBody,
headers: request.responseHeaders
});
};
// 复制cURL命令
const copyCurl = () => {
try {
const headers = JSON.parse(requestData.headers);
const body = JSON.parse(requestData.body);
let curlCommand = `curl -X ${requestData.method} "${requestData.url}"`;
// 添加headers
Object.entries(headers).forEach(([key, value]) => {
curlCommand += ` \\\n -H "${key}: ${value}"`;
});
// 添加body
if (requestData.method !== 'GET' && Object.keys(body).length > 0) {
curlCommand += ` \\\n -d '${JSON.stringify(body)}'`;
}
navigator.clipboard.writeText(curlCommand);
alert('cURL命令已复制到剪贴板');
} catch (error) {
console.error('Failed to copy cURL:', error);
alert('复制cURL命令失败');
}
};
return (
<div className="h-screen bg-gray-50 font-sans">
{/* 头部 */}
<header className="flex h-16 items-center justify-between border-b bg-white px-6">
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" onClick={() => navigate('/dashboard')}>
<ArrowLeft className="h-4 w-4 mr-2" />
返回
</Button>
<h1 className="text-xl font-semibold text-gray-800">HTTP 调试器</h1>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setIsHistoryDrawerOpen(true)}>
<History className="h-4 w-4 mr-2" />
历史记录
</Button>
<Button variant="outline" onClick={copyCurl}>
<Copy className="h-4 w-4 mr-2" />
复制 cURL
</Button>
</div>
</header>
{/* 主要内容 */}
<main className="flex h-[calc(100vh-4rem)] flex-col gap-4 p-4 overflow-hidden">
{/* 上部分：请求参数配置 - 上中下布局 */}
<div className="h-1/2 flex flex-col gap-4">
<div className="bg-white rounded-lg border p-4 flex-1 flex flex-col">
<h3 className="font-medium mb-4">请求参数配置</h3>
<div className="flex flex-col gap-4 flex-1">
{/* 上：Method、URL和发送请求按钮配置 */}
<div className="flex gap-4 items-end">
<div className="w-32">
<label className="block text-sm font-medium mb-1">Method</label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
value={requestData.method}
onChange={(e) => setRequestData(prev => ({ ...prev, method: e.target.value }))}
>
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
<option value="PATCH">PATCH</option>
</select>
</div>
<div className="flex-1">
<label className="block text-sm font-medium mb-1">URL</label>
<input
type="text"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
value={requestData.url}
onChange={(e) => setRequestData(prev => ({ ...prev, url: e.target.value }))}
placeholder="https://api.example.com/endpoint"
/>
</div>
<Button
variant={isLoading ? "destructive" : "default"}
onClick={isLoading ? () => {} : sendRequest}
disabled={isLoading || !requestData.url.trim()}
>
{isLoading ? (
<>
<Square className="h-4 w-4 mr-2" />
请求中...
</>
) : (
<>
<Send className="h-4 w-4 mr-2" />
发送请求
</>
)}
</Button>
</div>
{/* Headers和Body配置 - 使用tab布局 */}
<div className="flex-1">
<Tabs defaultValue="headers" className="h-full flex flex-col">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="headers">Headers</TabsTrigger>
<TabsTrigger value="body">Body</TabsTrigger>
</TabsList>
<TabsContent value="headers" className="flex-1 mt-2">
<div
className={`${fullscreenEditor === 'headers' ? '' : 'h-full'} flex flex-col ${
fullscreenEditor === 'headers' ? 'fixed bg-white w-[100vw] h-[100vh] z-[9999] top-0 left-0 p-4' : ''
}`}
>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium">Headers (JSON)</label>
<Button
variant="ghost"
size="sm"
onClick={() => toggleFullscreen('headers')}
>
<Maximize className="h-4 w-4 mr-1" />
{fullscreenEditor === 'headers' ? '退出全屏' : '全屏'}
</Button>
</div>
<div
id="fullscreen-headers"
className={`${fullscreenEditor === 'headers' ? 'h-full' : 'flex-1'} border border-gray-300 rounded-md overflow-hidden relative`}
>
<MonacoEditor
height="100%"
language="json"
value={requestData.headers}
onChange={(value) => setRequestData(prev => ({ ...prev, headers: value || '{}' }))}
onMount={(editor) => {
headersEditorRef.current = editor;
}}
options={{
minimap: { enabled: fullscreenEditor === 'headers' },
scrollBeyondLastLine: false,
fontSize: 14,
lineNumbers: 'on',
wordWrap: 'on',
automaticLayout: true,
formatOnPaste: true,
formatOnType: true,
}}
/>
</div>
</div>
</TabsContent>
<TabsContent value="body" className="flex-1 mt-2">
<div
className={`${fullscreenEditor === 'body' ? '' : 'h-full'} flex flex-col ${
fullscreenEditor === 'body' ? 'fixed bg-white w-[100vw] h-[100vh] z-[9999] top-0 left-0 p-4' : ''
}`}
>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium">Body (JSON)</label>
<Button
variant="ghost"
size="sm"
onClick={() => toggleFullscreen('body')}
>
<Maximize className="h-4 w-4 mr-1" />
{fullscreenEditor === 'body' ? '退出全屏' : '全屏'}
</Button>
</div>
<div
id="fullscreen-body"
className={`${fullscreenEditor === 'body' ? 'h-full' : 'flex-1'} border border-gray-300 rounded-md overflow-hidden relative`}
>
<MonacoEditor
height="100%"
language="json"
value={requestData.body}
onChange={(value) => setRequestData(prev => ({ ...prev, body: value || '{}' }))}
onMount={(editor) => {
bodyEditorRef.current = editor;
}}
options={{
minimap: { enabled: fullscreenEditor === 'body' },
scrollBeyondLastLine: false,
fontSize: 14,
lineNumbers: 'on',
wordWrap: 'on',
automaticLayout: true,
formatOnPaste: true,
formatOnType: true,
}}
/>
</div>
</div>
</TabsContent>
</Tabs>
</div>
</div>
</div>
</div>
{/* 下部分：响应信息查看 */}
<div className="h-1/2 flex flex-col gap-4">
<div className="flex-1 bg-white rounded-lg border p-4 flex flex-col">
<div className="flex items-center justify-between mb-4">
<h3 className="font-medium">响应信息</h3>
{responseData.status > 0 && (
<div className="flex items-center gap-4 text-sm">
<span className="flex items-center gap-1">
状态码: <span className={`font-mono px-2 py-1 rounded ${
responseData.status >= 200 && responseData.status < 300
? 'bg-green-100 text-green-800'
: responseData.status >= 400
? 'bg-red-100 text-red-800'
: 'bg-yellow-100 text-yellow-800'
}`}>
{responseData.status}
</span>
</span>
<span>
响应时间: <span className="font-mono">{responseData.responseTime}ms</span>
</span>
</div>
)}
</div>
{responseData.body ? (
<div className="flex-1">
<Tabs defaultValue="body" className="h-full flex flex-col">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="body">响应体</TabsTrigger>
<TabsTrigger value="headers">响应头</TabsTrigger>
</TabsList>
<TabsContent value="body" className="flex-1 mt-2">
<div className="bg-gray-50 border rounded-md p-3 h-full overflow-auto">
<pre className="text-sm whitespace-pre-wrap">
{responseData.body}
</pre>
</div>
</TabsContent>
<TabsContent value="headers" className="flex-1 mt-2">
<div className="bg-gray-50 border rounded-md p-3 h-full overflow-auto">
<pre className="text-sm">
{responseData.headers}
</pre>
</div>
</TabsContent>
</Tabs>
</div>
) : (
<div className="flex-1 flex items-center justify-center text-gray-500">
{isLoading ? '发送请求中...' : '发送请求后将在此显示响应'}
</div>
)}
</div>
</div>
</main>
{/* 请求历史抽屉 */}
<RequestHistoryDrawer
isOpen={isHistoryDrawerOpen}
onClose={() => setIsHistoryDrawerOpen(false)}
onSelectRequest={handleSelectRequest}
/>
</div>
);
}
```
## /ui/src/components/JsonEditor.tsx
```tsx path="/ui/src/components/JsonEditor.tsx"
import { useState, useEffect, useRef } from 'react';
import Editor from '@monaco-editor/react';
import { Button } from '@/components/ui/button';
import { useConfig } from '@/components/ConfigProvider';
import { api } from '@/lib/api';
import { useTranslation } from 'react-i18next';
import { Save, X, RefreshCw } from 'lucide-react';
interface JsonEditorProps {
open: boolean;
onOpenChange: (open: boolean) => void;
showToast?: (message: string, type: 'success' | 'error' | 'warning') => void;
}
export function JsonEditor({ open, onOpenChange, showToast }: JsonEditorProps) {
const { t } = useTranslation();
const { config } = useConfig();
const [jsonValue, setJsonValue] = useState<string>('');
const [isSaving, setIsSaving] = useState(false);
const [isVisible, setIsVisible] = useState(false);
const [isAnimating, setIsAnimating] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (config && open) {
setJsonValue(JSON.stringify(config, null, 2));
}
}, [config, open]);
// Handle open/close animations
useEffect(() => {
if (open) {
setIsVisible(true);
// Trigger the animation after a small delay to ensure the element is rendered
requestAnimationFrame(() => {
setIsAnimating(true);
});
} else {
setIsAnimating(false);
// Wait for the animation to complete before hiding
const timer = setTimeout(() => {
setIsVisible(false);
}, 300);
return () => clearTimeout(timer);
}
}, [open]);
const handleSaveResponse = (response: unknown, successMessage: string, errorMessage: string) => {
// 根据响应信息进行提示
if (response && typeof response === 'object' && 'success' in response) {
const apiResponse = response as { success: boolean; message?: string };
if (apiResponse.success) {
if (showToast) {
showToast(apiResponse.message || successMessage, 'success');
}
return true;
} else {
if (showToast) {
showToast(apiResponse.message || errorMessage, 'error');
}
return false;
}
} else {
// 默认成功提示
if (showToast) {
showToast(successMessage, 'success');
}
return true;
}
};
const handleSave = async () => {
if (!jsonValue) return;
try {
setIsSaving(true);
const parsedConfig = JSON.parse(jsonValue);
const response = await api.updateConfig(parsedConfig);
const success = handleSaveResponse(
response,
t('app.config_saved_success'),
t('app.config_saved_failed')
);
if (success) {
onOpenChange(false);
}
} catch (error) {
console.error('Failed to save config:', error);
if (showToast) {
showToast(t('app.config_saved_failed') + ': ' + (error as Error).message, 'error');
}
} finally {
setIsSaving(false);
}
};
const handleSaveAndRestart = async () => {
if (!jsonValue) return;
try {
setIsSaving(true);
const parsedConfig = JSON.parse(jsonValue);
// Save config first
const saveResponse = await api.updateConfig(parsedConfig);
const saveSuccessful = handleSaveResponse(
saveResponse,
t('app.config_saved_success'),
t('app.config_saved_failed')
);
// Only restart if save was successful
if (saveSuccessful) {
// Restart service
const restartResponse = await api.restartService();
handleSaveResponse(
restartResponse,
t('app.config_saved_restart_success'),
t('app.config_saved_restart_failed')
);
onOpenChange(false);
}
} catch (error) {
console.error('Failed to save config and restart:', error);
if (showToast) {
showToast(t('app.config_saved_restart_failed') + ': ' + (error as Error).message, 'error');
}
} finally {
setIsSaving(false);
}
};
if (!isVisible && !open) {
return null;
}
return (
<>
{(isVisible || open) && (
<div
className={`fixed inset-0 z-50 transition-all duration-300 ease-out ${
isAnimating && open ? 'bg-black/50 opacity-100' : 'bg-black/0 opacity-0 pointer-events-none'
}`}
onClick={() => onOpenChange(false)}
/>
)}
<div
ref={containerRef}
className={`fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-white shadow-2xl transition-all duration-300 ease-out transform ${
isAnimating && open ? 'translate-y-0' : 'translate-y-full'
}`}
style={{
height: '100vh',
maxHeight: '100vh'
}}
>
<div className="flex items-center justify-between border-b p-4">
<h2 className="text-lg font-semibold">{t('json_editor.title')}</h2>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={() => onOpenChange(false)}
disabled={isSaving}
>
<X className="h-4 w-4 mr-2" />
{t('json_editor.cancel')}
</Button>
<Button
variant="outline"
size="sm"
onClick={handleSave}
disabled={isSaving}
>
<Save className="h-4 w-4 mr-2" />
{isSaving ? t('json_editor.saving') : t('json_editor.save')}
</Button>
<Button
variant="default"
size="sm"
onClick={handleSaveAndRestart}
disabled={isSaving}
>
<RefreshCw className="h-4 w-4 mr-2" />
{isSaving ? t('json_editor.saving') : t('json_editor.save_and_restart')}
</Button>
</div>
</div>
<div className="flex-1 min-h-0 bg-gray-50">
<Editor
height="100%"
defaultLanguage="json"
value={jsonValue}
onChange={(value) => setJsonValue(value || '')}
theme="vs"
options={{
minimap: { enabled: true },
fontSize: 14,
scrollBeyondLastLine: false,
automaticLayout: true,
wordWrap: 'on',
formatOnPaste: true,
formatOnType: true,
suggest: {
showKeywords: true,
showSnippets: true,
},
}}
/>
</div>
</div>
</>
);
}
```
## /ui/src/components/ProtectedRoute.tsx
```tsx path="/ui/src/components/ProtectedRoute.tsx"
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
// For this application, we allow access without an API key
// The App component will handle loading and error states
return children;
};
export default ProtectedRoute;
```
## /ui/src/components/PublicRoute.tsx
```tsx path="/ui/src/components/PublicRoute.tsx"
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
// Always show login page
// The login page will handle empty API keys appropriately
return children;
};
export default PublicRoute;
```
## /ui/src/components/ui/badge.tsx
```tsx path="/ui/src/components/ui/badge.tsx"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}
// eslint-disable-next-line react-refresh/only-export-components
export { Badge, badgeVariants }
```
## /ui/src/components/ui/label.tsx
```tsx path="/ui/src/components/ui/label.tsx"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
export { Label }
```
## /ui/src/lib/utils.ts
```ts path="/ui/src/lib/utils.ts"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
```
The content has been capped at 50000 tokens. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.