Login
Back to Blog
04|Claude Code with Crazyrouter Series 04: Chapter 1: Quick Start

04|Claude Code with Crazyrouter Series 04: Chapter 1: Quick Start

C
Crazyrouter Team
June 10, 2026
0 viewsEnglishClaude Code
Share:

04 | Claude Code with Crazyrouter Series 04: Chapter 1: Quick Start#

This is Part 04 of the Crazyrouter Claude Code series. This article focuses on “Claude Code with Crazyrouter Series 04: Chapter 1: Quick Start,” covering Chapter 1: Quick Start, 1.1 What Is Claude Code, and why non-programmers can use it easily.

Unified integration guidance: Claude Code / Anthropic native clients use ANTHROPIC_BASE_URL=https://cn.crazyrouter.com; OpenAI-compatible SDKs, HTTP requests, and frontend/backend applications use base_url=https://cn.crazyrouter.com/v1.

Overview#

  • Who this is for: developers who are using Claude Code, planning to connect to domestic models, or want to standardize team calls through Crazyrouter.
  • What you will learn: how to configure environment variables according to the Crazyrouter documentation, organize your workflow, and avoid the /v1/v1/... issue caused by an incorrect Base URL.
  • Recommended preparation: first create a separate API Token in the Crazyrouter console, then follow the Claude Code integration documentation to complete the basic setup.

Chapter 1: Quick Start#

Complete Claude Code installation walkthrough

Link:

[Required setup for installing Claude Code on Windows]

Link:

Claude Code installation video tutorial and hands-on demo

Link:

1.1 What Is Claude Code#

Claude Code is a powerful AI assistant tool that helps you complete all kinds of work on your computer. Put simply, it is like an intelligent colleague who is always available. You can talk to it in everyday language and ask it to help you process text, analyze data, organize files, and handle many other tasks.

Why Non-Programmers Can Use It Easily#

Claude Code is designed to be very user-friendly. You do not need any programming knowledge to use it:

  • Natural language interaction: talk to it directly in Chinese, as simply as chatting with a friend
  • UI-based operation: although Claude Code itself is a command-line tool, we can also use it in a graphical interface
  • Intelligent understanding: it can understand your intent and provide useful help even when your wording is not perfectly precise
  • What you see is what you get: you can directly see the results it produces without learning complex commands

1.2 Install the Domestic Version of Trae and the Claude Code Extension#

Step 1: Visit the Trae Official Website#

Open your browser and visit

Step 2: Download the Installer#

  • Choose the appropriate version for your operating system:

    • Windows version (supports Windows 10/11)
    • macOS Intel chip version
    • macOS M-series chip version
  • Click the download button and wait for the installer to finish downloading (about 613 MB)

Step 3: Install Trae#

  • Windows: double-click the downloaded installer and complete the installation by following the setup wizard
  • macOS: open the downloaded .dmg file and drag Trae into the Applications folder
  • During installation, it is recommended to choose an SSD storage path and reserve more than 1 GB of space

Step 4: Launch Trae#

After installation, open Trae. You will see an editor interface that is very similar to VS Code.

Install the Claude Code Extension in Trae#

Trae is fully compatible with the VS Code extension marketplace. The steps for installing the Claude Code extension are exactly the same as in VS Code.

Step 1: Open the Extension Marketplace#

In Trae’s left sidebar, click the Extensions icon (the icon made of four squares), or use the shortcut Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).

Step 2: Search for Claude Code#

Enter "Claude Code" in the search box and find the official extension in the search results.

Step 3: Install the Extension#

Click the "Install" button on the right side of the extension and wait for the installation to complete.

First Launch of Claude Code#

Step 1: Open Claude Code#

After installation, you do not need to leave the installation screen. A Claude Code icon (a chat bubble icon) will appear at the top of Trae. Click it.

At this point, the Claude Code chat window will appear in your code area.

Step 2: Log In to Your Account#

The first time you use it, you need to log in to your Anthropic account:

  • Click the login button
  • Complete login or registration in the browser
  • Click confirm in the dialog box that appears
  • Wait for login verification to complete

Because users in China are blocked by the official Claude service, we recommend using the method in the next chapter, “Connecting to Domestic Large Models,” to use Claude Code.

