Module 07 · AI Coding

The AI Coding Stack
From Copilot to autonomous coding agents

2024-2026 is the three-year window in which AI Coding truly exploded: from GitHub Copilot's $300M ARR, to Devin reshaping the concept of "software engineer", to ByteDance's 92% of engineers using Trae daily. This chapter covers code LLMs, IDE integrations, CLI agents, autonomous agents, code review, and 12 real enterprise case studies.

1. The AI Coding landscape and mental model

Over the past three years, AI coding tools have leapfrogged several generations. Understanding this main line clarifies every product's positioning:

  1. 2021-2023: the Copilot era — GitHub Copilot turned "code completion" into a default. Microsoft internal research showed that developers using Copilot completed 26.08% more pull requests; GitHub's official report: 88% of users felt more productive.
  2. 2024: the IDE-native AI era — Cursor, Windsurf, and Cody upgraded AI from a plugin to a first-class IDE citizen, introducing "full-codebase context", "multi-file editing", and "Agent mode". Cursor's ARR hit $65M in November 2024, +6,400% YoY.
  3. Late 2024 - 2025: the autonomous Agent era — Devin was the first to autonomously solve 13.86% of real GitHub issues on SWE-Bench (zero human prompts); Claude Code and Codex CLI made the "terminal AI engineer" a thing; Sonnet 4.5 pushed autonomous coding duration from 7 hours to 30 hours.
  4. 2025-2026: Chinese explosion + platformization — Qwen3-Coder-480B tops the open-source rankings; Trae reaches 92% adoption at ByteDance with over 43% AI code contribution; OpenHands, Cline and other open-source projects pass 60k stars.
A pragmatic definition: AI Coding is the entire practice of using large language models, Agent frameworks, and IDE integrations to assist with or autonomously complete software engineering tasks. It has three layers: CompletionChatAgent. Each layer shifts the developer from "typing" to "deciding".

1.1 The AI Coding product matrix at a glance

Top 12 AI Coding Tools — Side by Side

Showing 12 of 12 rows

GitHub Copilot, Cursor, Claude Code, Cline, Codeium, Trae and more: vendor, pricing, IDE integration and core features at a glance. Search, sort by column, multi-select filter.

支持语言IDE 集成核心特性链接
GitHub CopilotGitHub / Microsoft$10/月,Business $19全主流 (40+)VS CodeJetBrainsVisual Studio行内补全ChatAgent 模式PR 审查
CursorAnyspherePro $20/月,Business $40全主流独立 IDEVS Code 兼容Composer 2.5多文件编辑多 Agent代码库索引
Cline开源 (Cline Bot)免费 + 自带 API Key全主流VS Code终端 AgentMCP 集成开源浏览器自动化
CodeiumCodeium个人免费,Teams $15/月70+ 主流语言VS CodeJetBrainsVim/Neovim补全Chat搜索免费个人版
TabnineTabnineDev $9/月,Enterprise $3930+ 主流语言VS CodeJetBrainsEclipse本地模型隐私优先企业部署代码补全
Amazon CodeWhispererAWS个人免费,Pro $19/月15+ (含 AWS SDK 强)VS CodeJetBrainsCloud9AWS 优化安全扫描免费个人引用追踪
通义灵码阿里云个人免费,企业版 ¥39/人/月30+ (中文强)VS CodeJetBrainsVisual Studio中文支持行内补全单元测试安全补全
CodeGeeX智谱 AI / 清华开源 + 商业20+ 中英双语VS CodeJetBrains开源多语言AskCodeGeeX代码翻译
TRAE (字节)字节跳动免费 + 订阅全主流独立 IDEVS Code 兼容SOLO 模式字节内部 92%多 Agent中文优先
Cody (Sourcegraph)SourcegraphFree / Pro $9 / Enterprise全主流VS CodeJetBrainsVisual Studio代码库上下文企业级RAG代码搜索
ContinueContinue.dev开源 + 自带 Key全主流VS CodeJetBrains开源本地模型MCP 支持可扩展
Roo Code (Roo-Cline)Roo免费 + 自带 Key全主流VS CodeCline 分支多模式MCP浏览器自动化

1.2 Industry penetration (2024-2026)

2. Coding LLMs

The model is the "engine" of AI Coding. 2024-2026 saw coding models iterate much faster than general LLMs, driven mainly by the rapid rise of dedicated benchmarks: SWE-Bench, HumanEval, LiveCodeBench.

2.1 Closed-source flagship coding models

ModelVendorReleaseSWE-Bench VerifiedAutonomy lengthInput/output price ($/M tok)Positioning
GPT-5-CodexOpenAI2025-0974.5%7+ hours per taskIncluded in ChatGPT subscriptionAgent coding specialist
GPT-5.2-CodexOpenAI2025-12SWE-Bench Pro 56.4% / Terminal-Bench 64%Long-running tasks, context compressionAPI (Responses API)Long-horizon refactors & migrations
Claude Sonnet 4.5Anthropic2025-09-2977.2% (single) / 82% (parallel inference)30+ hours, 11,000 lines of code3 / 15Strongest coding + agent combo
Claude Opus 4.1 / 4.5Anthropic2025-08 / 2025-1274.5% / production SOTAStronger multi-step reasoning than Sonnet15 / 75Enterprise flagship
Gemini 2.5 Pro / 3 ProGoogle2025SWE-bench ~75%1M token context2 / 12 (2.5 Pro)Ultra-long context pick
Cursor Composer 2.5Anysphere2026-05SWE-Bench Multilingual 79.8% / CursorBench 63.2%30s response time0.5 / 2.5 (standard)Fine-tuned from Kimi K2.5, the price-performance king

GPT-5-Codex milestones: 74.5% on SWE-bench Verified (500 prompts), beating GPT-5's 72.8%; internal "refactor task" accuracy jumped from 33.9% to 51.3%; autonomously works 7+ hours, iterating implementation, fixing tests, and submitting PRs. Most importantly, it supports "dynamic thinking" — after 5 minutes it can add 1 more hour of investment, rather than locking compute at task start. OpenAI internal: 40% of coding traffic was on it within 2.5 hours.

Claude Sonnet 4.5 — the 30-hour myth: 77.2% on SWE-bench Verified single-model, 82% with parallel inference; 61.4% on OSWorld (real computer tasks), setting a new industry record; in testing it independently generated 11,000 lines of code for a Slack-style chat app, running 30+ hours without losing focus. Combined with the Claude Agent SDK (formerly Claude Code SDK) + context editing + memory tools, an Agent can execute multi-day complex tasks in a 200K context. Pricing holds at $3/$15 (jumps to $6/$22.5 above 200K tokens).

Cursor Composer 2.5 is the 2026 dark horse: fine-tuned from Moonshot's Kimi K2.5, the standard version is only $0.50/$2.50 per M tokens, the Fast version is $3/$15. SWE-Bench Multilingual 79.8% puts it in the same tier as Claude Opus 4.7 and GPT-5.5, but at ~1/10 the per-task cost. 63.2% on CursorBench v3.1 — Cursor's own internal benchmark that's closer to real-world dev. Cursor 2.0 also moved to a multi-Agent collaborative interface, supporting multiple Agents working in parallel via git worktrees.

2.2 Open-source / open-weight coding models

