DEV Community

Yu-Chen, Lin
Yu-Chen, Lin

Posted on

Building an AI Development Environment with Claude Code Claude Router Open Router

Introduction

Claude Code is a CLI & GUI tool specialized for developers, based on the AI assistant “Claude” provided by Anthropic.

It allows you to perform code completion, design reviews, and prompt optimization in your local environment, enhancing development support.

This article will cover:

  • How to install and launch Claude Code
  • How to configure Claude Code via Claude Router
  • Practical use cases (Prompt design with Lyra → AI implementation support)
  • Troubleshooting
  • Useful commands to improve development efficiency

GitHub logo anthropics / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Claude Code

npm

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows -- all through natural language commands. Use it in your terminal, IDE, or tag @claude on Github.

Learn more in the official documentation.

Get started

  1. Install Claude Code:
npm install -g @anthropic-ai/claude-code
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to your project directory and run claude.

Reporting Bugs

We welcome your feedback. Use the /bug command to report issues directly within Claude Code, or file a GitHub issue.

Data collection, usage, and retention

When you use Claude Code, we collect feedback, which includes usage data (such as code acceptance or rejections), associated conversation data, and user feedback submitted via the /bug command.

How we use your data

We may use feedback to improve our products and services, but we will…

View on GitHub

GitHub logo musistudio / claude-code-router

Use Claude Code as the foundation for coding infrastructure, allowing you to decide how to interact with the model while enjoying updates from Anthropic.

Claude Code Router

I am seeking funding support for this project to better sustain its development. If you have any ideas, feel free to reach out to me: m@musiiot.top

中文版

A powerful tool to route Claude Code requests to different models and customize any request.

✨ Features

  • Model Routing: Route requests to different models based on your needs (e.g., background tasks, thinking, long context).
  • Multi-Provider Support: Supports various model providers like OpenRouter, DeepSeek, Ollama, Gemini, Volcengine, and SiliconFlow.
  • Request/Response Transformation: Customize requests and responses for different providers using transformers.
  • Dynamic Model Switching: Switch models on-the-fly within Claude Code using the /model command.
  • GitHub Actions Integration: Trigger Claude Code tasks in your GitHub workflows.
  • Plugin System: Extend functionality with custom transformers.

🚀 Getting Started

1. Installation

First, ensure you have Claude Code installed:

npm install -g @anthropic-ai/claude-code
Enter fullscreen mode Exit fullscreen mode

Then, install Claude Code Router:

npm install -g
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Using Claude Code Alone

1. Install claude code 

npm install -g @anthropic-ai/claude-code
Enter fullscreen mode Exit fullscreen mode

image.png

2. Launch Claude Code

Run the following command in the command prompt:

claude
Enter fullscreen mode Exit fullscreen mode

3. Initial Setup

  • Theme Selection (Light / Dark)
  • Account Linking (Claude subscription or Anthropic Console account)

image.png

image.png

Using Claude Code via Claude Router

1. Install Claude Router 

npm install -g @musistudio/claude-code-router
Enter fullscreen mode Exit fullscreen mode

image.png

2. Create a Config File

  • macOS / Linux: ~/.claude-code-router/config.json
  • Windows: C:\Users\<username>\config.json 
{
  "Providers": [
    {
      "name": "openrouter",
      "api_base_url": "https://openrouter.ai/api/v1/chat/completions",
      "api_key": "sk-xxx",
      "models": [
        "anthropic/claude-sonnet-4"
      ],
      "transformer": {
        "use": ["openrouter"]
      }
    }
  ],
  "Router": {
    "default": "openrouter,anthropic/claude-sonnet-4"
  },
  "LOG": true,
  "HOST": "127.0.0.1"
}
Enter fullscreen mode Exit fullscreen mode

Paste the API token generated in Open Router.

https://openrouter.ai/

3. Start Claude Router

Run ccr code

image.png

image.png

4. Troubleshooting 

Service not running, starting service...
Enter fullscreen mode Exit fullscreen mode

💡 Solution

Run ccr start

Error starting server: Error: listen EACCES: permission denied 127.0.0.1:3456
Enter fullscreen mode Exit fullscreen mode

💡 Solution

Add PORT to the config file:

{
  "Providers": [
    {
      "name": "openrouter",
      "api_base_url": "https://openrouter.ai/api/v1/chat/completions",
      "api_key": "sk-xxx",
      "models": [
        "anthropic/claude-sonnet-4"
      ],
      "transformer": {
        "use": ["openrouter"]
      }
    }
  ],
  "Router": {
    "default": "openrouter,anthropic/claude-sonnet-4"
  },
  "LOG": true,
  "HOST": "127.0.0.1",
+ "PORT": 23456
}
Enter fullscreen mode Exit fullscreen mode

After modifying the config, run ccr strop and then ccr code to apply the changes.

Example: Using as AI Design Assistance

Here we’ll show an example of combining Lyra Prompt Optimization with Claude Code to request system design.

1. Start Claude Router → Begin Project

  • Create a project folder (ai-guess-game)
  • Open command prompt in the project folder
  • Run ccr code

image.png

2. Create Instruction with Lyra

  • Input: “Build a drawing game with Next.js, and use Gemini API for AI to guess the drawing.”

Input Example

DETAIL using Claude —

## Project Overview

Create an online "Pictionary" game where players can draw on a canvas, and an AI system is responsible for guessing what the drawing represents.

## Technology Stack

* Framework: Next.js
* Use Gemini's API for AI, with API calls made from the backend
* Do not use any SDKs; call the Gemini API endpoint directly
Enter fullscreen mode Exit fullscreen mode
  • Lyra generates an optimized prompt and passes it to Claude Code

Result

**Your Optimized Prompt:**

You're an expert AI product architect and full-stack developer.

I'm building an online "Pictionary"-style web app using **Next.js** where players draw on a canvas and an AI guesses what the drawing represents.

**Your mission:**
Help me design the core architecture and implementation flow for this app. I will use **Gemini's API directly from the backend (no SDKs)** to send user drawings to the AI.

Please provide:

1. **System Architecture**  
   - How to structure the frontend and backend in Next.js  
   - Where and how to process the drawing data for API calls  
   - How to securely call Gemini API directly without an SDK

2. **AI Integration Plan**  
   - How to convert the user's canvas drawing into an appropriate format (image or strokes)  
   - Best format to send to Gemini for accurate interpretation  
   - API request/response structure examples

3. **Gameplay Flow**  
   - Steps from player drawing to AI making a guess  
   - Whether to guess after each stroke or on demand (with pros/cons)  
   - Optional: Add top-N guess logic with confidence scores

4. **Security &amp; Performance Tips**  
   - How to protect Gemini API key  
   - How to minimize latency for real-time interaction

Do not suggest using Gemini SDKs. All API calls should be handled manually.

Start by outlining the architecture, then walk through each step of the AI interaction and gameplay logic.
Enter fullscreen mode Exit fullscreen mode

https://qiita.com/oharu121/items/cfe9d8b3850846a64d14

3. Claude Code Proposes the Design

  • Architecture structure
  • API integration flow
  • Gameplay steps
  • Security & performance measures

image.png

image.png

image.png

image.png

image.png

image.png

4. Code Generation and Execution Result

  • Enter implement with the above plan following the design
  • Implementation code is generated, and the drawn “pig” was correctly recognized as “pig head”

image.png

  • This time the top-up was 4 USD, but only 0.87 USD was used

image.png

5. Confirming the Results

https://github.com/oharu121/ai-guess-game

I drew a pig, and it correctly recognized it as “pig head”!

image.png

image.png

How to Use Claude Code

Claude Code isn’t just for chat—it also provides the following prompt design support features:

1. Handy Commands in Claude Code

Command Description
/init Summarizes project info into CLAUDE.md
/compact Reduces token consumption via context compaction
/clear Resets conversation history
alt + m Mode switching (Manual approval / Auto approval / Plan mode)

2. VS Code Integration

  1. Install the Claude Code extension in VS Code

image.png

  1. Run /ide in Claude Code and select Visual Studio Code

image.png

image.png

  1. Edit diffs are visualized, improving code review efficiency

image.png

Conclusion

Now you’re ready to run Claude Code locally and use it in combination with Claude Router to support your development. Next, try it out in an actual development project for design reviews, code generation, and improvement suggestions.

Top comments (0)