Step 3: Start Using It#

After you log in successfully, you can start using Claude Code. Enter your question or request in the chat box, and Claude Code will respond.

Advantages of Trae over VS Code#

As an alternative to VS Code, the domestic version of Trae has the following advantages:

  1. Fully compatible with VS Code: the interface, shortcuts, and extension ecosystem are exactly the same as VS Code
  2. Optimized for domestic networks: extension downloads are faster and access is more stable
  3. Built-in AI features: in addition to the Claude Code extension, it also provides extra AI assistance features
  4. Better Chinese support: optimized for Chinese users
  5. Free to use: completely free and available for permanent use

FAQ#

Q: Is Trae free?

A: Yes. The domestic version of Trae is completely free and can be used permanently.

Q: What is the difference between Trae and VS Code?

A: Trae is developed based on VS Code, and its interface and workflow are almost exactly the same. The main difference is that Trae is optimized for domestic users, offers faster network access, and includes some additional built-in AI features.

Q: Does Trae support all VS Code extensions?

A: Yes. Trae is fully compatible with the VS Code extension ecosystem, so you can install and use all VS Code extensions.

Q: How long does installation take?

A: It usually only takes a few minutes. The exact time depends on your network speed.

Q: Can I use it on multiple computers?

A: Yes. You can install Trae and the Claude Code extension on any computer and log in with the same account.

Q: Are Trae’s shortcuts the same as VS Code’s?

A: Yes. Trae’s shortcuts are exactly the same as VS Code’s, so you can switch between them seamlessly.

1.3 Getting to Know the Claude Code Interface#

Open any file with Trae, and you will see the Claude Code icon in the upper-right area near the top. Click it to open the Claude Code interface.

After opening Claude Code, you will see a friendly interface. Let’s look at what each part does.

Chat Window#

The chat window is the core area of Claude Code, located on the left side of the interface.

Input Box#

At the bottom of the chat window, you will see an input box. This is your main workspace:

  • Enter your questions or requests here
  • Supports multi-line input
  • You can paste text content
  • Press Enter to send a message

Conversation History#

Above the input box is the conversation history area:

  • Shows all conversations between you and Claude Code
  • You can scroll up to view previous messages
  • Each message has a timestamp
  • You can copy the content of any message

Message Types#

  • Your messages: usually displayed on the right, with your avatar
  • Claude’s replies: usually displayed on the left, with an AI icon
  • System messages: display operation prompts or error messages

Core Operations#

Chat with Claude Code#

  • Send a message: enter content in the input box, then press Enter to send
  • Interrupt generation: if you need to stop generation while it is running, click the “Stop” button next to the input box

Quick Actions#

Click the “/” button next to the input box to expand the quick actions menu.

The menu includes:

  • Conversation handling: create, resume, clear
  • File operations: upload a file as reference, specify a file path
  • Configuration operations
  • Slash commands

Quick Commands#

In the chat dialog, enter / to open the quick menu. Enter @ to open the file selection menu.

Thinking Mode Toggle#

There is a “Think” toggle button next to the input box, used to switch thinking mode on or off.

Execution Mode#

At the far left below the input box, you will see the current execution mode. Click it to switch to another mode. The modes include:

  • Plan mode: planning mode, used to generate a code plan
  • Ask before edits: asks before editing mode, used to confirm whether to modify the generated code
  • Edit automatically: automatic editing mode, directly modifies the generated code Now that you’re familiar with the Claude Code interface, let’s start your first conversation!

1.4 Using Z Code to Use Claude Code#

Z Code is a lightweight AI collaborative development tool launched by Crazyrouter. It provides developers with a unified, friendly visual desktop that makes AI programming tools like Claude Code simpler and more intuitive to use.

What Is Z Code?#

Z Code is a lightweight code editor currently in Alpha testing. Its core goal is to lower the barrier to using command-line AI programming tools such as Claude Code, Codex, and Gemini. By providing a unified visual interface, Z Code brings powerful AI coding assistants out of the command line—where they are often only comfortable for advanced users—and onto the desktops of more everyday developers.

