Login
Back to Blog
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

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

18 | Claude Code Integration with Crazyrouter, Part 18: In the AI Era, If You Can Talk, You Can Code#

This article is the 18th installment in the Crazyrouter Claude Code series. It expands on 'Claude Code Integration with Crazyrouter, Part 18: In the AI Era, If You Can Talk, You Can Code' and focuses on 'In the AI Era, If You Can Talk, You Can Code', 'Hands On: Your First AI-Native App', and 'Appendix 1: Do We Need Front-End Development Knowledge?'.

Unified integration setup: Claude Code / Anthropic native clients use ANTHROPIC_BASE_URL=https://cn.crazyrouter.com; OpenAI-compatible SDKs, HTTP requests, and front-end/back-end apps use base_url=https://cn.crazyrouter.com/v1.

What This Article Covers#

  • Who this is for: developers who are already using Claude Code, preparing to connect domestic models, or looking to standardize team calls through Crazyrouter.
  • What you'll learn: how to configure environment variables according to the Crazyrouter docs, structure your workflow, and avoid /v1/v1/... issues caused by a wrong Base URL.
  • Recommended prep: create a dedicated API Token in the Crazyrouter Console, then follow the Claude Code integration guide to finish the basic setup.

In the AI Era, If You Can Talk, You Can Code#

This is a project-based learning tutorial. You can follow the steps one by one and try to reproduce the result.

A lot of people have product ideas in their heads: a small budgeting tool, a website that records a child's growth, or even a mini game. But the moment they think about writing code or finding a programmer, they give up.

After AI arrived, it gave non-programmers a brand-new possibility for the first time: you do not need to know how to write code; you only need to learn how to tell AI exactly what you want. Data from GitHub Copilot shows that more than 15 million developers are using AI-assisted programming, and an average of 46% of code is AI-generated! In Java projects, that number can reach 61%.

Next, we'll use Snake as an example to look at what AI programming can actually do today.

1. Build a Snake Game in 60 Seconds#

First, please open the z.ai experimental site and walk through how to use its full-stack development module.

What Is the New 'Browser-Based Programming' Model?

In the past, building a web app required:

  • Installing a programming environment (such as Python or Node.js)
  • Configuring a code editor
  • Learning languages like HTML/CSS/JavaScript
  • Dealing with all kinds of dependencies and errors

Now, with an AI coding platform, all you need is:

  • Open a browser and visit the website
  • Describe the feature you want in natural language
  • Let AI generate the code and preview the result in real time

This 'chat is programming' model turns coding from 'writing code' into 'describing requirements'. You do not need to worry about the underlying technical details; you only need to clearly tell AI what you want, and it can turn your idea into a runnable program. This is the new programming paradigm of the AI era - Vibe Coding (vibe-based coding).

After entering our simple request and clicking the Full-Stack Development button, you can watch the entire website creation process in real time. It usually takes no more than the time it takes to make a cup of coffee, and the page will be generated automatically!

bash
Help me build a Snake game:
1. Use the arrow keys to control the snake's movement
2. When the snake eats food, it should grow and the score should increase
3. Hitting the wall or the snake's own body ends the game
4. It should have Start and Restart buttons
5. The interface should be clean and visually appealing

When generation is complete, you'll see a browsable web page appear on the right. You can scroll through the page content, or click the 🧭 button at the top of the page to switch to full-screen mode and view the result.

From left to right, the buttons in the top bar do the following: the arrow button expands the sidebar conversation history, the pencil button starts a new conversation, the circular arrow button refreshes the page, the compass button switches to full-screen mode, the Download button downloads the project, the <> button switches to code view, and the Publish button publishes the project.

If you want to inspect the page source, click the code icon in the upper-right corner to view the full code.

Explore More AI Coding Tools

In addition to z.ai, you can also try the following AI coding platforms for testing:

ToolAddressFeatures
Figma Makefigma.com/makeDeeply integrated with design tools, ideal for designers to quickly build interactive prototypes
v0.devv0.devAn AI-generated UI tool from Vercel; enter a description and it can generate runnable React component code
Bolt.newbolt.newAn AI full-stack development platform from StackBlitz that can generate and deploy complete web apps directly
Lovablelovable.devFocused on generating high-quality React apps, with GitHub integration and one-click deployment
Replit Agentreplit.comAn online IDE with an integrated AI coding assistant, supporting multiple languages and real-time collaboration

