Tutorials / Intermediate

Build an App Powered by the Claude API (Your First AI Feature)

Not just built WITH Claude — built ON Claude: an app whose core feature is AI. Covers the part everyone gets wrong: keeping your API key out of public code.

DifficultyIntermediate

TimeHalf a day

You'll needClaude · An Anthropic API key (pay-as-you-go, a few dollars covers a lot) · Browser; Cloudflare account (free) for the public version

You'll buildAn AI-powered tool — recipe-from-ingredients generator, email tone fixer, study-question maker, whatever you choose — calling Claude's API, plus the safe pattern for publishing it.

Everything so far used AI to write your apps. This tutorial puts AI inside one: your app sends a prompt to Claude's API and uses the response as its feature. This is the architecture behind a thousand '$10/mo AI tool' products — a good prompt, a text box, and an API call. You can have one running today; the only real lesson is doing it without leaking your API key to the internet.

Step 1 — Pick a one-trick tool

Best first builds wrap one prompt: paste-your-ingredients → three recipe ideas; paste-an-email → same email, professional tone; paste-notes → quiz questions; paste-a-job-ad → tailored cover letter outline. One input box, one button, one good prompt behind it. Resist the chatbot — single-purpose tools are easier to build, easier to prompt, and easier to charge for later.

Step 2 — Get a key and understand the cost

Create an API key in the Anthropic Console (console.anthropic.com) and load a few dollars of credit. API pricing is per-token (roughly: per word in and out) — personal-tool usage typically costs cents per day. Set a monthly spend limit in the console before anything else; it's the difference between an experiment and a surprise.

Step 3 — Version 1: personal tool, local only

Build a single HTML file: a tool where I paste [meeting notes] and click Generate to get [a formatted action-item list with owners and deadlines]. It calls the Anthropic Messages API (model: a current Claude model — use your knowledge of the API format) with my API key, which I'll paste into a password-type settings field that saves to localStorage. Show a loading state, render the response nicely, handle API errors with readable messages. IMPORTANT: add a visible warning in the UI that this file must never be uploaded to a public website because the key would be exposed. Complete file.

Open the file locally, paste your key in settings, and you have a working AI tool for an audience of one. For private use on your own machine, this is legitimately fine — and many of your tool ideas never need more than this.

Step 4 — The rule that protects your wallet

An API key in published frontend code is visible to anyone who clicks View Source — and bots scan for exactly that, then burn your credit on their workloads. The rule: the key lives on a server, never in the browser. The browser talks to YOUR endpoint; your endpoint adds the key and talks to Anthropic. That middle piece is called a proxy, and the free way to get one is a Cloudflare Worker.

Step 5 — Version 2: publishable, with a free Worker proxy

Write a Cloudflare Worker (free tier) that proxies my app's requests to the Anthropic Messages API. Requirements: the API key comes from a Worker environment secret, never the request; only accept POSTs from my domain (CORS locked to [yourdomain.com]); enforce a max input length; basic rate limiting per IP; pass through the model response. Then walk me through deploying it step by step in the Cloudflare dashboard — assume I've never used Workers — including where to set the secret. Finally, update my app's fetch call to hit the Worker URL instead of Anthropic directly, with no key anywhere in the frontend.

Worth knowingEven proxied, a public AI tool spends YOUR money per click. The Worker's rate limit and input cap are your seatbelts; the console spend limit is your airbag. Set all three before sharing the link anywhere.

Step 6 — Make the AI part actually good

Your tool's quality is its hidden system prompt. Iterate on it like a product: give it a role, an output format, three examples of ideal output, and explicit rules for bad input ('if the text isn't meeting notes, say so rather than inventing action items'). Test with hostile inputs — empty text, the wrong document, 'ignore your instructions'. An hour of prompt hardening is what separates a demo from a tool you'd put your name on.

Where this leads

Add Stripe Payment Links in front of it (that tutorial is on this site) and you've assembled the entire indie 'AI micro-SaaS' stack: static frontend, Worker proxy, metered API, payments — total fixed cost near zero. Most such products fail on distribution, not construction. But now construction is the part you've got.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.