Build Your Own Tools — Built with Claude

What "AI tool" means here

Not a giant AI app. Just a small, single-purpose web tool that:

Has a form where you (or your client) put in some inputs
Sends those inputs to Claude with a carefully written prompt
Shows you Claude's response — formatted nicely, maybe downloadable as PDF or markdown

That's it. The tools I've built and used are all that simple. They live as static sites on Netlify, with one serverless function that talks to the Claude API.

Examples of what to build

Workshop content generator

Input: workshop topic, audience, duration. Output: a full lesson plan, talking points, exercises, slide outline. Built one of these for a yoga studio that runs themed workshops; the studio owner punches in "Inner Child Healing, 90 min, beginners" and gets a polished plan in 30 seconds.

Discovery brief synthesizer

Input: client form responses (paste from Google Form). Output: a draft strategy doc and brand guide. Speeds up the discovery → strategy step that's covered in Chapter 01.

Social caption pack

Input: blog post URL or pasted text. Output: 5 variations of social captions for Instagram, LinkedIn, and X. Different lengths, different tones.

Sitemap-from-goals

Input: client's goals, audience, and existing pages (if any). Output: a recommended sitemap with page-by-page goals and suggested CTAs. Useful for the planning phase from Chapter 02.

Color palette from a photo

Input: an uploaded photo. Output: a 5-color palette with hex codes pulled from the image, plus a suggested type pairing. Useful for kicking off brand work.

The architecture

Every tool above has the same shape:

[browser]
HTML form  ────────────►  JavaScript fetch ─────────►  [netlify]
                                                       Serverless function
                                                       │
                                                       ▼
                                                       [anthropic]
                                                       Claude API
                                                       │
                                                       ▼
HTML output  ◄────────  JavaScript handler  ◄─────────  Response (text, JSON)

Three files, basically: an index.html with the form and the result area, a script.js that wires up the form to the function, and a functions/generate.js that calls Claude.

The recipe

Step 01

Pick a workflow you actually do repeatedly

The best tools come from your real work. If you've built three brand guides this year, build a brand guide generator. If you're constantly writing social captions, build a caption tool. Don't try to be everything to everyone. One workflow, done well.

Step 02

Sketch the input and output

On paper or in a doc: what fields does the form have? What does the output look like? Do you want raw text, a styled HTML preview, a downloadable PDF? The clearer this is up front, the easier the build.

Step 03

Get an Anthropic API key

Go to console.anthropic.com, create an account if you don't have one, generate an API key. Add a small amount of credit ($5–10 is enough to test). Treat the key like a credit card — never put it in code that gets pushed to GitHub.

Step 04

Build the front end with Claude Code

Run claude in a new project folder and prompt:

"Build a single-page tool. Form on top with fields [list your fields]. Below the form, a result area that shows the AI's response formatted nicely. When the form submits, call a Netlify function at /api/generate with the form data. Show a loading state while waiting. Display the result with markdown formatting."

Claude will scaffold the HTML, CSS, and front-end JS for you. Style it to match your brand if you want.

Step 05

Build the serverless function

In your project, create a folder called netlify/functions/ and inside it a file generate.js. Ask Claude:

"Write a Netlify serverless function at netlify/functions/generate.js that receives a POST with the form data, sends it to the Anthropic Claude API with this system prompt: [paste your prompt template], and returns Claude's response. Use the official Anthropic Node SDK. Read the API key from the ANTHROPIC_API_KEY environment variable."

Claude will write the function. The skeleton looks roughly like this:

// netlify/functions/generate.js
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

export default async (req) => {
  const { fields } = await req.json();

  const message = await client.messages.create({
    model: "claude-sonnet-4-6",
    max_tokens: 2000,
    system: "You are a [role]. Given inputs, produce [output format].",
    messages: [{
      role: "user",
      content: `Inputs:\n${JSON.stringify(fields, null, 2)}`
    }],
  });

  return new Response(
    JSON.stringify({ result: message.content[0].text }),
    { headers: { "Content-Type": "application/json" } }
  );
};

You'll also need a package.json with the Anthropic SDK as a dependency. Claude Code can scaffold that too.

Step 06

Wire up the API key as an environment variable

Locally: create a .env file in the project root with ANTHROPIC_API_KEY=sk-.... Add .env to your .gitignore immediately so it never gets committed.

On Netlify: in your site's settings → Environment variables → add ANTHROPIC_API_KEY with your key. Netlify will inject it into the function at runtime.

Step 07

Test locally with the Netlify CLI

Install the Netlify CLI:

npm install -g netlify-cli

Then in your project folder:

netlify dev

This runs your site locally with the function active. Test the form. If something breaks, ask Claude to debug — it can read the function and the front-end code.

Step 08

Deploy

Push to GitHub. Connect to Netlify like you would for a static site (see Chapter 09). Netlify auto-detects the function and deploys it.

Visit your live URL. Submit the form. Get the AI-generated output back. You've shipped an AI tool.

Cost reality

For a tool you and a few clients use, costs are tiny:

Anthropic API: Claude Sonnet runs around $3 per million input tokens and $15 per million output tokens. A typical tool generates a 500-token response from a 200-token prompt. That's ~$0.0001 per use — about a hundredth of a penny. You'd need to run the tool 10,000 times to hit $1.
Netlify functions: Free tier includes 125,000 function invocations per month. Most personal tools never hit that.
Hosting: Same as a static site — free on Netlify.

The trap is leaving the tool publicly accessible without rate-limiting. If a bot finds your form and starts hammering it, your Anthropic bill can climb. Add at least basic protection: require the user to enter a code, gate the tool behind Netlify's auth, or rate-limit by IP.

Resources to learn more

docs.anthropic.com — Claude API documentation. Skim the "messages" section first.
Netlify Functions docs — getting started with serverless functions on Netlify.
@anthropic-ai/sdk on GitHub — the official Node/TypeScript SDK.

If any of this feels too technical, ignore this chapter for now. You don't need to build tools to use this whole playbook. But once you've done a few sites and you start noticing the patterns in your own work, this is where the leverage compounds.

What's next?

Nothing. You've finished the playbook. Go build something.

If anything in here helps you ship a site you're proud of, I'd love to hear about it — open an issue on the repo and tell me what you built.

Build Your Own Tools.