2. What Conversational Programming Can and Cannot Do#

This section focuses on a specific question: if you rely only on conversational AI and do not write any code yourself, how far can it actually take you? In practice, a fairly stable conclusion is that it can help you build something small but complete, but deciding what 'enough' means still requires you to make detailed decisions at every step.

Better at Small, Clearly Scoped Apps#

From the Snake example above, you've already seen a typical pattern: as long as you can explain the UI and interactions clearly, AI can usually stitch together a complete web page that you can open, click, and play with in just a few rounds of conversation.

These tasks usually share a few traits:

  • Clear scope: one-page websites, a simple internal tool, or a small game
  • Visible results: you can immediately verify in the browser whether it works as expected
  • Straightforward correction: when you spot a problem, you can point to the specific symptom in a follow-up prompt and ask for a fix (by pasting the error directly or pasting a screenshot so AI can revise it)

Within that boundary, you can think of conversational AI as a fairly capable 'assistant developer'. You only need to refine and adjust requirements in natural language each round, and you can quickly get a usable prototype.

Large Projects Need a Workflow View#

Once you go beyond the small and clearly defined scope, relying on a few rounds of conversation to have AI complete a complex system end to end will quickly hit its limits. Large projects often need back-end integration, database connections, third-party service integration, plus permissions, security, concurrency, and a large number of business rules. The goal is to deliver a full system that is deeply connected to existing business operations, not just a single web page.

In that situation, the better approach is not to dump every requirement on AI all at once. Instead, first map out the overall workflow clearly: what are the key steps, what are the inputs, outputs, and state changes at each step, and which points are most sensitive from a performance and security perspective. Then, based on that workflow, split out the relatively independent parts and let conversational AI generate the APIs, modules, scripts, and tests.

Given today's capabilities, AI is better at accelerating individual small steps, while you (or your team) decide how to split the work, how to connect the pieces, and take responsibility for the final architecture, system integration, and operations.

The Difference Between Code That Can Be Written and Code That Can Be Used#

At first glance, AI seems capable of writing anything. But can those things actually be used, and if so, to what extent? How should we draw the line?

A useful rule of thumb is:

Best-Fit Scenarios

  • Prototypes / demos / internal tools: very suitable for having AI produce the first version, then iterating on the details yourself.
  • Large products for real users: usually require engineers to invest long term in architecture, abstraction, performance, and maintainability.
  • High-security / highly regulated systems (such as payments, risk control, and healthcare): at this stage, it is not appropriate to 'generate and ship'; strict review and testing processes are mandatory.

Today, you can think of AI as an efficient partner for demos and self-use tools: as long as you're willing to test more, iterate more, and ask a few more rounds of 'this is not right, fix it and explain why', the overall quality at the prototype and internal-tool level is usually good enough and practically valuable.

Hands On: Your First AI-Native App#

Let's get back to the hands-on part. In the previous section, we quickly built a playable Snake prototype with AI, and we also got a rough sense of what AI can and cannot do. Next, we'll learn how to create a modern AI Snake game using the most basic vibe coding techniques. We'll make the snake eat text characters instead of beans. In the end, the game will generate a poem and draw a picture based on the text characters it has eaten. Through this real-world example, you'll understand the core idea behind this new way of programming: learning how to express requirements clearly in natural language.

3.1 AI-Native Snake Game#

At the beginning, we can talk to the large model in the simplest possible way, which helps us quickly get a product prototype. You can type this directly into the chat box:

Copyable Prompt Example#

text
Help me build a Snake game

Copyable Prompt Example#

text
Help me make a Snake game. It should support
  1. I can eat different words, and they will be collected in a box

Copyable Project: Prompt Example#

text
Help me make a Snake game. It should support:
  1. I can eat different words, and they will be collected in a box
  2. When the snake has eaten 8 words, the llm should use those words to create a poem, and we can remix that poem as needed.
  3. After the poem is finished, the next step will automatically create an image based on that poem.

During development, we may run into disappointing issues, such as clicking a button and nothing happens, errors when using a feature, a feature not working as expected, or the front-end page not matching the intended design.

In those cases, we need to ask the model further questions to help fix these unexpected problems.

