← Blog

Build an AI App Using Claude Code: A Practical Workflow

2026-09-20 · 5 min read · SubToAPI Team

Claude Code is Anthropic's terminal-based coding agent — you run it in your project directory, describe what you want, and it reads, writes, and edits files directly, runs tests, and iterates until the code works. Using it to build an AI app means two separate things happening at once: Claude Code is the tool that writes your codebase, and Claude's API is very likely the thing powering the AI features inside the app you're building. Understanding that distinction is the fastest way to stop guessing and start shipping.

This guide covers both halves: a practical workflow for building with Claude Code as your pair programmer, and how to wire the resulting app to a real Claude API endpoint so it works in production, not just on your laptop.

What Claude Code actually does

Claude Code isn't a chatbot you paste code into. It's an agent with filesystem access. You give it a task — "add a streaming chat endpoint to this Express app" — and it plans the change, edits the relevant files, runs your test suite, and fixes what breaks. It works best when your project already has some structure: a package.json, a clear folder layout, and ideally a few existing tests it can run to check its own work.

If you're starting from zero, the first useful task to give it is scaffolding: a minimal API server, a basic frontend, and a .env.example file listing what secrets the app needs. From there you iterate feature by feature instead of asking for the whole app in one prompt — smaller, testable requests produce more reliable results than one giant instruction.

A practical build workflow

1. Scaffold the skeleton

Ask Claude Code to set up the project structure first: routes, a config module, a .env loader, and one working "hello world" endpoint. Confirm it runs before asking for anything AI-related.

2. Add the AI call as an isolated module

Don't let AI calls sprawl through your route handlers. Have Claude Code build a single lib/ai.js (or equivalent) that wraps the API call — model, system prompt, temperature, max tokens — behind one function. Every route calls that function. This makes it trivial to swap providers, add retries, or add streaming later without touching business logic.

// lib/ai.js
export async function askClaude(prompt) {
  const res = await fetch("https://api.subtoapi.app/v1/messages", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.SUBTOAPI_KEY}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "claude-sonnet-4",
      max_tokens: 1024,
      messages: [{ role: "user", content: prompt }]
    })
  });
  return res.json();
}

3. Iterate feature by feature

Give Claude Code one concrete task at a time: "add streaming to the chat route," "add a tool that looks up order status from the database," "add error handling for rate limits." Each task should be small enough that you can read the diff and understand exactly what changed. Ask it to add or update tests alongside the feature — this is what makes the next iteration safe.

4. Test against real API behavior early

A common mistake is building against mocked responses for weeks, then discovering streaming or tool-calling behaves differently once real traffic hits. Wire up an actual endpoint as soon as the AI module exists, even before the UI is finished. See /docs/quickstart for the request shape and /docs/streaming if your app needs token-by-token output in the browser.

5. Handle the boring production stuff

This is the part most tutorials skip: rate limits, key rotation, per-user usage tracking, and team access if more than one person is shipping to the same app. If you're building on top of a Claude subscription rather than a raw Anthropic API account, this is where a lot of side projects stall — personal accounts aren't built for multi-key, multi-environment use.

Turning your Claude access into something an app can call

Claude Code is great for writing the app, but the app itself needs a stable, application-scoped way to call Claude — separate keys for dev/staging/prod, usage visibility, and the ability to add teammates without sharing one login. That's the gap SubToAPI fills: it turns your existing Claude access into standard HTTPS API keys (sub_live_...) that behave like any other API you'd integrate.

Once you have a key, the module you built in step 2 doesn't change — you're already calling https://api.subtoapi.app/v1/messages. What you get on top is streaming support (/docs/streaming), tool use for function-calling features (/docs/tools), and per-key usage metadata so you can see what each environment or teammate is actually consuming. Full request and response formats are in /docs/messages.

curl https://api.subtoapi.app/v1/messages \
  -H "Authorization: Bearer $SUBTOAPI_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "claude-sonnet-4",
    "max_tokens": 512,
    "messages": [{"role": "user", "content": "Summarize this changelog for a release note."}]
  }'

Plans start at Solo (€9) for a single key and scale to Team (€19/seat) and Scale (€49/seat) when multiple people need dashboard access. There's a free trial at /signup, and full plan details are at /pricing.

Common mistakes when building with Claude Code

Asking for too much at once. A prompt like "build a full SaaS with auth, billing, and an AI chatbot" produces a sprawling, hard-to-review diff. Break it into features you can test independently.

Skipping tests. Claude Code checks its own work by running your test suite. No tests means no feedback loop, and errors compound across iterations.

Hardcoding the AI call everywhere. If every route makes its own fetch call to the API, changing models, adding retries, or switching providers later becomes a multi-file refactor instead of a one-line change.

Building against fake data too long. Real API responses — streaming chunks, tool-use blocks, rate-limit headers — have edge cases mocks don't reproduce. Connect early.

questions

Do I need an Anthropic API account to build an app with Claude Code? No. Claude Code itself just needs your Claude subscription to function as your coding assistant. For the app's own AI features, you need a separate API endpoint to call — either a direct Anthropic API account or a service like SubToAPI that turns your existing subscription into application-ready API keys.

Can Claude Code build the entire app end to end? It can write most of the code — routes, UI, tests, config — especially if you break work into small, reviewable tasks. It won't set up production infrastructure like domains, billing, or API key management for you; those still need explicit setup.

What's the difference between Claude Code and the Claude API? Claude Code is a CLI agent that edits your codebase directly, similar to a very capable pair programmer. The Claude API is the HTTPS endpoint your finished app calls at runtime to generate responses for its users. You typically use both: Claude Code to build the app, and an API key to power it.

Turn your Claude access into an HTTPS API

SubToAPI gives you application API keys, streaming, tool use and usage insights on top of your existing Claude access — set up in minutes.

Start free  Read the quickstart →