# Trae 統合

> **最終確認**：2026-09-18 · 📄 公式ドキュメント準拠（Trae 3.3.101（2026-09-15 リリース））

## 概要

| 項目 | 内容 |
|---|---|
| 利用できるモデル | Claude ✅（Claude Code 拡張。内蔵 AI も Anthropic Messages 形式のカスタムモデルに対応）· GPT ✅ · 中国系モデル ✅（内蔵 AI の OpenAI 形式）· Gemini ❌ |
| プロトコルと Base URL | Anthropic：`https://api.qcode.cc/api` · OpenAI：`https://api.qcode.cc/openai/v1` |
| 設定場所 | 内蔵 AI：設定 → カスタムモデル。Claude Code 拡張は `~/.claude/` 設定を共有 |
| 公式ドキュメント | [docs.trae.ai](https://docs.trae.ai) |

Trae は ByteDance がリリースした AI ネイティブ IDE で、VS Code から派生した構成です。拡張機能を追加でき、独自の **Agent** と **Chat** の両モードも備わっています。2026-05-08 の v3.3.56 で従来の Builder と Builder with MCP は **Agent に統合**され、公式ドキュメントから Builder の表記は消えました。本ガイドは 2 つを扱います：Trae（国際版）または Trae CN（中国版）への Claude Code 拡張機能の導入、そして**内蔵 AI のカスタムモデルとして QCode.cc を追加する**方法。

> **名称について**：公式ドキュメントサイト（中日英）はこの IDE を現在 **TraeCode** と呼んでおり、中国の公式サイトは **TraeWork**（Work / Code / Design モード切替）を前面に出しています。公式のリネーム発表はなく、changelog のリリース見出しが v3.3.84（2026-08-07）から TraeCode に変わっただけです。本ページのファイル名と URL はそのままです。

## 前提条件

Trae 拡張機能を設定する前に、以下を確認してください：

1. **Claude Code CLI がインストールされ、正常に動作している**
   - [インストールガイド](/docs/getting-started/installation) を参照してインストールを完了
   - [環境変数の設定](/docs/getting-started/environment) を参照して設定を完了

2. **Trae または Trae CN が最新版にインストール済み**
   - 国際版ダウンロード：[trae.ai](https://www.trae.ai/)
   - 中国版 Trae CN ダウンロード：[trae.com.cn](https://www.trae.com.cn/)

> **Trae CN をいつ選ぶ？** 公式ドキュメントに地域別の説明はありません。あるのは「TraeCode の拡張機能マーケットに必要な拡張機能が無い場合、VS Code の拡張機能マーケットのものを TraeCode へ入れられる」という一文だけ。よって下記の「マーケットで見つからない」系の手順はすべて条件付きです：マーケットに見つかるならマーケット、見つからなければ `.vsix`。

## インストール手順

### ステップ 1：Claude Code 拡張機能のインストール

Claude Code 拡張機能のインストール方法は 2 つあり、順番に試してください。公式の注意書きも引用しておきます：新しい VS Code のインターフェースに依存する拡張機能の特定バージョンは TraeCode と非互換の可能性がある。その場合は Version History から過去版をダウンロードします。

#### 経路 A：Trae 内蔵拡張機能マーケットからインストール（推奨）

1. Trae を開き、拡張機能パネルを開く（`Ctrl+Shift+X` / `Cmd+Shift+X`）

2. **"Claude Code"** を検索（発行元：Anthropic）

3. **インストール** をクリック

Trae の拡張機能マーケットで Claude Code が見つからない場合は経路 B を使ってください（どのバージョンで欠けるかは公式に記載がないため、ここでは断定しません）。

#### 経路 B：オフライン .vsix によるローカルインストール

マーケットに目的の拡張機能が無い場合に使う経路です：

1. ブラウザで [Claude Code 拡張機能ページ](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code) を開く

2. あなたの**プラットフォームとアーキテクチャに一致する** `.vsix` をダウンロードします。Trae 公式文書の手順は、拡張機能詳細ページで **Version History** を開き、`itemName` と `version` を使ってダウンロード URL を組み立てるというものです：

   ```text
   https://marketplace.visualstudio.com/_apis/public/gallery/publishers/<publisher>/vsextensions/<extension>/<version>/vspackage
   ```

   Claude Code なら `publishers/anthropic/vsextensions/claude-code/<version>/vspackage` です。
   🔴 **アーキテクチャを必ず合わせてください**：Claude Code はプラットフォーム別に公開されています（ファイル名に `@win32-x64` や `@alpine-arm64` のようなサフィックスが付く）。公式文書も「アーキテクチャを区別する拡張機能は、自分が使う環境用の VSIX を自分でダウンロードする必要がある」と明記しています。間違うとインストール自体は通っても動きません。macOS は Apple Silicon / Intel、Linux と Windows は x64 / arm64 に分かれます。

   または、拡張機能ページの右サイドバーに **Download Extension** リンクが表示されていれば、そこから取得してください。

   > **ヒント**：中国本土から VS Code Marketplace にアクセスするにはプロキシが必要な場合があります。ローカルでダウンロードに失敗した場合は、安定した国際回線のある環境で `.vsix` をダウンロードし、対象マシンにコピーしてください。

3. Trae で拡張機能パネルを開く → 右上の **⋯** メニュー → **VSIX からインストール**（Install from VSIX）を選択し、ダウンロードした `.vsix` ファイルを選択

   公式文書にもう一つ手順があります：ダウンロードした `.vsix` を**拡張機能パネルにそのままドラッグ**すると、Trae が自動的に導入を開始します。
   環境によっては `trae` という起動コマンドが存在しますが、Trae の公式文書に拡張機能を入れるための旗標の記載はなく、当社でも未検証のため、このページではコマンドを载せません。

### ステップ 2：primaryApiKey の設定

これは重要なステップです！Claude Code 拡張機能は設定ファイルに `primaryApiKey` を必要とします。

> **朗報**：Trae は VS Code と同じ設定パス（`~/.claude/config.json`）を共有しているため、VS Code で既に設定済みのユーザーは再度設定する必要はありません。

<div data-os="windows" markdown="1">

#### Windows

設定ファイル `C:\Users\ユーザー名\.claude\config.json` を編集または作成：

```json
{
  "primaryApiKey": "qcode"
}
```

</div>

<div data-os="macos" markdown="1">

#### macOS

設定ファイル `~/.claude/config.json` を編集または作成：

```bash
mkdir -p ~/.claude

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

</div>

<div data-os="linux" markdown="1">

#### Linux

設定ファイル `~/.claude/config.json` を編集または作成：

```bash
mkdir -p ~/.claude

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

</div>

> **注意**：`primaryApiKey` の値は何でも構いません（`qcode` など）。このフィールドを設定するだけで OK です。実際の API 認証は、環境変数で設定した `ANTHROPIC_AUTH_TOKEN` を使用します。

> **重要**：設定ファイルは `config.json` であり、`settings.json` ではありません。これら 2 つのファイルを注意して区別してください。

### ステップ 3：Trae を再起動

設定完了後、Trae を再起動して変更を有効にします。

## Trae 内蔵 AI との関係

Trae の内蔵 AI（**Agent** と **Chat**）は、もはや ByteDance の自社バックエンドだけを使う構成ではありません。公式文書には「内蔵モデル以外にも、カスタムモデルの接続に対応する」とあり、**カスタム設定**の種別では **API 形式**・**リクエストアドレス**・**モデル ID**・認証情報を指定します。API 形式の選択肢の一つが **Anthropic Messages 形式**で、公式の記述は「Anthropic の `/v1/messages` 仕様に対応し、Claude 系列および同 API 互換のモデルサービスに適用。典型的な互換サービスとして Anthropic Claude、**一部のカスタム API プロキシ**などが挙げられます」となっています。

| | 内蔵 AI のカスタムモデル | Claude Code 拡張機能 |
|---|---|---|
| プロトコル | API 形式は Anthropic Messages / OpenAI Chat Completions | Anthropic Messages |
| 入口 | 設定 → **モデル** → **モデル追加** → **カスタムモデル** | 拡張機能の設定 + `~/.claude/` の設定 |
| アドレス | 2 通り：**完整 URL** スイッチを ON にして完全なアドレスを入れる。OFF にして基礎アドレスだけ入れると Trae が API 形式に応じて補完 | `ANTHROPIC_BASE_URL` |
| 注意 | **Auto モードはカスタムモデルを呼び出さない**（公式明記）。自分で追加したモデルを使うなら Auto を抜けてください | 内蔵 AI とは干渉し合わず、共存可能 |

QCode のアドレスに当てはめると次のとおり（**参考表記。当社側で Trae 内での実測はしていません**）：

| API 形式 | 完整 URL ON | 完整 URL OFF（基礎アドレス） |
|---|---|---|
| Anthropic Messages | `https://api.qcode.cc/api/v1/messages` | `https://api.qcode.cc/api` |
| OpenAI Chat Completions | `https://api.qcode.cc/openai/v1/chat/completions` | `https://api.qcode.cc/openai/v1` |

**モデル ID** は [qcode.cc/models](https://qcode.cc/models) 掲載どおりの文字列を、**API キー**にはあなたの `cr_` キーを指定してください。

QCode.cc サービスを既に購入している場合は、プランを最大限活用するため、Claude Code 拡張機能を主に使用することを推奨します。

## 使用方法

### キーボードショートカット

| ショートカット | 機能 |
|----------------|------|
| `Cmd+Esc` / `Ctrl+Esc` | Claude Code パネルを開く/閉じる |
| `Cmd+Shift+P` / `Ctrl+Shift+P` | コマンドパレットを開き、Claude コマンドを検索 |

### よく使う機能

1. **コード説明**
   - コードを選択
   - 右クリックで "Ask Claude" を選択するかショートカットを使用
   - 質問を入力、例：「このコードを説明して」

2. **コード生成**
   - Claude パネルを開く
   - 必要な機能を説明
   - Claude がコードを生成し、挿入オプションを提供

3. **コードリファクタリング**
   - リファクタリングするコードを選択
   - Claude にリファクタリングを依頼
   - プレビューして変更を適用

4. **エラー修正**
   - コードにエラーがある場合
   - エラーコードまたはメッセージを選択
   - Claude に分析と修正案を依頼

## 設定オプション

Trae 設定で Claude Code 拡張機能の動作を調整できます（これらの設定は VS Code と共通です）：

1. 設定を開く（`Ctrl+,` / `Cmd+,`）

2. "Claude Code" を検索

3. 必要に応じてオプションを調整

### よく使う設定

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

## ターミナル CLI との併用

Trae 拡張機能とターミナル CLI は一緒に使用できます：

| シナリオ | 推奨ツール |
|----------|-----------|
| 素早いコード編集 | Trae 拡張機能 |
| 複雑なプロジェクト分析 | ターミナル CLI |
| コードレビュー | どちらでも |
| Git 操作 | ターミナル CLI |
| ファイル生成 | どちらでも |

## トラブルシューティング

### マーケットで Claude Code が見つからない

**症状**：Trae 拡張機能パネルで "Claude Code" を検索しても結果が表示されない、または Anthropic 公式版でない結果が返される。

**解決策**：**経路 B：オフライン .vsix ローカルインストール**（上記ステップ 1 を参照）に切り替えてください。公式の見解は「TraeCode のマーケットに無い拡張機能は VS Code のマーケットから入れられる」というだけで、中国版／国際版の区別は述べられていません。

### Trae CN で .vsix をダウンロードできない

**症状**：`marketplace.visualstudio.com` にアクセスできない、またはダウンロード速度が 0。

**解決策**：

1. 安定した国際回線またはプロキシ経由で Marketplace から `.vsix` をダウンロード

2. または QCode.cc サポートに Claude Code 拡張機能 `.vsix` ミラーリンクを依頼

3. ダウンロード後、「VSIX からインストール」方法でロード

### Claude Code パネルが空白 / 起動しない

1. `~/.claude/config.json` が存在し、JSON 形式が有効であることを確認

2. ファイル名が `config.json` であり、`settings.json` ではないことを確認（これが最もよくある落とし穴）

3. 環境変数 `ANTHROPIC_BASE_URL` と `ANTHROPIC_AUTH_TOKEN` が正しく設定されていることを確認

4. ターミナルで `claude` を実行して CLI が動作することを確認

### ショートカットが Trae 内蔵 AI と競合する

`Cmd+Esc` / `Ctrl+Esc` が Trae の Agent / Chat に取られている場合：

1. Trae 設定 → キーボードショートカットを開く

2. `claude-code` または `Claude Code` を検索

3. "Claude Code: Toggle Panel" を競合しないキーに再割り当て

### 接続タイムアウト

1. `https://asia.qcode.cc` にネットワーク接続できるか確認

2. `ANTHROPIC_BASE_URL` 環境変数の設定を確認

3. プロキシなし環境の中国本土ユーザーには、大陸加速ノード `https://api.qcode.cc/api` を推奨します（[probe.qcode.cc](https://probe.qcode.cc) でのリクエスト確認に対応）

## 次のステップ

- [CLI テクニック](/docs/usage/cli-tips) で効率を向上

- [ワークフロー](/docs/usage/workflow-tips) で開発フローを最適化

- VS Code も併用している場合は [VS Code 統合](/docs/ide/vscode) を参照