3.2 Add New Features to the Game#

Once the basic functionality is done, we can try adding some new twists to our program! If you think the process of the snake eating words or characters is a bit dull, you can make it eat words in different colors and change the snake's color accordingly.

You can also add special effects to the "eating" process, or introduce magical words that trigger effects - for example, increasing the snake's speed or size. Another idea is to have the model generate a poem and an image every time the snake eats a word, instead of waiting until it has eaten eight words.

If these feel challenging, you can go straight to the language model for help! It can suggest creative ideas to make your game more interesting. Give it a try!

json
1. "Word Unlocks the World" Mechanic
   Every time the snake eats a word, the LLM makes a poetic association for that word (for example, "tree" -> "forest", "shade"), and the image model instantly generates a small artwork for that word. These images gradually assemble into a unique panoramic scene created by the player, so every playthrough feels like "painting and writing poetry."

2. "Poetry Puzzle" Gameplay
   Each word the snake eats triggers the LLM to generate a short line of poetry, and the image model generates an illustration. These lines of poetry and images combine like puzzle pieces, forming an AI-collaborative poem and painting at the end of the run.

3. "Magic Words" & "Branching Story"
   Special "magic words" (for example, "wind", "night", "dream") not only trigger the LLM to generate poetry, but also change the mood or theme of the scene - shifting the image generation style to a nighttime, stormy, or dreamlike atmosphere.
   Branching story: the LLM gives a theme or riddle at the start (for example, "Memories of Autumn"). The player's word choices directly affect how the story and poem evolve, while the image model updates the background and visual effects in real time.

4. "Real-Time Interactive Generation"
   After each word, the LLM generates a line of dialogue or description, and NPCs in the game can "talk" to the player, or the environment can change accordingly.
   The snake's appearance or the obstacles in the game can also change visually based on the words eaten, thanks to the image model.

5. "Create & Share"
   Players can save and share the poems and images their AI creates at the end of a session, showing off their unique "AI collaboration."
   Leaderboards for "Most Beautiful Poem + Art" and "Most Creative Word Combination" encourage replayability and creativity.

6. "Sentence Snake" Challenge
   Reverse mode: the LLM gives a line of poetry or a riddle, and the player must guide the snake to eat the words in the correct order to reconstruct the sentence. Eating the wrong word triggers fun or artistic consequences through the image generation model.

7. "Theme Levels" & "Style Selection"
   At the start of the game, the player chooses a theme (for example, "fairy tale", "science fiction", "Tang poetry"). Both the LLM and the image model adjust the word choices, poetry style, and visual effects to match, making each run feel fresh.

8. "Live Co-Creation"
   When the snake eats a special word, the LLM can prompt the player to enter a phrase or choose a style, then the AI generates the corresponding poem line and illustration, making it a true human-AI co-creation.

9. "AI Easter Eggs & Achievements"
   Certain word combinations are recognized by the LLM as special themes or inside jokes (for example, "moon", "osmanthus", "riverbank"), triggering rare lines of poetry and illustrations as a reward for exploration.

10. "A Growing Story"
    As the snake grows, the LLM generates a continuous story poem, and the image model creates a seamless long scroll or panoramic scene, so the player is "writing, painting, and playing" at the same time.

In addition, we can also ask the LLM to generate project-level prompts for you directly. In the previous section, we only wrote the Snake game prompt ourselves. Now let's try having the model generate a prompt with an overall framework and implementation path (you can generate it directly with z.ai).

If you want to learn how to write better prompts, you can check the Prompt Engineering Appendix.

I want AI to generate a web-based Snake game, and I need a more complete prompt to make the result more impressive and fun. Please generate the corresponding prompt. The current goal is: build a Snake game that includes the ability to generate poetry from different words, and it should also include an image generation module.

The response from z.ai will look like this:

We can use this prompt to regenerate the project in full-stack development mode:

3.3 Try Making Other Mini Games#

Besides Snake, we can let our imagination run wild.

Create anything we want to create, and even try to mess everything up! Then start over from scratch!

Markdown
1. AI Art Gallery Platform
   Description: An online gallery for showcasing AI-generated artwork, where users can upload, share, and comment on AI art.
   Features: User account system, artwork upload and display, rating system, category browsing, AI generation tool integration.
   Technical highlights: React/Vue front end, Node.js back end, MongoDB database, AI API integration.