ModelTotal / active paramsContextHighlights
Qwen3-Coder-480B-A35B480B / 35B (MoE)256K native, 1M via YaRN7.5T training tokens (70% code), SWE-Bench matches Claude 4 Sonnet
Qwen3-Coder-Next80B / 3B (MoE, 96% sparse)256K → 1M4-bit quant needs only 46GB RAM, SWE-Bench Pro 44.3%, close to Sonnet 4.5
Qwen2.5-Coder-32B-Instruct32B Dense128KOpen-source flagship coder, strong HumanEval, supports 92 languages
DeepSeek-Coder V2/V3236B / 21B (V2.5) / 671B / 37B (V3 MoE)128KCode + general purpose both strong, FP8 training, very low cost
Code Llama 70B70B100KFrom Meta, long-context coding
Codestral 25.0122B32K+Mistral, strong Fill-in-the-Middle
StarCoder2 15B15B16KBigCode coalition, trained on the full GitHub commit corpus
CodeGeeX49B128KTsinghua Zhipu, strong bilingual, local-friendly
Yi-Coder9B / 1.5B128K01.AI, the small-size benchmark
Code Llama 70B Python70B100KPython-specialized fine-tune

Qwen3-Coder-480B is the open-source coding-model phenomenon of 2025: 7.5T training tokens (code 70%), native 256K / YaRN-extended 1M context; SOTA on the three Agentic Coding, Agentic Browser-Use, and Foundational Coding Tasks leaderboards. SWE-Bench matches Claude 4 Sonnet; Apache 2.0; fully commercial. Hugging Face CEO Clement Delangue posted 12 tweets in a single day endorsing it as "the best programming model". Together with the also-open-sourced Qwen Code CLI (a Gemini-CLI fork), it integrates with the Claude Code protocol — making it the top pick for on-prem deployments.

Qwen3-Coder-Next lowers the hardware bar further: 80B total / 3B active (96% sparsity) MoE; 4-bit quantization needs only 46GB of RAM; on a single RTX 4090 (24GB) + 128GB RAM box, SOTA coding quality that was unimaginable in the 7B era is now possible on a consumer GPU.

2.3 Key benchmarks (mainstream models, 2025-2026)

BenchmarkWhat it measuresQuestionsCurrent SOTA (2026 Q2)
SWE-bench VerifiedReal GitHub-issue fix500Claude Sonnet 4.5 82% (parallel) / GPT-5.2-Codex 56.4%
SWE-bench ProHarder industrial issues~1500GPT-5.5 58.6% / Claude Opus 4.7 64.3% (both acknowledged memorization concerns)
Terminal-Bench 2.0Terminal command execution~100GPT-5.5 82.7% / Claude Opus 4.7 69.4%
HumanEvalFunction-level code generation164Claude Sonnet 4.5 94%
LiveCodeBenchCompetition-level real-time problemsDynamicGPT-5 family leads
OSWorldReal computer GUI ops~369Claude Sonnet 4.5 61.4% / GPT-5.3-Codex 64.7%

3. IDE integrations (AI in IDE)

IDE integration is the layer the user feels most directly. The 2024-2026 core trend: "AI from plugin to first-class IDE citizen". VS Code-based is still the absolute mainstream; Cursor / Windsurf / Trae push "full-codebase indexing" to the limit.

3.1 VS Code-based AI editors

ProductGitHub starsUsers / installsPricingCore capabilityAgent mode
GitHub Copilot45M+Free / Pro $10 / Pro+ $39 / Business $19 / Enterprise $39Industry standard, deep GitHub integration, 3rd-party Agent support (Claude Code, Codex)Built-in Agent Mode, PR Review
Cursor1M+ DAUFree / Pro $20 / Pro+ $60 / Ultra $200 / Teams $40/activeVS Code fork, Composer 2.5 (in-house model), multi-Agent parallel, Background Agent, BugbotComposer, Background Agent, Slack integration
Windsurf (Cascade)2.91MFree (25 credits) / Pro $15 / Teams customTerminal-editor-Agent in one, AI Flow paradigm, full MCP supportCascade plan-execute-rollback
Cody (Sourcegraph)2.8kFree / Pro $9 / Enterprise $19Deep codebase search + full context, enterprise code intelligenceAgent mode
Continue.dev28.6k1.36MSolo free / Team $10/dev·mo / Models Add-on +$20Open-source and customizable, plug any LLM, custom prompt blocksAgent mode
Tabby ML21.9kFully self-hosted freeSelf-hosted open-source Copilot alternative, 8GB GPU minimum, supports local models
PearAIFree + ProContinue fork, focus on simplicity
CodeiumFree / Teams $15Standalone plugin, strong free tier, 70+ languagesCascade mode
JetBrains AI Assistant / JunieAI Free / Pro $10 / Ultimate $20Deep IntelliJ integration, Junie is JetBrains' in-house AgentJunie async mode

3.2 Chinese IDE integrations

3.3 Browser IDE / low-code Vibe Coding

4. CLI agents

CLI Agents are the hottest track of 2025 — turning the "terminal" into the main interface where the Agent collaborates with developers. Great for Git workflows, CI/CD, and remote servers.

4.1 OpenAI Codex CLI

First released April 2025; re-architected when GPT-5-Codex landed in September. Fully open-source (GitHub 36.7k+ stars), supports the GPT-5-Codex backend, multi-modal (paste screenshots / wireframes), MCP, to-do list self-tracking, and 3 approval modes (read-only / auto / full access). Requires a ChatGPT Plus/Pro/Business/Edu/Enterprise subscription. The Codex CLI design philosophy: treat "AI engineer" as a long-term collaborator. Sandboxed security + multi-modal input + full toolchain are the core differentiators.

4.2 Anthropic Claude Code

GitHub 31.6k+ stars. Based on the Claude 4 family (Sonnet 4.5, Opus 4.5), accessed through the Claude Agent SDK (formerly Claude Code SDK). Core capabilities: whole-repo code indexing, sub-Agent delegation, permission system, checkpoint rollback, context editing, memory tools, VS Code extension + GitHub Actions integration. Pricing: Free / Pro $20 / Max 5× $100 / Max 20× $200 (per 5-hour interaction window), or pay-as-you-go API: Sonnet 4 $3/$15, Opus 4 $15/$75. Claude Code's strength is "controllable end-to-end tasks" — the full loop from requirement to PR.

4.3 Aider

GitHub 45.8k+ stars (mid-2024: 30k+; September 2025: 45k), Apache-2.0. The open-source CLI led by Paul Gauthier, works directly in your local Git repo, supports GPT-4o, Claude 3.5/3.7/4 Sonnet/Opus, DeepSeek V3/R1, Gemini 2.5 Pro — basically every major LLM. tree-sitter-based dependency-aware smart file selection; the RepoMap algorithm prioritizes files containing referenced identifiers. Features: multi-file editing, auto Git commits (with proper commit messages), auto linter, voice mode, architect mode (a stronger model plans, a cheaper model edits). Typical use: aider --model claude-sonnet-4-5 file1.py file2.py. Aider shines on "long context + large projects" — long-standing SOTA among open-source tools on SWE-Bench.

4.4 Cline (formerly Claude Dev)

GitHub 49.8k+ stars (mid-2024: 30k+), 1.97M+ installs, Apache-2.0. A VS Code AI Agent plugin. First scans the project AST, generates an execution plan, then calls the LLM to autonomously create/modify files, run commands, take screenshots, test; MCP protocol supports external systems (DB, API, browser). All actions require human confirmation. Supports OpenRouter, Anthropic, OpenAI, Gemini, AWS Bedrock, Ollama. Cline's strength is "the Devin-like experience inside VS Code" — free + bring your own API key.

