Abstract
Claude Code is an agent-native AI coding CLI tool developed by Anthropic, enabling natural language driven development workflows: it can read local monorepo source code, edit multi-file projects, execute shell build commands, and integrate seamlessly with mainstream IDEs and third-party large language models. This complete beginner guide covers Node.js environment prerequisites, global CLI installation verification, custom config setup to connect domestic LLMs (taking DeepSeek V4 as a practical example), terminal session startup, and a full hands-on Vue Snake game development demo to validate end-to-end agent capabilities. Teams managing multi-model LLM workloads can streamline unified credential routing and cross-model access via an API gateway like 4sapi to simplify mixed domestic & foreign model deployment.
1. Core Overview of Claude Code
Claude Code functions as a fully autonomous AI coding agent exposed via command line, built to eliminate repetitive manual engineering work. Its core functional capabilities include:
- Natural language task parsing for full-stack development requirements
- Recursive repository scanning & full context retention of local source files
- Multi-file targeted creation, refactoring and bug remediation
- Native shell / npm build command execution with interactive permission approval
- Open-compatible API routing to support third-party alternative LLMs beyond native Claude series models
- Native compatibility with Windows PowerShell, CMD, macOS Terminal and Linux bash environments
Unlike lightweight inline IDE code completion plugins, Claude Code operates as an independent terminal agent that can plan, implement, test and document complete projects without constant human snippet guidance.
2. Step-by-Step Global Installation & Validation
2.1 Prerequisite Environment
Node.js runtime version 18.0 or higher is mandatory for full compatibility with Claude Code’s CLI dependency tree. Older Node releases will trigger syntax and module resolution failures during installation.
2.2 Global NPM Install Command
Execute the following command inside any terminal to deploy the official global package:
This installs the claude binary globally to your system PATH, making the command accessible from any project directory.
2.3 Post-Install Version Verification
Run the version check command to confirm successful deployment:
A valid successful output example (captured on Windows CMD):
If the system returns a "command not found" error, verify your npm global binary directory is registered inside system environment PATH variables.
3. Integrate Domestic Open-Source LLMs into Claude Code
3.1 Business Rationale for Third-Party Model Routing
Claude Code ships with native support for Anthropic’s proprietary Claude models, yet two core limitations push developers to adopt domestic alternatives:
- Cross-border network latency and access instability when calling overseas model endpoints
- Significantly higher per-token inference pricing compared to local Chinese LLMs
This tutorial uses DeepSeek V4 as a representative domestic model integration case, fully compatible with the official Anthropic API request schema that Claude Code relies on.
3.2 Step 1: Retrieve DeepSeek API Key
Register and generate a private API credential on DeepSeek’s official developer platform:
platform.deepseek.com
Store the key securely; avoid hardcoding or committing it to public Git repositories.
3.3 Step 2: Locate the Global Configuration File
Claude Code stores custom model routing settings inside a hidden .claude folder in your user root directory:
- Windows absolute path:
C:\Users\[YourUsername]\.claude\settings.json - macOS / Linux path:
~/.claude/settings.json
If the settings.json file does not exist, manually create it inside the .claude directory.
3.4 Full JSON Configuration Template for DeepSeek V4
3.5 Configuration Parameter Breakdown
| Config Key | Detailed Explanation |
|---|---|
| ANTHROPIC_AUTH_TOKEN | Your private DeepSeek API key; replace the placeholder value with your own credential |
| ANTHROPIC_BASE_URL | Third-party model’s Anthropic-compatible API gateway endpoint (DeepSeek official URL shown above) |
| ANTHROPIC_MODEL | Target model variant to invoke: deepseek-v4-flash (low-cost fast inference) or deepseek-v4-pro (higher reasoning precision, slower speed & higher cost) |
| CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC | Set value to "1" to turn off non-critical background network requests: usage telemetry, auto-update version checks and anonymous diagnostic reporting |
4. Launch a Persistent Claude Code Agent Session
All terminal workflows below are validated on Windows PowerShell / CMD; identical logic applies to Unix-based terminals.
- Navigate into your target project’s root directory via
cd:
- Run the core entry command to initialize a persistent agent dialogue session:
After launch, the terminal header will display two critical runtime details:
- Installed local Claude Code CLI version
- Currently bound third-party LLM (DeepSeek V4 Flash in this demo)
The session retains full repository context across multiple natural language prompts until you manually exit the terminal process.
5. End-to-End Practical Demo: Build a Complete Vue Snake Game
This real-world test case validates Claude Code’s full-stack autonomous development pipeline, from requirement parsing to runnable deployed web assets with built-in documentation.
5.1 Submit Natural Language Task Prompt
Inside the active claude session, input the plain-text development requirement:
The agent will automatically scan the local directory, validate Node/npm environment versions, and prompt for shell command execution permission.
5.2 Interactive Shell Permission Workflow
When the agent needs to run npm / node diagnostic scripts, it triggers an interactive approval prompt with three options:
- Yes, proceed once
- Yes, and auto-approve identical commands in future sessions
- No, reject this command execution
Select option 2 to skip repeated permission popups for the remainder of the project build process. The agent will sequentially execute dependency installation, project scaffolding and dev server startup scripts without further manual input.
5.3 Auto-Generated Project Deliverables
Once the task completes, Claude Code outputs a structured Markdown project summary document containing:
- Full absolute local file path of the generated Vue game project
- Step-by-step startup commands to launch the dev server
- Live preview address (
http://localhost:5173) - Complete feature specification table for the Snake game
- Full keyboard & touchscreen operation control guide
Core Game Feature List Generated Automatically
- 60fps smooth Canvas rendering with gradient snake body & glowing head visual effects
- Full keyboard directional control + spacebar pause/resume hotkey
- Touchscreen swipe support for mobile & tablet devices
- Persistent local storage high score tracking
- Progressive speed increment as food items are collected
- Gradient color shifting snake segments
- Dark theme UI with green snake & red food visual styling
- One-click pause overlay during active gameplay
5.4 Run the Finished Project
Follow the generated shell instructions to navigate into the game directory and launch the Vite dev server; the browser preview renders a fully functional, polished Snake game matching all requested requirements with zero manual code edits required by the developer.
6. Conclusion
Claude Code delivers a substantial boost to individual and team development efficiency by shifting repetitive scaffolding, refactoring and testing work to autonomous terminal agents. The flexible settings.json routing system unlocks cost-effective domestic LLM integration such as DeepSeek V4, eliminating overseas network barriers and excessive inference pricing for daily enterprise workloads. The Vue Snake game demo demonstrates the tool’s complete end-to-end capability: requirement parsing, environment validation, multi-file code generation, shell execution and automated documentation delivery in a single uninterrupted agent session.
This guide only covers foundational installation and basic project generation workflows; advanced functionality including multi-agent orchestration, custom Skill rule files and monorepo batch refactoring will be covered in follow-up technical tutorials. For enterprise teams running mixed domestic and international LLM fleets, centralized traffic management via platforms such as 4sapi unifies API key administration and consumption tracking to simplify large-scale Claude Code deployment across distributed developer workstations.