2. Retro Game Archive
   Description: A website that pays tribute to classic games, featuring game history, gameplay guides, and retro games you can play online.
   Features: Game database, timeline display, online emulator, user comments, game collection features.
   Technical highlights: Responsive design, WebGL/Canvas game implementation, RESTful API, user authentication system.

3. Sustainable Living Tracker
   Description: A website that helps users track and reduce their carbon footprint through eco-friendly tips and community challenges.
   Features: Personal carbon footprint calculator, goal setting, progress tracking, community challenges, environmental knowledge base.
   Technical highlights: Data visualization, mobile optimization, social features, push notifications.

4. Virtual Kitchen Assistant
   Description: An AI-powered cooking guidance platform that provides personalized recipe recommendations and step-by-step cooking instructions.
   Features: Recipe database, ingredient recognition, personalized recommendations, cooking timer, nutrition analysis.
   Technical highlights: Image recognition API, machine learning recommendation system, voice control, real-time video guidance.

5. Underground Music Discovery Platform
   Description: A music streaming platform focused on independent and emerging artists, offering a unique discovery experience.
   Features: Music streaming, artist profiles, personalized recommendations, playlist creation, community comments.
   Technical highlights: Audio streaming, recommendation algorithms, social features, music visualization.

6. Minimal Task Management System
   Description: A Zen-inspired task management tool focused on simple and efficient task organization.
   Features: Task creation and categorization, priority setting, progress tracking, team collaboration, data analysis.
   Technical highlights: Minimal UI design, drag-and-drop, real-time sync, cross-platform compatibility.

7. Sci-Fi Writing Workshop
   Description: A platform for science fiction writers that provides creative tools and inspiration, including world-building assistance and character development tools.
   Features: Story structure tools, character profiles, world-building templates, writing statistics, community feedback.
   Technical highlights: Rich text editor, data visualization, collaborative editing, AI-assisted creation.

8. Personal Knowledge Graph
   Description: A tool that helps users build a personal knowledge network and visualize and connect ideas and information.
   Features: Node creation and linking, tagging system, search functionality, import/export tools, visual charts.
   Technical highlights: Graph database, data visualization algorithms, Markdown support, cross-device sync.

9. Virtual Botanical Garden
   Description: An interactive plant encyclopedia where users can explore the plant world and create virtual gardens.
   Features: Plant database, 3D plant models, growth simulation, gardening guides, community showcases.
   Technical highlights: 3D rendering, seasonal change simulation, AR integration, plant recognition API.

10. Programming Challenge Arena
    Description: An online competition platform for programmers with coding challenges of varying difficulty levels.
    Features: Challenge problems, code editor, automatic evaluation, leaderboard, learning paths.
    Technical highlights: Code sandbox environment, real-time evaluation system, algorithm visualization, social learning features.

And more... If you like games, let's try creating games together!

Markdown
1. 3D Open-World RPG
   Description: A fantasy RPG with a vast open world, quests, and character progression.
   Features: Day-night cycle, dynamic weather, skill trees, multiplayer co-op, crafting system.
   Technical highlights: Three.js or Babylon.js for 3D rendering, server-side game logic, character customization, save system.

2. First-Person Shooter (FPS) Arena
   Description: A fast-paced multiplayer FPS with various game modes and maps.
   Features: Team deathmatch, capture the flag, weapon customization, ranked matches.
   Technical highlights: WebGL/Three.js for 3D graphics, multiplayer networking code, hit detection, voice chat.

3. AI Chess and Multiplayer Game
   Description: A fully featured chess platform with AI opponents and online play.
   Features: AI difficulty levels, endgame challenges, tournament mode, replay analysis.
   Technical highlights: Chess logic library, WebSocket for real-time play, ELO ranking system, anti-cheat.

4. Mahjong Online Multiplayer Game
   Description: A traditional Mahjong game with online multiplayer and scoring.
   Features: Multiple rulesets, private rooms, ranking system, replay features.
   Technical highlights: Tile matching logic, real-time multiplayer, lobby system, score tracking.

5. Turn-Based Strategy Game
   Description: A tactical strategy game with grid-based combat and unit management.
   Features: Campaign mode, skirmish mode, unit upgrades, fog of war, multiplayer battles.
   Technical highlights: Grid movement system, AI decision-making, turn synchronization, save/load system.