4.5 OpenHands (formerly OpenDevin)

GitHub 64k+ stars (mid-2024: 40k+), MIT license. All-Hands AI's open-source platform. Full GUI integration of a VS Code-style editor, terminal, and browser; supports multi-Agent collaboration, 100+ LLM routing, remote sandbox execution, native MCP integration. On SWE-Bench Verified with Claude Sonnet 4.5 + extended thinking, 72% solve rate; with Qwen3 Coder 480B, 41.21%. In 2025 it released the Software Agent SDK, upgrading from a V0 monolith to a V1 modular design (SDK / Tools / Workspace / Agent Server). OpenHands is the closest open-source AI software engineer to "fully formed".

4.6 Other notable CLI Agents

5. Autonomous coding agents

Autonomous Agents are the "holy grail" of AI Coding — can AI complete the entire task from requirement understanding to deployment? 2024-2026 has been astonishing.

5.1 Devin (Cognition AI)

Burst onto the scene in March 2024 — the first commercial autonomous AI software engineer. The 10-person founding team has IOI gold medals each. 13.86% of real GitHub issues solved independently on SWE-Bench (zero human prompts; GPT-4 was 1.74% at the time). Opened in December 2024 at $500/mo. In 2025 Devin 2.0 was released: price dropped to $20/mo (2.25/agent compute unit), added parallel Devins, interactive cloud IDE, interactive planning. In July 2025 Cognition acquired Windsurf for $220M, gaining 350+ enterprise customers and $82M ARR. In August 2025 it raised $495M at a $9.8B valuation (145% growth in 6 months). Internally at Cognition: Devin now handles 89% of code submissions, mostly "maintenance tasks developers don't want to do".

5.2 SWE-Agent (Princeton)

Princeton's open-source research project, GPT-4 + custom Agent-Computer Interface (ACI). First open-source tool to break 12% on SWE-Bench, validating that "an interface designed for LLMs" is the key to Agent capability. The de-facto baseline in academia.

5.3 OpenHands / OpenDevin

See §4.5. In November 2024 it became the first open-source Agent to break 50% on SWE-Bench. In the past month, OpenHands' contribution to its own codebase exceeded that of all human engineers. In 2025 it released the Software Agent SDK, with major production-grade improvements.

5.4 Chinese Devin-likes

5.5 Multi-Agent collaboration frameworks

5.6 Autonomous Agent scorecard (2025 Q4 snapshot)

ProductAutonomy (0-10)SWE-Bench VerifiedPer-task cost (USD)End-to-end deliveryRequires API key
Devin 2.09~65% (undisclosed)2-20YesNo (subscription)
OpenHands + Claude Sonnet 4.5872%0.5-5 (depends on LLM)YesYes
Cognition Devin Fusion8Hybrid models, 35% cheaperYesNo
SWE-Agent + GPT-4712-23%0.2-1PartialYes
Trae SOLO (ByteDance)8Free (base model)PartialNo (built-in models)
Qoder 1.08Credit-basedYesPartial
Codex CLI + GPT-5-Codex7~50% (cloud sandbox)0.5-5PartialYes
MetaGPT60.5-2YesYes

6. Code completion and snippets

Completion is the "entry-level" form of AI Coding — but 2024-2026 it has kept evolving on enterprise-grade, on-prem, and multi-model routing.

ProductVendorPricingKey differentiator
GitHub CopilotGitHub / MicrosoftFree / Pro $10 / Business $19 / Enterprise $3945M users, deepest ecosystem, supports Claude / GPT / Gemini, Agent Mode
TabnineTabnineDev $9 / Pro $39 / Enterprise customEnterprise-grade, on-prem deployment, strongest privacy protection
Codeium / WindsurfCodeiumFree / Pro $15 / Teams customStrong free tier, 70+ languages, Windsurf is their IDE product
CodeWhisperer → Amazon Q DeveloperAWSFree / Pro $19 / Enterprise $39Deep AWS ecosystem integration, security scanning
Tongyi Lingma / Qoder CNAlibaba CloudPersonal basic free / Pro limited-time free / Enterprise standard ¥59-99Chinese free, Qwen2.5-Coder / Qwen3-Coder, on-prem enterprise deployment
Wenxin Kuaima (ERNIE Code)BaiduFree / Enterprise customWenxin model, PaddlePaddle ecosystem
CodeGeeX pluginTsinghua ZhipuFreeCodeGeeX4 open-source, 128K context, bilingual
iFlyCodeiFlytekFree / Enterprise customChinese voice interaction, Spark model
Cursor TabAnysphereCursor Pro $20+Full-codebase awareness, the most accurate cross-file prediction

7. Code review and quality (AI Code Review)

Code review is "the last moat of software engineering". AI tools are cutting review time from 2-3 hours to 20-30 minutes.

7.1 Mainstream AI Code Review tools

ProductFormPricingKey metrics
CodeRabbitSaaSPro $24/dev·mo2M+ repos, 75M defects, line-level comments, PR walkthrough, natural-language config
GreptileSaaS / self-hosted$30/dev·mo (50 credits/seat)PR time from 20h → 1.8h (11×), builds a codebase graph, Brex / Mintlify / WorkOS customers, can self-host on AWS
PR-Agent / QodoOpen-source AGPL-3.0 + commercialOpen-source free / Pro paidCross-platform GitHub / GitLab / Bitbucket / Azure DevOps, 30s response, 100k+ users, multi-LLM
EllipsisSaaSContact for pricingYC W24, near-human judgment, adaptive learning
BitoSaaS$15/user·moMerge speed +89%, regression defects -34%, local vector database
SourcerySaaSPro $10/dev·moInstant PR review + cross-repo continuous scan, SOC 2, BYOK
Snyk CodeSaaSTeam $25/mo+SAST security specialty, 80%+ accuracy, auto-fix suggestions
CodeAnt AISaaSContact for pricingSequence-diagram visualization of cross-service changes, severity grading, KukuFM case study: review time -80%
GitHub Copilot Code ReviewIntegratedIncluded in CopilotZero-friction, concise comments, high PR summary quality, weaker multi-file reasoning
LinearB / EllipsisPlatformEnterpriseIncludes DORA metrics, change lead time, PR throughput analytics

7.2 Selection framework

8. Real-world case studies

Cases are more persuasive than feature lists. The 8 cases below are real data from public reports.

Case 1: ByteDance Trae — 92% internal penetration + 100B lines of code

December 2025: ByteDance's Trae CN Enterprise data:

Takeaway: the trinity of "AI-native IDE + in-house LLM + 92% internal usage" made Trae the benchmark of Chinese AI Coding in 2025.

Case 2: Alibaba Tongyi Lingma — badge AI001, 1.5B lines of code

April 2024: Alibaba Cloud made internal AI Coding mandatory, giving Tongyi Lingma the official employee badge "AI001". An Alibaba Cloud executive disclosed: "20% of the company's future code will be written by Tongyi Lingma."

Case 3: Microsoft GitHub Copilot — 23,000 engineers, 30%+ code AI-generated