Core Features of Z Code#

  1. Unified visual interface: Integrates multiple AI programming tools into one friendly graphical interface
  2. One-click access to Claude Code: Use Claude Code directly in the interface without complex command-line operations
  3. Low barrier to entry: Developers only need one API Key to get started
  4. Lightweight design: Fast startup and low resource usage
  5. Multiple AI tool integrations: In addition to Claude Code, it supports AI programming tools such as Codex and Gemini

Why Use Claude Code Through Z Code?#

Compared with using the command-line version of Claude Code directly, Z Code has several clear advantages:

Lower Barrier to Entry#

  • No need to memorize complex command-line parameters
  • Visual operations that are intuitive and easy to understand
  • Suitable for beginners and less experienced developers

Better Development Efficiency#

  • Manage multiple AI tools in one unified interface
  • Quickly switch between different AI models
  • Reduce the time cost of context switching

Better User Experience#

  • Friendly graphical interface
  • Real-time feedback and status display
  • Supports editing the AI’s thinking process

Integrated Workflow#

  • Seamlessly integrates AI programming tools into the development environment
  • Supports code editing, debugging, and AI assistance in one workflow
  • Reduces switching between tools

How to Get Z Code#

Visit the Official Website#

Open your browser and visit the official Z Code website:

Download and Install#

  • Choose the version that matches your operating system
  • Windows and macOS are currently supported
  • After downloading the installer, follow the prompts to complete installation

Note: Z Code is currently in Alpha testing, so some features may be incomplete or contain bugs. Back up important code before using it.

Using Claude Code in Z Code#

Configure Claude Code#

  1. Launch Z Code: Open the installed Z Code editor
  2. Open Settings: Find the settings option in the menu bar
  3. Add Claude Code: Select Claude Code in the AI tool configuration
  4. Enter API Key: Enter your Anthropic API Key
  5. Complete configuration: Save the configuration and test the connection

Use Claude Code#

After configuration is complete, you can use Claude Code in Z Code:

  1. Open the chat window: Click the Claude Code icon in the interface
  2. Enter your request: Type your question or coding requirement in the chat box
  3. Get a response: Claude Code will provide the corresponding code or suggestion
  4. Apply the code: You can apply the generated code directly to your project

Drawbacks#

  • Z Code currently supports only Windows and macOS
  • Its features are relatively lightweight, and it cannot directly edit code
  • It does not support direct code debugging; you need to debug through another IDE

Z Code vs. Trae#

FeatureZ CodeTrae
CompanyCrazyrouterTrae team
Primary focusAI collaborative development toolAI-native IDE
Claude Code integrationNative integrationVia plugin
Interface styleLightweight editorSimilar to VS Code
Multiple AI tool supportSupports Claude Code, Codex, Gemini, and moreMainly supports Claude Code
Best suited forQuickly using multiple AI toolsA full IDE development environment

Who Should Use It?#

Developers Who Are a Good Fit for Z Code#

  1. Beginners: Developers who are not familiar with the command line
  2. Rapid prototypers: Developers who need to quickly generate and test code
  3. Multi-AI-tool users: Developers who need to use multiple AI programming tools
  4. Lightweight use cases: Developers who do not need full IDE functionality

Developers Who Are a Good Fit for Trae#

  1. VS Code users: Developers who are used to VS Code
  2. Full IDE requirements: Developers who need a complete development environment
  3. Deep integration needs: Developers who need integration with the existing VS Code plugin ecosystem
  4. Long-term project development: Developers who need a stable, mature development environment

FAQ#

Q: Is Z Code free?

A: Z Code is currently in Alpha testing and can be used for free. A paid version may be introduced in the future.

Q: Do I need to pay to use Claude Code in Z Code?

A: Z Code itself is free, but using Claude Code requires an Anthropic API Key, which you need to purchase from Anthropic.

Q: Which programming languages does Z Code support?

A: Z Code itself is an editor and supports multiple programming languages. Claude Code can handle code in almost all mainstream programming languages.

Q: Can I use multiple AI tools in Z Code at the same time?

A: Yes. Z Code supports configuring and using multiple AI tools at the same time, and you can quickly switch between them.

Q: How stable is Z Code?

A: Because Z Code is currently in Alpha testing, some instability may occur. Save your code regularly while using it.

Q: Can Z Code replace Trae?

A: It depends on your needs. If you only need to use AI programming tools, Z Code is a good option. If you need a complete IDE environment, Trae may be a better fit.