6. Time Trial Racing Game
   Description: A 3D racing game focused on time trials and track records.
   Features: Multiple tracks, car customization, ghost replays, leaderboards.
   Technical highlights: 3D car physics, track editor, replay system, online leaderboard.

7. Card Battle Game (Deckbuilding)
   Description: A strategy card game where players build decks and battle opponents.
   Features: Card collection, deck building, ranked matches, seasonal events.
   Technical highlights: Card game logic, matchmaking system, AI opponents, card animations.

8. Battle Royale (Top-Down 2D)
   Description: A top-down 2D battle royale game with a shrinking play area and loot mechanics.
   Features: Solo and squad modes, weapon variety, in-match events, leaderboard.
   Technical highlights: Real-time multiplayer, shrinking zone logic, loot generation system, matchmaking.

9. Horror Survival Game (First Person)
   Description: A first-person horror game with resource management and escape mechanics.
   Features: Atmospheric environments, puzzles, enemy AI, multiple endings.
   Technical highlights: Dynamic lighting, sound design, enemy pathfinding, save system.

10. Music Rhythm Game (3D)
    Description: A 3D rhythm game where players hit notes to the beat of the music.
    Features: Multiple difficulty levels, track editor, custom song support, leaderboard.
    Technical highlights: Audio analysis, beat synchronization, 3D note tracks, input timing detection.

Appendix 1: Do We Need Frontend Development Knowledge?#

One-sentence takeaway

You don't need to know how to code, but understanding the basics helps you describe requirements to AI more clearly.

The Frontend Trio#

Browsers use three kinds of "code" to build a page:

How Does Code Become a Page?#

When you open a web page, the browser processes three kinds of code in order:

  1. HTML -- Defines the page structure. The browser first parses the HTML to understand which elements are on the page (headings, paragraphs, images, buttons, and so on) and how they relate to one another.
  2. CSS -- Applies styles. The browser then uses CSS rules to style those elements: colors, sizes, positions, spacing, and more, making the page look polished.
  3. JavaScript -- Adds interactivity. Finally, the browser runs the JavaScript code to make the page "come alive": responding to clicks, submitting forms, playing animations, and more.
  4. Page rendering. The combined result of the three is the web page you ultimately see.

Modern Frontend Frameworks: From HTML to React/Vue#

The HTML, CSS, and JavaScript introduced above are the "frontend trio" -- the foundation of every web page. But as pages become more complex, building them directly with this trio brings challenges: code becomes harder to maintain, there is a lot of repetitive work, and keeping data in sync gets messy.

Modern frontend frameworks (such as React, Vue, and Angular) build on HTML/CSS/JS to make development more efficient:

  1. HTML/CSS/JS (basic stage) Directly manipulate page elements, which works well for simple pages. But as the codebase grows, all the logic gets mixed together and becomes hard to maintain.
  2. jQuery (transition stage) Simplifies DOM manipulation and makes code more concise. But you still have to manage page state manually; when data changes, you must find the corresponding elements yourself and update them.
  3. React/Vue (modern stage) Use a component-based, state-driven design:
  • Component-based: split the page into independent, reusable modules (such as buttons, cards, and navigation bars)
  • State-driven: when data changes, the framework automatically updates the relevant UI without manual DOM work

Simple interpretation

  • HTML/CSS/JS = basic materials (bricks, cement, steel bars)
  • React/Vue = the building framework (it provides the rules and tools for constructing a house)

In the era of AI-assisted programming, you do not need to master every detail of the frameworks. You only need to understand the basic concepts, and you can let AI generate code from natural language descriptions.

In Vibe Coding#

The key point: you don't need to write code; you only need to describe what you want.

After understanding frontend concepts, you can describe your requirements to AI like this:

"Build a leaderboard page with React. Show a score list on the right, display player details below when a row is clicked, and keep the style clean and modern."

If you want to go deeper into the fundamentals of HTML, CSS, and JavaScript, check the Web Basics appendix. If you want to learn about the evolution of frontend technologies, check the Frontend Evolution appendix.

Appendix 2: What Exactly Is Vibe Coding#