At Build 2024 Microsoft disclosed: 23,000 Microsoft engineers (almost the whole company) use GitHub Copilot daily; per the CEO's internal report, "over 30% of new code is AI-generated". Data came from three RCTs run by Microsoft, MIT, Princeton, and Wharton, covering ~5,000 developers:

Case 4: Google Duet AI — 25%+ new code AI-generated

October 2024 Google earnings call, CEO Sundar Pichai disclosed: "over 25% of Google's new code is AI-generated, then reviewed and accepted by engineers." Google's internal AI tool Duet AI (later integrated into Gemini) is deeply embedded in Workspace and dev workflows — the benchmark for "hyperscale internet company AI Coding transformation".

Case 5: Goldman Sachs rolls out Devin — thousands of seats for enterprise Agents

Per Cognition AI's disclosure, Goldman Sachs partnered with Cognition to deploy thousands of Devin seats for internal software engineering and financial data processing. In Goldman's internal tests, Devin handles "tedious maintenance tasks" that traditional engineers don't want to do: legacy-system migration, application upgrades, report automation. Cognition CEO Scott Wu: "We never intended to replace humans. AI is the engineer's partner, letting one person do what previously took 5."

Case 6: Cognition AI's commercialization — 0 → $82M ARR

Cognition AI's funding history is a venture-capital fairy tale:

Devin internal stats: 89% of code submissions are done by Devin, mostly "maintenance, migration, upgrade" tasks that engineers don't want to do.

Case 7: StackBlitz Bolt.new — 8 weeks from 0 to $20M ARR

October 2024 Bolt.new launched. Using WebContainers to run Node.js in the browser, "Vibe Coding" became reality. Within 8 weeks:

Case 8: 6 real-world demo scenarios

  1. Figma → React component: v0 / Bolt turns a design into an interactive React component (Tailwind + shadcn/ui) in 5-10 minutes from a screenshot.
  2. Understanding a legacy project: with Claude Code / Cursor @Codebase, ask the old project "who calls this function / why is it designed this way / is there a similar implementation" — understanding cost down 10×.
  3. Automated PR fix: Greptile emits line-level comments when a PR opens; trigger Claude Code to auto-apply; humans only do accept/reject. Brex cut PR merge time from 20h to 1.8h with this flow.
  4. End-to-end bug fix: Devin autonomously takes a GitHub Issue → reproduces → writes fix → runs tests → opens PR; engineers only review at the end. Devin solved 13.86% of real issues independently on SWE-Bench.
  5. Large-scale refactor: Aider + Claude Sonnet 4.5 renames/moves/abstracts across 200+ files, auto Git commit + test. GitHub Copilot's internal team uses a similar flow for daily refactors.
  6. Database migration: Claude Code executes multi-step: analyze schema → generate migration → dry-run → backup → real run → verify — all in a sandboxed, rollback-capable environment.

Case 9: failure cases and pitfalls

9. AI Coding workflow best practices

9.1 Individual developer workflow (from requirement to PR)

  1. Clarify the requirement — turn "I want a login feature" into "GitHub OAuth login + JWT token + 7-day expiration" — reduces the cost of AI guessing wrong.
  2. Cursor Composer draft — use Composer mode 1 to quickly scaffold. Pick Claude Sonnet 4.5 / GPT-5-Codex.
  3. Claude Code verification — in the terminal, run tests, check git diff, confirm it follows project conventions.
  4. Aider refactor — for large-scale changes (200+ files), use Aider in architect mode.
  5. Write tests by hand — AI-generated tests look good on coverage but often miss business edge cases; add your own edge cases.
  6. Greptile pre-review + submit PR — let the AI review once before submitting; reduces reviewer load.

9.2 Team workflow (standards and security)

9.3 Prompt tips (code-generation specific)

Beyond general prompt tips, code prompts should also note:

# Recommended template
# Role: you are a [senior Python engineer / React performance specialist]
# Context: the project uses [FastAPI + PostgreSQL + Redis]; the team follows PEP 8 / Google JS style
# Task: [optimize the query performance of this endpoint, drop latency from 800ms to under 200ms]
# Constraints:
#   - cannot change database schema
#   - must be compatible with the existing SQLAlchemy 2.0 async pattern
#   - cannot introduce new dependencies (except aiocache)
# Output: give 3 options, each labeled [implementation cost / perf gain / risk]
# Verification: list how to benchmark and verify

Key tips:

9.4 Context management strategy

The context window is the "memory" of AI Coding; how you manage it directly determines the result.

10. Learning resources and community

10.1 Official documentation

10.2 Structured courses

10.3 Industry podcasts and media

11. Suggested learning paths

Beginner developer (0-1 year experience)

  1. Install GitHub Copilot Personal (free for students) and spend 1 week getting used to in-line completion.
  2. Learn to use GitHub Copilot Chat to explain unfamiliar code.
  3. Try v0.dev to make a static page as practice.
  4. Learn the "5-piece" prompt template and build a habit of asking clearly.

Intermediate developer (1-3 years experience)

  1. Upgrade to Cursor Pro ($20), try Composer multi-file editing.
  2. Learn Claude Code or Codex CLI, run tests in local projects.
  3. Install Cline + bring your own DeepSeek / Qwen API key, experience "Devin in VS Code".
  4. String the "PR flow" together with AI tools: write code → Aider commit → Greptile pre-review → open PR.
  5. Read 1-2 Anthropic Cookbook or OpenAI Cookbook articles per month.

Advanced developer (3+ years experience)

  1. Deep-dive into the Claude Code Agent SDK or OpenHands SDK, build a custom team Agent.
  2. Research Qwen3-Coder / DeepSeek V3 quantized deployment, and string together a full offline workflow with local LLM + Continue / Tabby.
  3. Promote "AI Coding standards" in the team, build PR templates, code review checklists, and token budgets.
  4. Follow SWE-Bench / LiveCodeBench and other benchmarks, track the frontier of model capability.
  5. Write the team's internal "AI Coding case library" — accumulate best practices.

12. Common FAQ

Q1: I'm a beginner — what's the first AI Coding tool I should pick?

GitHub Copilot Personal, free for students — just install the VS Code plugin. Start with "in-line completion" + "Chat explains code". Don't jump straight to Cursor Composer or Devin.

Q2: Is Cursor $20/mo worth it?

If you are a professional developer (2+ hours of coding per day), $20 for Composer is well worth the price — under $1/day. Ultra $200/mo is only recommended for high-frequency Agent users (5+ tasks/day) or team managers.

Q3: Claude Code vs Codex CLI — how to choose?

It depends on your "model preference". Claude Code shines on "controllable end-to-end tasks"; Sonnet 4.5 is more reliable for long-horizon coding, financial analysis, and replicating research. Codex CLI shines on "dynamic thinking + sandbox safety"; GPT-5-Codex is stronger on PR review and dynamic multi-step tasks. We recommend installing both and choosing per task.

Q4: Can open-source models replace closed-source?

The 2026 answer: "yes for 80% of tasks". Qwen3-Coder-480B is on par with Claude 4 Sonnet on SWE-Bench; Composer 2.5 (based on Kimi K2.5) is in the same tier as Opus 4.7 but 10× cheaper; Qwen3-Coder-Next lets you get close-to-SOTA quality on a $4,000 box. But the remaining 20% — long-horizon tasks, complex debugging, security audits — still warrants closed-source flagships.

Q5: Will Devin replace programmers?

