Skip to content
AI Growth Lab
Navigation menu
AI Growth Lab

Loading lesson…

CoursesContactPrivacy

Curriculum based on Datawhale / Easy Vibe · CC BY-NC-SA 4.0

← Back to course

AI-Native Engineer

Claude Code Fundamentals
  1. Getting Started with Claude Code
  2. Essential Claude Code Techniques
  3. Configuring Claude Code for Your Project
  4. Everyday Development Workflows
  5. Troubleshooting Claude Code
MCP: Connecting Claude Code to Tools
  1. Getting Started with MCP in Claude Code
  2. Using and Troubleshooting MCP
  3. Configuring Common MCP Servers
Claude Code Skills
  1. Finding and Using Your First Skills
  2. Understanding Skills and SKILL.md
  3. Creating and Improving Your Own Skills
  4. How Claude Skills Work Internally
Claude Agent Teams
  1. Understanding and Setting Up Agent Teams
  2. Build an RPG with Agent Teams
  3. Agent Teams Best Practices
  4. Choosing When to Use Agent Teams
AI-Assisted Development Workflows
  1. Choosing an AI Development Strategy
  2. Developing Features and Fixing Bugs with AI
  3. Refactoring and Reviewing Code with AI
  4. Building a Project Knowledge Base
  5. Improving AI Collaboration Efficiency
Building Agents with Claude Agent SDK
  1. Getting Started with Claude Agent SDK
  2. Advanced Features and Practical Agent Examples
  3. Building a Code-Quality Guardrail Pipeline
Engineering Workflows with Superpowers
  1. Getting Started with Superpowers and Its Core Skills
  2. Build an Authentication System with Superpowers
  3. Configuring and Using Superpowers Effectively
Spec Coding
  1. Spec Coding Foundations
  2. Practicing Spec Coding in Claude Code
  3. Moving from Vibe Coding to Spec Coding
  4. Spec Coding FAQ and Summary
GitHub Spec-Driven Development
  1. Workflow Foundations and Setup
  2. From Product Idea to Specification
  3. From Specification to Working Software
  4. Reusable Prompts and Responsible Autonomy
Cross-Platform Development
  1. From a Web Page to Real Software and an AI-Native Product
  2. How to Choose the Right Platform for Your App
  3. How to Build an Android App with Jetpack Compose
  4. How to Build an iOS App with SwiftUI
  5. Build a Store Inspection App with React Native and Expo

Lesson Contents

  1. Practical examples
  2. Debugging tips
  3. Best practices
  4. Claude Code vs Claude Desktop