💡 What is Vibe Coding? Computer scientist Andrej Karpathy (one of the co-founders of OpenAI and former head of AI at Tesla) coined the term vibe coding in February 2025. The concept refers to an LLM-based coding approach that allows programmers to generate working code by providing natural language descriptions instead of manually writing code.

Literally speaking, Vibe Coding can be understood as a way to "develop by talking." Its core shift is this: you no longer need to write code line by line, look up syntax, or debug errors yourself. Instead, you describe what you want in natural language, for example:

"I need a login page with a mobile number input field and a verification code input field." "After a successful login, go to the home page and show the username in the top-right corner." "Give me a simple Snake game that can be controlled with the arrow keys on the keyboard." The large language model (LLM) automatically translates this kind of description into code that can actually run, and generates the corresponding page, logic, and data structures. After you see the result, you can give feedback in natural language, such as "make the button bigger," "switch the background to dark," or "save the score and show a leaderboard," and the AI will keep adjusting the implementation according to your requests.

In this model, you do not need to learn a programming language first and then write code. Instead, you focus your main energy on: making it clear what you want to build, judging what looks wrong after seeing the result, and then proposing new changes. The AI is responsible for turning these high-level ideas into concrete implementations, which significantly reduces mechanical, repetitive coding work.

You can click here to learn more about the details of vibe coding: ibe-coding

You can click here to learn more about Karpathy's talk:

How to Pretend You're a Vibe Coding Master#

In practice, during real vibe coding, we usually do not use many complicated prompts. Maybe at the beginning we need a specific and moderately complex prompt for the whole program, but after that, each step may only require prompt types like these:

json
"There's a bug in the code, please fix it."
"I don't want partial code; give me the complete modified code."
"Your code still has problems."
"Please modify it again and give me the complete corrected code."
"It worked just a moment ago; why doesn't it run now?"
"Don't you understand what I mean? Don't change my original code."
"Don't add any debugging features."
"Don't do things I didn't ask you to do."
"Where is the feature I asked you to implement?"
"Don't you understand what I'm saying?"
"I only want one function."
"I told you to refer to my previous code."
"Please don't add unnecessary comments."
"Please don't change the basic logic of my original code."
"Help me modify the code."
"Modify it based on my code..."
"Don't change my variable names!!!"
"Don't change the original function names!"
"Don't touch my variables."
"Don't add extra features."
"Don't generate just the framework; generate the full code."

This may sound a bit exaggerated, but in fact these are the kinds of prompts we might use in day-to-day work. Because large language models have context length limits, or sometimes because their instruction-following ability is not very strong, the model may forget what was discussed earlier in the conversation. In vibe coding, we tend to use models with long context windows and strong instruction-following ability, and we can judge whether a model is good by looking at rankings or metrics for these two aspects.

Alternatively, because of the style of the training data, large models may tend to answer in the style of their training data. For example, some people speak very seriously, some like to add a lot of embellishment, and some large models like to add lots of comments or unnecessary modules in the code.

Appendix 3: Model Context#

Model context can be understood as AI's short-term memory. It refers to all the text content the model can "see" and "remember" within a single conversation or task, including the questions you entered earlier, instructions provided by the system, relevant materials, and so on.

It is precisely because of context that AI can understand when you are continuing from earlier content and can carry on a conversation that feels coherent and natural from one turn to the next. Without context, every sentence you write looks like a brand-new question to the model. It would not know what you said before, so it could not continue the conversation.

Each model has its own effective context length (context window). This length is usually measured in tokens (which you can think of roughly as units of "word fragments"). At present, most mainstream models are in the 32k to 128k token range. The longer the context, the more the model can "read" in one go. For example:

  • Read an entire long paper or report at once
  • Cite multiple sources and several cases in the same conversation turn
  • Let the model remember the conclusions from several earlier rounds of complex discussion

When the content you enter approaches or exceeds the model's context limit, several common phenomena often appear:

  • The model starts to forget details or key information from earlier long text
  • As the conversation goes on, the topic gradually drifts away from the original goal
  • Different Q&A sessions about the same material cite inconsistent content

These phenomena do not mean the model suddenly became "dumber"; they are a natural result of the context capacity being used up or nearly used up.

In real-world use, we want context to be as long as possible, but we also need to recognize that:

  • The longer the context, the more compute resources it consumes
  • The corresponding call cost (fees) also increases accordingly