Short term: no. Long term: it will change what the work is. Cognition's own disclosure: Devin handles 89% of code submissions internally, but most of those are "maintenance, migration, upgrades" — repetitive. The truly creative work — designing new systems, architecture decisions, complex business modeling — still needs humans. Scott Wu: "We never intended to replace humans. AI is a partner."

Q6: Data security? Will my code be used for training?

Three tiers: (1) Personal / Enterprise accounts can disable "allow GitHub to use my code snippets to improve AI" in Settings → Copilot → Privacy; (2) Business / Enterprise tiers do not train by default; (3) Finance / healthcare should use self-hosted (Tabby / Codeium Enterprise / Greptile self-host).

Q7: I'm a small business on a tight budget. Which tools should I pick?

Totally free combo: Trae (international / Chinese version) + Tongyi Lingma (basic free) + Continue + Ollama running Qwen2.5-Coder-7B. One local, one cloud, $0/month — covers 90% of scenarios.

Q8: My team already uses Copilot — should we switch to Cursor?

Depends on team size and scenarios: < 10 people — switch to Cursor Pro, the difference is clear; 10-50 people — start with a small pilot, Cursor Teams at $40/dev·mo is not cheap; 50+ people — keep Copilot + pilot Cursor + a Chinese option (Tongyi Lingma / Wenxin Kuaima), pick a three-way combo rather than all-in.

Q9: What is Vibe Coding — is it real or hype?

Real trend. The essence: developers use natural language to express intent, AI generates / executes / iterates code, humans are the requirement-setter and reviewer. 91% of engineering teams adopted vibe coding in 2026. MIT Technology Review listed it as a "Top 10 Breakthrough Technology of 2026". It will not replace professional coding, but it will create a "1B new developers" market.

Q10: What's the next big breakthrough?

Three directions to watch:

  1. Multi-Agent collaboration — single Agent has hit its ceiling; Cursor 2.0's multi-Agent + git worktree model is the start;
  2. Continuous AI — GitHub Agentic Workflows is already in preview; Agents move from "passive responder" to "proactive maintainer";
  3. AI self-iteration — the Qwen team already uses Agents to clean training data; Cursor Composer 2.5's "function-deletion" synthetic-task training is an early practice of AI training AI. By 2027 we may see "fully self-trained" new models.

13. Chapter summary

14. Agent Skills in coding practice

After Anthropic released Agent Skills in October 2025, Skills has moved from "a small Claude feature" to a cross-platform open standard. This section focuses on coding scenarios: from code review, test generation, to refactoring, commit standards, deployment checks — Skills package high-frequency engineering moves into "software capability packs" that can be auto-triggered, letting AI engineers reuse engineering experience like function calls.

14.1 Five coding applications of Skills

  1. Code review — after loading the code-review Skill, Claude auto-reviews PRs on 4 dimensions (spec compliance / code quality / security / performance) with Critical / Important / Minor ratings, filtering comments below 80% confidence. Big PRs surface an average of 7.5+ real issues.
  2. Test generation — the test-driven-development Skill enforces the RED → GREEN → REFACTOR loop, writing failing tests before implementation, plus anti-pattern checks (don't mock behavior, don't pollute production classes for tests).
  3. Refactoring — the refactor-assistant Skill runs AI through a "spec-compliance review + code-quality review" two-stage refactor, dispatching a new sub-Agent per sub-task to isolate context.
  4. Commit standards — the git-commit-helper Skill encodes the Angular Commit / Conventional Commits templates in SKILL.md, auto-generating compliant commit messages so PR descriptions are no longer a rainbow.
  5. Deployment checks — the deployment-check Skill runs security scans, dependency audits, config-drift detection, and migration-compatibility checks before merge, keeping production incidents on the night before merge.

14.2 Production-ready coding Skills (curated)

SkillCore capabilityTypical trigger
python-code-reviewerPEP 8 / type annotations / security (SQL injection, Pickle deserialization)"Review this Python code"
test-driven-developmentRED-GREEN-REFACTOR loop + anti-pattern list"Write this feature with TDD"
git-commit-helperAuto-generate Conventional Commits format commits"Help me write a commit message"
refactor-assistantTwo-stage refactor review (spec + quality)"Refactor this module"
api-doc-generatorGenerate OpenAPI 3.1 / Markdown docs from code"Generate docs for these endpoints"
systematic-debugging4-stage root-cause analysis + defense in depth"Systematically debug this bug"
verification-before-completionGate function: must run verification before claiming "done""Verify before completing"

14.3 Loading Skills in 6 major coding Agents

ToolHow to load Skills
Claude Code/plugin marketplace add anthropics/skills + /plugin install document-skills@anthropic-agent-skills; project-level .claude/skills/<name>/SKILL.md; global ~/.claude/skills/
Codex CLI / DesktopEnable [features] skills=true in ~/.codex/config.toml; place SKILL.md under ~/.codex/skills/<name>/
CursorUse /add-plugin superpowers in Cursor Agent chat, or browse the marketplace; Skills can also be injected via the Cursor Rules panel
Cline / OpenCodeTell Cline: Fetch and follow instructions from https://raw.githubusercontent.com/obra/superpowers/...; OpenCode uses the ~/.config/opencode/skills/ directory
Trae / CodeBuddy / WorkBuddyOne-click install via the built-in SkillHub. Supports Claude Code Skills ecosystem import (CodeBuddy Code 2.0 is the first Chinese AI coding tool to introduce Skills)
Antigravity / Gemini CLIAntigravity: agy plugin install https://github.com/obra/superpowers; Gemini CLI: gemini extensions install <url>

14.4 Full SKILL.md example (YAML + Markdown, braces escaped)

---
name: python-code-reviewer
description: Trigger when the user submits Python code, requests a PR review, or mentions "code review / PEP 8 / code quality". Strictly review on 4 dimensions with actionable suggestions — avoid baseless conclusions like "looks fine".
---

# Python Code Reviewer

You are a senior Python engineer with 12 years of experience + a security auditor. When reviewing code, you must output section by section on the 4 dimensions, with every conclusion citing a specific line or code snippet.

## When to trigger
- The user asks to review / look at this code
- Before submitting a PR
- Any long file containing def / class / import

## Review dimensions (must cover all 4)

### 1. Spec compliance (0-10)
- Does it implement the user's original requirement?
- Anything missing or over-engineered?
- Edge conditions (empty input, None, very large data) — handled?

### 2. Code quality (0-10)
- Type-annotation coverage (target 100%)
- Function length (target < 50 lines)
- Cyclomatic complexity (target < 10)
- DRY: is repeated logic abstracted?
- Naming: PEP 8 compliant?

### 3. Security (0-10, Critical is instant block)
- SQL injection (must use parameterized queries)
- Pickle / eval / exec usage
- Hard-coded keys / credentials
- Unsafe deserialization

### 4. Performance (0-10)
- N+1 queries
- Unnecessary list copies
- Blocking I/O in async context
- Cache hit rate

## Output format
```
[Critical]  File:line  Description  Fix suggestion
[Important] ...
[Minor] ...
Overall score: X.X / 40
Mergeable: ✅ / ❌ (only mergeable if Critical count = 0)
```

## Anti-rationalization checklist
- "This import should be fine"  → must actually import and verify
- "I already tested it manually"  → manual testing is not a substitute for automated tests
- "Looks correct"  → must give a run-verification command