AI Development FAQ and Summary
How to Build a Cross-Platform App with Flutter
  • How to Build a PWA Local App
  • How to Build a Browser AI Assistant Extension
  • How to Build a Cross-Platform Electron Desktop App
  • How to Build Platform, Pixel-Art, and 3D Games with Godot
  • How to Build a VS Code Extension
  • How to Build an Industrial Qt Desktop App
  • How to Build Your Personal Website and Academic Blog
  • How to Publish the Application You Built
  • On this page
    • Practical examples
    • Debugging tips
    • Best practices
    • Claude Code vs Claude Desktop

    Practical examples

    Example 1: GitHub workflow automation

    You: Help me push the current changes to GitHub, then create a PR titled "Add new feature"
    
    Claude:
    1. Check current git status...
    2. Create a new branch feature/new-feature...
    3. Commit changes...
    4. Push to remote...
    5. Call github_create_pull_request to create the PR...
    6. PR created: https://github.com/owner/repo/pull/123
    

    Example 2: Database query

    You: Query the 10 most recently registered users in the database
    
    Claude:
    1. Connect to the SQLite database...
    2. Execute query: SELECT * FROM users ORDER BY created_at DESC LIMIT 10
    3. Return results:
       - Zhang San (zhang@example.com) - 2025-02-28
       - Li Si (li@example.com) - 2025-02-27
       ...
    

    Example 3: Webpage screenshot analysis

    You: Open https://example.com, take a screenshot, and analyze the page design
    
    Claude:
    1. Launch browser...
    2. Navigate to https://example.com...
    3. Capture screenshot...
    4. [Returns screenshot]
    5. Page design analysis:
       - The layout uses a centered design with a max width of 1200px
       - The main color is blue (#3b82f6)
       - The navigation bar is fixed to the top
       ...
    

    Example 4: Integration with Notion

    You: Save the notes I just wrote to Notion
    
    Claude:
    1. Use the Notion MCP server...
    2. Create a new page...
    3. Saved: https://notion.so/page/xxx
    

    Debugging tips

    Diagnose with natural language

    When something goes wrong, just tell Claude Code directly:

    You: My MCP server cannot connect. Please check it for me
    
    You: The GitHub MCP tool call failed. What is the reason?
    
    You: Why does the sqlite server always show "connecting"?
    

    Claude Code will automatically:

    1. Check the configuration file format
    2. Validate environment variables
    3. Test the server connection
    4. Provide concrete fix suggestions

    Common problem troubleshooting

    ProblemPossible causeSolution
    Server not connectedConfig file format errorCheck JSON syntax
    Tool cannot be calledInsufficient permissionsCheck environment variables
    Connection timeoutNetwork problemCheck URL or network
    Process crashesBug in server codeCheck server logs

    Manual diagnostic command

    /doctor
    

    Example output:

    System Diagnostic Report:
    ===============
    
    Claude Code: v2.5.0 ✓
    Node.js: v20.0.0 ✓
    
    MCP server status:
    • github: ✓ Connected (12 tools)
    • sqlite: ✗ Connection failed - Database file not found
    • puppeteer: ✓ Connected (8 tools)
    
    Suggestions:
    1. Check whether the sqlite database path is correct
    2. Make sure the .claude/mcp.json format is correct
    

    Best practices

    1. Prefer project-level configuration

    Why recommend project-level configuration?

    Different projects often need different MCP services. For example, a frontend project may need browser testing tools, while a backend project may need database connections. With project-level configuration, each project can have its own dedicated set of MCP servers, avoiding the chaos of one large global config.

    More importantly, project-level config can be committed to Git. After team members clone the project, they can directly use the same MCP services without reconfiguring everything.

    Project A, frontend project -> .claude/mcp.json contains browser testing MCP
    Project B, backend project -> .claude/mcp.json contains database MCP
    

    2. Store sensitive information in environment variables

    Never hard-code secrets in the configuration file.

    Configuration files may be accidentally committed to Git and leak keys. The correct approach is to store sensitive values in environment variables and only reference the variable names from the config file. That way, even if the config file becomes public, the real secrets are still hidden.

    {
      "env": {
        "GITHUB_TOKEN": "$GITHUB_TOKEN",
        "GITHUB_TOKEN": "ghp_abc123"
      }
    }
    

    The first form is good because it reads from the environment variable. The second form is bad because it hard-codes a secret directly.

    3. Pin versions

    Why do you need to pin versions?

    By default, npx -y will always use the latest version of an MCP server. This can cause problems: a new version may introduce breaking changes, or a package may suddenly be removed or renamed.

    By appending @version to the package name, you ensure that a validated version is always used, reducing surprises caused by automatic upgrades.

    {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github@1.2.3"]
    }
    

    4. Document your MCP configuration

    Help teammates understand the MCP setup quickly

    When a project includes multiple MCP servers, new team members may not understand what each server is for or what configuration it requires. Creating a README.md under the .claude/ directory that explains each server's purpose, required config, and how to obtain credentials can significantly reduce communication cost.

    Create .claude/README.md in your project:

    # MCP Configuration Notes
    
    MCP servers used in this project:
    
    ## github
    Used for GitHub automation. Requires GITHUB_TOKEN.
    
    ## sqlite
    Connects to ./data/app.db for querying and modifying data.
    
    ## puppeteer
    Used for E2E testing.
    

    Claude Code vs Claude Desktop

    FeatureClaude CodeClaude Desktop
    Config file~/.claude.json or .claude/mcp.jsonclaude_desktop_config.json
    Project-level config✓ Supported✗ Not supported
    Natural-language management✓ Supported✗ Manual editing required
    Diagnostics✓ /doctor✗ None
    Hot reload✓ Automatic✗ Requires app restart
    Use casesDevelopment workflow, CI/CDDaily use, office tasks
    Previous
    Sign in to track progress
    Next