Therefore, when designing AI applications, you need to balance letting the model see enough and controlling cost and improving efficiency. For example:

  • Extract the information that truly needs to be retained for the long term before handing it to the model
  • Avoid stuffing the same detail into the context over and over when it is no longer needed
  • Use external knowledge bases and similar approaches to let the system handle "long-term memory" instead of forcing it into the model context

Appendix 4: Instruction Following#

Instruction following means: after the model understands your instruction, can it execute your request accurately and completely? This includes not only answering questions, but also completing tasks in a specified format, style, and sequence.

For example, the following are all clear instructions for the model:

  • Summarize this article into three key points
  • Write a reply email in a formal, polite tone
  • Translate this word into English and give one example sentence for each
  • Extract the author, time, and main events from the article

A model with strong instruction-following ability usually has the following traits:

  • Outputs the requested number of items. For example, if asked to summarize three key points, it will not give five.

  • Covers all specified elements. For example, if asked to extract the author, time, and events, it will not omit any of them.

  • Follows the specified format and tone. For example, if asked to use a formal tone, it will not output an overly casual reply.

  • Does not add unnecessary extra material. For example, if only translation and example sentences are requested, it will not add a large amount of unrelated explanation. In real-world applications, strong instruction-following is very important, for reasons including:

  • Better stability: with the same instruction, outputs stay more consistent in structure and behavior across different times and repeated runs, and are less likely to drift off-script

  • Better reproducibility: when you bake a prompt into a product or workflow, you can predict how the model will respond, which makes testing and iteration easier

  • Easier system integration: when model outputs match the expected format, it is much easier to connect them automatically to backend programs, workflows, or other tools

So when you choose and evaluate an LLM, beyond whether it is smart and broadly knowledgeable, you also need to pay special attention to its instruction-following ability. For production-grade applications, whether it can execute instructions steadily and accurately is often more important than occasionally producing an impressive answer.


Further Reading#

Get Started with Crazyrouter#

If you are ready to connect Claude Code, domestic models, or your own application to Crazyrouter in a unified way, you can move forward in this order:

  1. Go to the Crazyrouter Console to create a dedicated API Token, and manage permissions separately by project or team.
  2. Claude Code uses the root domain: https://cn.crazyrouter.com; OpenAI-compatible SDKs use: https://cn.crazyrouter.com/v1.
  3. When you need to automatically check the environment or quickly write configuration, use the Crazyrouter Claude Code one-click setup script.
  4. If debugging fails, first check the console logs, then verify the API Endpoint documentation, with a focus on whether the Base URL accidentally includes an extra /v1.

If you need to evaluate model costs or choose between different models, you can first check the Crazyrouter pricing and models page, then add the commonly used models to the Token allowlist.

Implementation Guides

Related Posts

16|Claude Code with Crazyrouter Series 16: Chapter 13: Reusing Documentation to Solve Similar ProblemsClaude Code

16|Claude Code with Crazyrouter Series 16: Chapter 13: Reusing Documentation to Solve Similar Problems

16|Claude Code with Crazyrouter Series 16: Chapter 13: Reusing Documentation to Solve Similar Problems. 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
14|Chapter 11: Using Advanced Claude Features — Crazyrouter Series 14Claude Code

14|Chapter 11: Using Advanced Claude Features — Crazyrouter Series 14

14|Chapter 11: Using Advanced Claude Features — Crazyrouter Series 14. This article covers unified access, configuration checks, and hands-on workflows for Claude Code and Crazyrouter, helping readers follow the site documentation to build reusable development workflows.

Jun 10
13|Claude Code with Crazyrouter, Part 13: Chapter 10: Solving Problems with a Programming MindsetClaude Code

13|Claude Code with Crazyrouter, Part 13: Chapter 10: Solving Problems with a Programming Mindset

13|Claude Code with Crazyrouter, Part 13: Chapter 10: Solving Problems with a Programming Mindset. 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
08|Claude Code Integration with Crazyrouter, Series 08: Chapter 5: Document Management and ProcessingClaude Code

08|Claude Code Integration with Crazyrouter, Series 08: Chapter 5: Document Management and Processing

This article covers Claude Code's unified integration with Crazyrouter, configuration checks, and a hands-on workflow, helping readers follow the site documentation to build a reusable development workflow.

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