## Error handling
- User provided incomplete code → ask for the full snippet
- User only asks "is it good?" → must score on all 4 dimensions
⚠️ Key pitfall: &#123; and &#125; in JSON, when used inside Astro templates, must be written as &amp;#123; and &amp;#125;, otherwise they will be parsed as JSX expressions and the build will break. Double quotes " should also be replaced with Chinese 「」 or single quotes, to avoid HTML parser issues.

15. Desktop Coding Agent feature (2025.10 - 2026.06)

If 2024 was the "awakening" of Coding Agents, 2025-2026 is the great "desktop" explosion. From OpenAI's Codex Desktop to Anthropic's Claude Desktop + Claude Code, to Chinese WorkBuddy / QoderWork / Kimi Work / TRAE Work, vendors are pushing the AI engineer from "command line" and "IDE plugin" forms into "always-on digital employee" forms.

15.1 Codex CLI / Codex Desktop (OpenAI)

OpenAI relaunched Codex in April 2025 as a cloud coding Agent platform, and on 2026-02-02 released the macOS desktop app (Windows version in development). On 2026-04-16 it added system-level Computer Use capability. By June 2026, Codex's weekly active users surpassed 4M, growing 5× since the February desktop launch. 97.9% of OpenAI staff use Codex internally (40% in August 2025); 17.3% of external organizations use it. Knowledge workers account for 20% of Codex users, and are growing 3× faster than developers.

Key Codex Desktop features:

  • System-level background ops (Computer Use): Codex has its own cursor — it can run multiple Agents in parallel on the macOS desktop, directly clicking UI, typing, and operating legacy software with no API.
  • Skills + Plugins ecosystem: 111 Codex Plugins supporting Box, Figma, Linear, Notion, Sentry, Slack, Gmail, etc. The "Build Web App" plugin (Stripe + Supabase + Vercel) ships a one-click build & deploy.
  • Async automation: Codex can autonomously plan future work and auto-wake to execute; tasks can span days or even weeks. Many teams use it to follow up on PRs, Slack notifications, and Notion tasks.

15.2 Claude Code + Claude Desktop (Anthropic)

Claude Code, released in February 2025, became the most-used AI coding tool within 10 months — dominating large enterprise back-end projects and the open-source community. It deeply integrates the Skills + MCP system; Anthropic launched the "31 days, 31 tips" series, covering everything from TDD and sub-Agent concurrency to 30-hour long-horizon tasks. The Claude Desktop consolidates the Skills ecosystem, Projects (project knowledge base), Artifacts (visual artifacts), and MCP servers into one entry point, so both individual developers and enterprise teams can complete the full loop from requirement to deployment on the desktop.

15.3 WorkBuddy / CodeBuddy (Tencent)

Tencent Cloud's CodeBuddy team released the AI coding assistant CodeBuddy in 2025 (formerly Tencent Cloud Code Assistant); the Craft Agent upgrade came in May 2025, and CodeBuddy Code CLI 2.0 shipped in September 2025 (China's first to support plugin / IDE / CLI tri-form). On 2026-01-30, the 2.0 version's key milestone: 90% of the code in the development process was generated by CodeBuddy itself; the AI team collaborated 7×24, covering 12,000 Tencent engineers internally. CodeBuddy Code 2.0 simultaneously introduced the Skills system, supporting Subagent, Hooks, ACP protocol, and custom models, connecting GLM-4.7 / GPT-5.2 Codex and other mainstream Chinese and international models.

