Trae Integration

Use the Claude Code extension in ByteDance's Trae IDE (including offline install guide for Trae CN)

Trae Integration¶

Trae is an AI-native IDE from ByteDance, built as a fork of VS Code. It is compatible with most VS Code extensions while shipping its own Builder and Chat AI agents. This guide explains how to install and use the Claude Code extension in Trae (international edition) or Trae CN (China edition), accessing Claude, Codex and other models through QCode.cc.

Prerequisites¶

Before configuring the Trae extension, ensure:

1. Claude Code CLI is installed and working

2. See Installation Guide to complete installation

3. See Environment Configuration to complete setup

4. Trae or Trae CN is installed and up to date

5. International edition: trae.ai

6. China edition (Trae CN): trae.com.cn

When to use Trae CN? Trae CN is optimized for mainland China network conditions; if you are based outside mainland China or already have reliable international connectivity, the international edition is recommended.

Installation Steps¶

Step 1: Install the Claude Code Extension¶

Trae is compatible with most VS Code extensions. The Claude Code extension can be installed via two paths — try them in order.

Path A: Install from Trae's Built-in Extension Marketplace (Recommended)¶

1. Open Trae and navigate to the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)

2. Search for "Claude Code" (publisher: Anthropic)

3. Click Install

If the extension is not found in the Trae marketplace (common on earlier Trae CN builds), use Path B.

Path B: Offline .vsix Local Install¶

This is the most reliable path for Trae CN users:

1. Open the Claude Code extension page

2. Find the Download Extension link in the right sidebar and download the .vsix file

Tip: Accessing the VS Code Marketplace from mainland China may require a proxy. If the download fails locally, download the .vsix on a machine with a reliable international connection and copy it over.

1. In Trae, open the Extensions panel → click the ⋯ menu in the upper right → Install from VSIX, and select the downloaded .vsix file

Or use the command line:

bash trae --install-extension /path/to/claude-code-x.x.x.vsix

Step 2: Configure primaryApiKey¶

This is a critical step! The Claude Code extension requires primaryApiKey in the configuration file.

Good news: Trae shares the same configuration path as VS Code (~/.claude/config.json). Users who already configured VS Code do not need to repeat this step.

{
  "primaryApiKey": "qcode"
}

mkdir -p ~/.claude

cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF

mkdir -p ~/.claude

cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF

Note: The value of primaryApiKey can be anything (like qcode); what matters is that the field is set. The actual API authentication still uses the ANTHROPIC_AUTH_TOKEN from your environment variables.

Important: The config file is config.json, NOT settings.json. Please distinguish carefully between the two.

Step 3: Restart Trae¶

After configuration, restart Trae for the changes to take effect.

Relationship with Trae's Built-in AI¶

Trae ships with its own Builder and Chat AI modes, powered by ByteDance's backend. The official Anthropic Claude Code extension talks to the ANTHROPIC_BASE_URL you configured (i.e. the QCode.cc proxy). The two are fully independent and can coexist:

If you already purchased a QCode.cc subscription, we recommend using the Claude Code extension as your primary driver to get the most value out of your plan.

Usage¶

Keyboard Shortcuts¶

Common Features¶

1. Code Explanation

2. Select code

3. Right-click and choose "Ask Claude" or use shortcut

4. Enter your question, e.g., "Explain this code"

5. Code Generation

6. Open Claude panel

7. Describe the feature you need

8. Claude will generate code with insert options

9. Code Refactoring

10. Select code to refactor

11. Ask Claude to help refactor

12. Preview and apply changes

13. Error Fixing

14. When code has errors

15. Select the error code or message
16. Ask Claude to analyze and provide fixes

Configuration Options¶

In Trae settings you can adjust Claude Code extension behavior (these settings are identical to VS Code):

1. Open Settings (Ctrl+, / Cmd+,)

2. Search for "Claude Code"

3. Adjust options as needed

Common Settings¶

{
  "claude-code.autoSuggest": true,
  "claude-code.inlineChat": true
}

Using with Terminal CLI¶

The Trae extension and terminal CLI can be used together:

Troubleshooting¶

Claude Code Not Found in the Marketplace¶

Symptoms: Searching for "Claude Code" in Trae's Extensions panel returns no results, or the results are not the official Anthropic-published extension.

Solution: Use Path B: Offline .vsix Local Install (see Step 1 above). This is currently the most reliable path for Trae CN users.

Trae CN Cannot Download the .vsix¶

Symptoms: Accessing marketplace.visualstudio.com fails or downloads at 0 B/s.

Solution:

1. Download the .vsix over a reliable international connection or through a proxy

2. Or contact QCode.cc support for a mirror link of the Claude Code extension .vsix

3. Install via "Install from VSIX" once the file is available locally

Claude Code Panel Blank or Won't Start¶

1. Confirm ~/.claude/config.json exists and contains valid JSON

2. Confirm the filename is config.json, NOT settings.json (the most common pitfall)

3. Confirm environment variables ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN are set

4. Run claude in the terminal to verify the CLI works

Shortcut Conflicts with Trae's Built-in AI¶

If Cmd+Esc / Ctrl+Esc is captured by Trae's Builder or Chat:

1. Open Trae Settings → Keyboard Shortcuts

2. Search for claude-code or Claude Code

3. Rebind "Claude Code: Toggle Panel" to a non-conflicting key

Connection Timeout¶

1. Check that https://asia.qcode.cc is reachable from your network

2. Verify the ANTHROPIC_BASE_URL environment variable

3. Users in mainland China can use asia.qcode.cc or cn.qcode.cc entry points without a proxy

Next Steps¶

• Explore CLI Tips to boost efficiency

• Learn Workflow Tips to optimize your development flow

• See VS Code Integration if you also use VS Code