Summary#

Z Code is an emerging AI collaborative development tool. By providing a visual interface, it greatly lowers the barrier to using AI programming tools such as Claude Code. For beginners or developers who need to quickly use multiple AI tools, Z Code is well worth trying.

Whether you choose Z Code or Trae mainly depends on your personal needs and development habits. If you are comfortable with the command line or need a full IDE environment, Trae may be a better fit. If you want a simple, intuitive interface for using AI programming tools, Z Code is a great choice.

In the next chapter, we’ll take a closer look at how to have effective conversations with Claude Code so that AI can better help you complete programming tasks.


Start Integrating Crazyrouter#

If you’re ready to connect Claude Code, Chinese models, or your own application to Crazyrouter through a unified setup, follow this sequence:

  1. Go to the Crazyrouter console, create a dedicated API Token, and manage permissions separately by project or team.
  2. Use the root domain for Claude Code: https://cn.crazyrouter.com; use https://cn.crazyrouter.com/v1 for OpenAI-compatible SDKs.
  3. When you need to automatically check the environment or quickly write configuration, use the Crazyrouter Claude Code One-Click Configuration Script.
  4. If debugging fails, check the console logs first, then verify the API Endpoint guide. Pay special attention to whether an extra /v1 was added to the Base URL. When you need to evaluate model costs or choose a different model, check the Crazyrouter pricing and models page first, then add your frequently used models to the Token whitelist.

Implementation Guides

Related Posts

18|Claude Code on Crazyrouter, Series 18: In the AI Era, If You Can Speak, You Can CodeClaude Code

18|Claude Code on Crazyrouter, Series 18: In the AI Era, If You Can Speak, You Can Code

18|Claude Code on Crazyrouter, Series 18: In the AI era, if you can speak, you can code. This article covers Claude Code's unified integration with Crazyrouter, configuration checks, and hands-on workflows, helping readers follow the site documentation to build a reusable development workflow.

Jun 10
11|Claude Code with Crazyrouter Series 11: Chapter 8: Prompt Optimization TipsClaude Code

11|Claude Code with Crazyrouter Series 11: Chapter 8: Prompt Optimization Tips

11|Claude Code with Crazyrouter Series 11: Chapter 8: Prompt Optimization Tips. This article covers unified integration, configuration checks, and practical workflows for Claude Code and Crazyrouter, helping readers follow the site documentation to build reusable development workflows.

Jun 10
07|Claude Code with Crazyrouter Series 07: Chapter 4: Text Processing and CreationClaude Code

07|Claude Code with Crazyrouter Series 07: Chapter 4: Text Processing and Creation

07|Claude Code with Crazyrouter Series 07: Chapter 4: Text Processing and Creation. This article covers unified integration, configuration checks, and hands-on workflows for Claude Code and Crazyrouter, helping readers build a reusable development workflow by following the site documentation.

Jun 10
06 | Claude Code with Crazyrouter Series 06: Chapter 3: Getting Started with Basic OperationsClaude Code

06 | Claude Code with Crazyrouter Series 06: Chapter 3: Getting Started with Basic Operations

06 | Claude Code with Crazyrouter Series 06: Chapter 3: Getting Started with Basic Operations. This article covers unified integration, configuration checks, and hands-on workflows for Claude Code and Crazyrouter, helping readers follow the site documentation to build reusable development workflows.

Jun 10
05|Use Crazyrouter to Access Chinese Models in Claude CodeClaude Code

05|Use Crazyrouter to Access Chinese Models in Claude Code

05|Use Crazyrouter to access Chinese models in Claude Code. This article walks through unified integration, configuration checks, and a hands-on workflow for Claude Code and Crazyrouter, helping you build a reusable development workflow based on the site documentation.

Jun 10
03|Enterprise-Grade Claude Code Integration with Crazyrouter in PracticeClaude Code

03|Enterprise-Grade Claude Code Integration with Crazyrouter in Practice

03|Enterprise-Grade Claude Code Integration with Crazyrouter in Practice. This article walks through unified access, configuration checks, and hands-on workflows for Claude Code and Crazyrouter, helping readers follow the documentation to build reusable development workflows.

Jun 10