On 2026-03-09 Tencent officially launched WorkBuddy (the Tencent version of "小龙虾"), expanding from a coding assistant to a "full-scenario AI Agent". WorkBuddy monthly visits in March 2026 hit 8.85M (2× the #2 player), MoM growth 831%, ranking #1 in daily-active efficiency Agent tools in China. It ships with 11 Chinese LLMs (Hunyuan / DeepSeek / GLM / Kimi / MiniMax), seamlessly integrates WeChat Work / QQ / Feishu / DingTalk, and the SkillHub provides 200+ one-click install Skills, supporting multi-window, multi-Agent parallel work. WorkBuddy truly solves the "non-technical office worker uses AI to do their job" need: batch invoice processing, PPT generation, daily/weekly reports, calling data APIs, etc.

15.4 Qoder Work (Alibaba)

Alibaba extended Qoder, the coding Agent, into QoderWork (Mac + Windows), which opened to all users on 2026-03-03, positioning itself as "an AI intern, officially on the job". QoderWork's specialty is "task-delivery mode": you set a goal, it breaks it into steps, runs them, and turns the output into files. Every step stays in the task list for traceability — fundamentally different from "conversational" AI. On the model side, it defaults to Qwen 3.7 Max (free for 15 days), while supporting custom integration. QoderWork also ships with a sandbox to protect data privacy, plus built-in MCP tools + custom Skills. It went live 2026-01-30 and is the head-on competitor to WorkBuddy.

15.5 Kimi Work (Moonshot AI)

June 2026: Moonshot AI released Kimi Work, pivoting from Kimi Code (coding Agent) to target knowledge workers in finance, research, legal, and beyond. Kimi Work's killer feature is WebBridge — it can directly control your browser while keeping you logged in. It can access the WeChat Official Account admin, Tonghuashun (同花顺), Tianyancha (天眼查), World Bank and other login-required sites — a "unique skill" almost no other desktop Agent can match. On execution, Kimi Work can run up to 300 sub-Agents in parallel, execute 4,000+ tool calls continuously for 13 hours, with auto-recovery on disconnect. Underneath is the trillion-parameter Kimi K2.6 model. Mac only for now; Windows in the works.

15.6 TRAE Work / TRAE (ByteDance)

ByteDance launched China's first AI-native IDE TRAE in 2025; the 2026 upgrade is Work + IDE dual-core: Work mode (formerly SOLO mode) handles complex tasks and long-horizon development; IDE mode preserves the daily coding experience. As of June 2026 TRAE passed 6M+ registered users, with student users accounting for 32%. ByteDance internal data: 92% of engineers use TRAE daily, AI code contribution over 43%. TRAE leads the industry in Chinese requirement understanding accuracy (officially 98%), ships with Doubao-1.5-pro / DeepSeek-V3.1 / Claude 3.5 Sonnet / GPT-4o / Gemini 2.5 Pro multi-model, and the basic version is free forever.

15.7 Desktop Coding Agent comparison

ProductVendorTargetSkills supportSkills ecosystemPricingKey metrics (2026 H1)
Codex DesktopOpenAIDevelopers + knowledge workers✅ 111 built-in PluginsBox / Figma / Linear / Notion / Sentry / Slack / Gmail / Stripe / Vercel / SupabaseIncluded in ChatGPT subscription (Free / Plus $20 / Pro $100 / $200)4M WAU, 5× growth since Feb, 97.9% internal OpenAI usage
Claude DesktopAnthropicDevelopers + heavy Claude users✅ Official 16 Skills + customOfficial + community (ComposioHQ 1000+)Included in Pro $20 / MaxClaude Code #1 in usage over 10 months, Skills standard maker
WorkBuddyTencentNon-technical office workers + knowledge workers✅ SkillHub 200+11 Chinese models, OpenClaw compatibleFree 0 / 70 / 140 / 700 RMB per month8.85M monthly visits, #1 DAU in China, 12k internal engineers
CodeBuddy CodeTencentProfessional developers✅ First in China to introduce SkillsSubagent / Hooks / ACP protocolFree + EnterpriseCodeBuddy Code 2.0: 90% code self-generated
QoderWorkAlibabaOffice workers + students✅ Claude Code Skills compatibleQwen 3.7 Max + custom Skills300 free credits for new usersFull public access 2026.03, Mac + Windows
Kimi WorkMoonshot AIFinance / research / legal✅ Skills + K2.6 modelWebBridge browser control with login stateBasic free, premium subscription300 sub-Agents parallel, 13h continuous, 4,000+ tool calls
TRAE WorkByteDanceChinese developers + students✅ Skills + multi-model6M+ users, students 32%Basic version free forever92% ByteDance engineers use it, 43% AI code contribution
DuMateBaiduGeneral Agent entry point✅ Integrated SkillsBaidu Search / Miao Da / Fa Mou / BaikeFree + paid tiersTopped two Agent rankings in 2026.05, 7×24 cloud monitoring

15.8 Real enterprise deployment data

  • Tencent internal: CodeBuddy Code 2.0 covers 12,000 engineers; 90% of newly-added code post-launch is AI-self-generated; 7×24 AI collaboration; 4 engineers + 58 days = 79 versions iterated.
  • ByteDance: Trae used by 92% of engineers daily, 43% AI code contribution, 6M+ registered users (2026.6).
  • Microsoft: 23,000 engineers, 30%+ daily use Copilot, 30%+ new code AI-generated.
  • OpenAI internal: 97.9% of staff use Codex (40% in August 2025); non-developer Codex usage grew 137× in 8 months.
  • WorkBuddy: per-user token consumption grew 10× over 3 months; enterprise edition covers top gaming companies (engine-expert / design-expert / full-stack-expert / content-expert squads).

16. Vibe Coding in practice (the vibe-coding methodology)

Vibe Coding was coined by Tesla / OpenAI's former AI lead Andrej Karpathy in 2025. The core idea: developers describe intent in natural language; AI generates, executes, and iterates code; humans are the requirement-setter and reviewer. By 2026, 91% of engineering teams have adopted vibe coding; MIT Technology Review listed it among the "Top 10 Breakthrough Technologies of 2026". Vibe Coding is not "writing code blind" — it moves engineering discipline from "hand-writing implementations" to "designing the task system and review mechanism".

16.1 The 5-step recipe (proven and reusable)

  1. Describe the requirement (colloquial + structured) — say in plain language what the feature is, the tech stack, framework version, configuration requirements, and error handling. Example: "Write an API rate-limiting module with TypeScript NestJS, based on @nestjs/throttler latest, compatible with the new config format, read from .env, support multi-environment switching, add config validation."
  2. Generate the first cut (AI in one go) — use TRAE Work / Claude Code / Cursor to generate the first cut in one shot. Focus on "does it run" and "config compatibility", not perfection.
  3. Iterate (precise instructions) — never use vague words like "optimize". Say specifically: "fix the pagination edge-case bug, add 500ms debounce, add TS type defs, add a loading state". Each round focuses on 1-2 concrete issues.
  4. Validate (run + edge cases) — actually run the code + construct exception inputs (empty data / very long strings / concurrent requests). Don't take the AI's word for "done".
  5. Production hardening (monitoring + multi-environment) — cache version isolation, config validation, error reporting, canary release, rollback plan.

16.2 Real case: TRAE upgrading a NestJS rate-limiting module (avoiding an 800+ complaint incident)

2026-03-12: a startup's backend used an AI tool to upgrade a NestJS rate-limiting module. The AI directly reused the old ThrottlerModule.forRoot({ttl:60,limit:100}) format, completely missing the new @nestjs/throttler array-parameter spec. After going live:

  • The new module failed to initialize, leaving all endpoints unprotected
  • Peak traffic brought the system down — 800+ user complaints in 1 hour
  • Order conversion dropped 40%; emergency overnight fix took 6 hours to recover

Switching to TRAE Work mode produced the correct forRootAsync + array parameters + multi-environment defaults + Joi validation + standardized 429 exception filter — 3 rounds of iteration, 0 lines of human edits. The core difference: whether the AI understands "framework upgrade compatibility" as an implicit requirement. Lesson: in framework-upgrade scenarios, vibe coding MUST explicitly state the version number and config spec.

16.3 Vibe Coding watch-outs (lessons from the trenches)

  • Framework upgrade compatibility — must state the version explicitly (e.g. "NestJS 10 + @nestjs/throttler ^6.0"), the config format (new forRootAsync vs old forRoot); otherwise the AI defaults to the old version, leading to a production incident.
  • Config format differences — most major framework version upgrades change config APIs; the AI's training data may lag. Explicitly ask for "based on the latest version" and "refer to the latest official docs".
  • Error handling completeness — explicitly require "wrap in try-catch, return a uniform error format, log the error", so the AI doesn't write only the happy path.
  • Cache version isolation — cache keys must include the project version (e.g. v1.2.0-page-keyword); otherwise after release, old and new data mix and users see stale content.
  • Environment separation — dev/test/prod environments must have different rate-limit rules, cache strategies, and secrets. Explicitly require the AI to read from .env, not hard-code.
  • Avoid one-shot mega-requests — break into "build module → add guard → add exception filter → add config validation", validate each step. Don't ask for "full production-grade" in one shot.

16.4 Tool selection (2026 H1 latest)

  • Chinese vibe coding + framework upgrade + production-grade: TRAE Work mode (ByteDance, basic free) — industry-leading Chinese understanding.
  • Complex refactor + large project: Claude Code (Anthropic) — 30-hour long-horizon tasks, SWE-Bench Verified 82%.
  • English scenario + VS Code ecosystem: Cursor ($20/mo) — Composer mode for cross-file editing.
  • Free + any model: Cline + DeepSeek (~1/10 the cost of Claude) — perfect for individual developers.
  • Students / beginners: TRAE basic free + Replit AI; Gemini Code Assist is free for students.

Vibe Coding end-to-end project: build an "AI Translation Helper" from 0 to 1

This section walks through a real, runnable project to demonstrate the full Vibe Coding flow: use Claude Code / Cursor to write the code, use Claude Code to add tests, use Codex to deploy. The end product is a small Web tool that translates between Chinese, English, and Japanese — locally serving the backend + frontend, ~350 lines of code in total.

Project requirements (5 lines)

Target user: cross-border e-commerce operator
Core feature: paste a text, choose source and target language, click "Translate" to get the result
Tech stack: Python Flask + Claude API (backend) / React + Tailwind (frontend)
Non-functional: response < 3s, copy-to-clipboard, Chinese / English / Japanese

Step 1: describe the requirement in natural language, generate the project structure

In Claude Code, say:

I want to build an AI translation helper. See the README for the requirements. Please generate the full project structure, including:
- backend/app.py (Flask + Claude API, POST /api/translate)
- frontend/src/App.jsx (React + Tailwind, translation form + result panel)
- frontend/package.json (Vite + React 18 + Tailwind 3)
- backend/requirements.txt (flask, anthropic, python-dotenv, flask-cors)
- README.md (run instructions)
- .env.example (ANTHROPIC_API_KEY placeholder)
Output the full content of all files directly. I will save them locally.

Claude Code will give you 6-8 complete files in a single response. Save them as instructed.

Step 2: backend code backend/app.py (~100 lines)

"""AI Translation Helper backend - Flask + Claude API.

Usage:
    ANTHROPIC_API_KEY=sk-ant-... python backend/app.py
"""
from flask import Flask, request, jsonify
from flask_cors import CORS
from dotenv import load_dotenv

load_dotenv()
app = Flask(__name__)
CORS(app)
client = anthropic.Anthropic(api_key=os.environ["ANTHROPIC_API_KEY"])

# Supported languages
SUPPORTED = {"zh": "Chinese", "en": "English", "ja": "Japanese"}

SYSTEM_PROMPT = """You are a professional translator.
Translate the user's text from {src} to {tgt}.
Output ONLY the translation, no quotes, no explanation, no markdown."""


@app.get("/api/health")
def health():
    """Health check."""
    return {"status": "ok", "supported": SUPPORTED}


@app.post("/api/translate")
def translate():
    """Core translation endpoint. Body: {text, src, tgt}."""
    data = request.get_json(force=True)
    text = (data.get("text") or "").strip()
    src = data.get("src", "auto")
    tgt = data.get("tgt", "en")
    if not text:
        return jsonify({"error": "text is required"}), 400
    if tgt not in SUPPORTED:
        return jsonify({"error": f"unsupported tgt: {tgt}"}), 400
    try:
        msg = client.messages.create(
            model="claude-haiku-4-5",
            max_tokens=1024,
            system=SYSTEM_PROMPT.format(
                src=SUPPORTED.get(src, src), tgt=SUPPORTED[tgt]
            ),
            messages=[{"role": "user", "content": text}],
        )
        translated = msg.content[0].text.strip()
        return jsonify({
            "translation": translated,
            "src": src,
            "tgt": tgt,
            "usage": {"input_tokens": msg.usage.input_tokens, "output_tokens": msg.usage.output_tokens},
        })
    except anthropic.APIError as e:
        return jsonify({"error": str(e)}), 502


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

Step 3: frontend frontend/src/App.jsx (~150 lines)

import { useState } from "react";

const LANGS = [
  { code: "zh", name: "Chinese" },
  { code: "en", name: "English" },
  { code: "ja", name: "Japanese" },
];

const API = "http://localhost:5000";

export default function App() {
  const [text, setText] = useState("");
  const [src, setSrc] = useState("zh");
  const [tgt, setTgt] = useState("en");
  const [result, setResult] = useState("");
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState("");

  const onTranslate = async () => {
    if (!text.trim()) return;
    setLoading(true);
    setErr("");
    try {
      const r = await fetch(`${API}/api/translate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text, src, tgt }),
      });
      if (!r.ok) throw new Error((await r.json()).error || "Request failed");
      const j = await r.json();
      setResult(j.translation);
    } catch (e) {
      setErr(e.message);
    } finally {
      setLoading(false);
    }
  };

  const onCopy = async () => {
    await navigator.clipboard.writeText(result);
  };

  const onSwap = () => {
    setSrc(tgt);
    setTgt(src);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 p-8">
      <div className="max-w-2xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <h1 className="text-3xl font-bold text-gray-800 mb-6">🌍 AI Translation Helper</h1>

        <div className="flex items-center gap-3 mb-4">
          <select value={src} onChange={(e) => setSrc(e.target.value)}
            className="flex-1 px-3 py-2 border rounded-lg">
            {LANGS.map((l) => (
              <option key={l.code} value={l.code}>{l.name}</option>
            ))}
          </select>
          <button onClick={onSwap} className="px-3 py-2 text-xl">⇄</button>
          <select value={tgt} onChange={(e) => setTgt(e.target.value)}
            className="flex-1 px-3 py-2 border rounded-lg">
            {LANGS.map((l) => (
              <option key={l.code} value={l.code}>{l.name}</option>
            ))}
          </select>
        </div>

        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Enter the text to translate..."
          rows={6}
          className="w-full px-3 py-2 border rounded-lg mb-4"
        />

        <button
          onClick={onTranslate}
          disabled={loading || !text.trim()}
          className="w-full bg-indigo-600 text-white py-3 rounded-lg font-semibold hover:bg-indigo-700 disabled:opacity-50">
          {loading ? "Translating..." : "🚀 Translate"}
        </button>

        {err && (
          <div className="mt-4 p-3 bg-red-50 text-red-700 rounded-lg">{err}</div>
        )}

        {result && (
          <div className="mt-6">
            <div className="flex justify-between items-center mb-2">
              <h2 className="text-lg font-semibold">Translation</h2>
              <button onClick={onCopy} className="text-sm text-indigo-600 hover:underline">
                📋 Copy
              </button>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg whitespace-pre-wrap">{result}</div>
          </div>
        )}
      </div>
    </div>
  );
}

Step 4: wire up the front and back ends

Run commands (two terminals):

# Terminal 1: backend
cd backend
echo "ANTHROPIC_API_KEY=sk-ant-xxx" > .env
pip install -r requirements.txt
python app.py
#  → Running on http://127.0.0.1:5000

# Terminal 2: frontend
cd frontend
npm install
npm run dev
#  → Local: http://localhost:5173/

Screenshot: http://localhost:5173 — page contains "input box + language switcher + translate button + result panel", styled with a Tailwind gradient background. Demo: input "The weather is great today", switch to Chinese, click translate, get "今天天气真好".

Step 5: debug a bug with Cursor

Real case: a user reports "the Japanese translation result has markdown markers in it".

Steps:

  1. In Cursor, select the SYSTEM_PROMPT line, press Ctrl+K.
  2. Type: change the system prompt to "output plain text only, no markdown code blocks".
  3. Cursor patches the line directly. Old: Output ONLY the translation, no quotes, no explanation, no markdown. → new value appends No markdown code blocks..
  4. Save, backend hot-reloads, the issue is fixed.

Step 6: write tests with Claude Code

Claude Code command:

Write pytest tests for backend/app.py, covering: 1. /api/health returns 200 + contains 'supported' 2. /api/translate missing text → 400 3. /api/translate missing API key → friendly error 4. (needs to mock anthropic) /api/translate success path → 200 + contains 'translation'
Use pytest-mock to mock anthropic.Anthropic; put the test file in tests/test_app.py.

Claude Code produces the full test file in one shot. pytest tests/ -v passes.

Step 7: deploy with Codex

Codex CLI one-shot command:

codex "Create a Vercel deployment config in the current directory:
- backend/ uses Vercel Python Serverless Function, entry point api/index.py
- frontend/ uses Vite static build, output directory vercel.json points to dist
- root vercel.json handles both /api/* and SPA fallback
- Output the final directory tree and the full vercel.json content"

Codex generates all the deployment files. Then vercel --prod ships it.

Lessons from the trenches (5 points)

  1. API key exposure: NEVER write ANTHROPIC_API_KEY in front-end code — go through a backend proxy; locally use .env + python-dotenv.
  2. CORS errors: Flask doesn't allow cross-origin by default — add flask-cors; CORS(app) allows all, but in production switch to a whitelist.
  3. Claude output instability: use temperature=0 (default) + clear instructions "output only the translation, no explanation" + stop_sequences=["\n\n"].
  4. Front-end proxy: in Vite, configure server.proxy['/api'] = 'http://localhost:5000', avoid hardcoding localhost:5000 in code.
  5. Cost control: use claude-haiku-4-5 instead of Sonnet — Haiku is enough for translation tasks; cap long text with max_tokens.

📚 Previous: AI Coding tool landscape · Related chapters: Agent Evolution · Top GitHub Projects