The Homework
You Don't Need
Permission to
Build Anymore
Permission to
Build Anymore
The wall between "I have an idea" and "I built it" used to be made of code, money, and years of technical training. That wall is gone.
You don't need a developer. You don't need a budget. You don't need to know what HTML stands for.
You need to know what you want — and be willing to describe it out loud.
You need to know what you want — and be willing to describe it out loud.
Let's build something
→
AI BUILDER / START HERE
3 EXERCISES · ZERO CODE · LIVE URL IN 30 MIN
Exercise 1
Launch a Website
Design it. Drag it. Ship it.
Live URL in 15 minutes.
No GitHub needed.
Live URL in 15 minutes.
No GitHub needed.
claude.ai · netlify
Step 1 — Talk to Claude
"I run a [describe your work]. Build me a clean, professional website for it."
Claude will ask a few questions, then build the whole site and give you a file to download. Save it to your desktop and double-click it. It opens in your browser and looks exactly like a real website — because it is one.
Step 2 — Iterate until it's right
"I don't like the colors. Make the headline bigger. Add a section for [x]."
Tell Claude what you want to change — anything. It gives you a new file. Download it, double-click, see the update. This back-and-forth is the whole process. Most people get to something they love in 4–5 rounds.
Step 3 — Ship it
"Okay I have my file. How do I make it a real link I can share with people?"
Claude will suggest a free hosting site — usually Netlify or Vercel — and walk you through creating a free account and dropping your file there. They automatically give you a free web address that looks something like yoursite.netlify.app. No domain purchase needed. Send that link to anyone and they can open your site in a browser just like any other website.
→ Send your link to someone. That's a real website.
Exercise 2
Build a Search Engine
Pick a topic. Claude builds
the tool. Then you wire up
GitHub, an API key, Netlify.
the tool. Then you wire up
GitHub, an API key, Netlify.
claude.ai · github · anthropic console · netlify
Step 1 — Talk to Claude
"Build me a one-page search engine about [your topic]. When someone searches, it should research the web and write a short report with sources. Show me what the page looks like — the input box where someone types, and an example of what the report output looks like."
Claude will design the page and show you a sample report. Iterate on the design and the report format until both look right.
Step 2 — Make it real
"That's cool. How do I make it real so I can share it with people?"
Claude will walk you through it. First it'll set you up with GitHub — a free place to store your files online. Then it'll recommend a hosting site (Netlify or Vercel) that connects to GitHub and puts your site on the internet. It explains each step as you go. Just follow along.
Step 3 — Enhance it
"Okay the search works and the reports look great. How can I save reports if I run a lot of them? And can people download them?"
Claude will add a save and download feature — usually a button that exports the report as a PDF or text file, and a history panel that stores past searches in the session. This is where it clicks — Claude updates the site files directly and sends them to your hosted site. Making changes to a live site is just another conversation.
→ Share your live search engine.
Exercise 3
Make It Real for $10
Buy a domain. Configure DNS.
HTTPS. Your site is now
as real as any on the web.
HTTPS. Your site is now
as real as any on the web.
cloudflare.com · netlify
Step 1 — Talk to Claude
"How do I get a real domain and have my site fully linked up to it so it looks and feels like a proper website?"
Claude will walk you through buying a domain — usually on Cloudflare, which sells them at cost with no markup, around $10/year. It'll help you search for an available name and guide you through the purchase.
Step 2 — Link it to your site
"I got my domain. Now how do I match it up with my actual hosted site so it all works together?"
Claude will walk you through the DNS setup — a few simple settings in Cloudflare that tell the internet where your domain points. It tells you exactly what to type and where. This sounds technical but Claude makes it a step-by-step checklist. Most people are done in under 10 minutes.
Stuck? Screenshot and paste to Claude.
Step 3 — Confirm it's live
"Okay I think it's set up. How do I know if it's actually working?"
Type your new domain into a browser. You should see a padlock icon and your site load normally. Claude will tell you to wait a few minutes if it's not instant — that's normal. Once it loads, your site has a real address, a security certificate, and looks identical to any professional site on the internet.
→ Share your custom domain.
THE ONE RULE
Whenever you get stuck — on any screen, in any tool — take a screenshot, paste it into Claude, and say "I'm stuck. What do I do?" That single habit gets you through 90% of the moments where you'd normally give up.
Before We Start
You Don't Need to Know
How to Code
You just need to know what you want. That's the whole prerequisite.
0
Lines of code you need to write. Claude writes all of it. You describe what you want in plain English and iterate until it's right.
You open Claude and describe what you're trying to build. No templates. No tutorials. No stack to learn. You talk to it like you'd talk to a designer or developer you just hired.
"Can you help me build and launch a website?"
That's it. That's the starting point. Claude asks you what the site is for, who it's for, and what you want it to look like. Then it builds it. You look at it, tell it what to change, and it changes it. The entire process is a conversation.
What you need to bring
An opinion about what you want
"I want a clean, modern site for my consulting practice" is enough to start. You'll refine as you go.
Willingness to say "no, try again"
The best results come from people who aren't afraid to push back. "I don't like this" is valid feedback.
A free Claude account
Go to claude.ai. That's your design tool, your developer, and your deployment guide — all in one window.
The Mental Model
How It Actually Works
Three steps. All of them are conversations.
💬
Describe
Tell Claude what to build
→
🔁
Iterate
Refine until it's right
→
🚀
Ship
Push it live to the internet
You don't learn a framework. You don't watch a 12-hour course. You describe what you want, Claude builds it, and you tell it what to fix. The iteration is the learning.
The three tools you'll touch
Claude
Designs and builds your site. You talk to it.
GitHub
Stores your files. Think of it as a folder in the cloud.
Netlify
Turns your files into a live website with a URL.
~30min
From first prompt to live website. Most of that time is you deciding what you want it to look like — not technical setup.
What you won't need to do
You won't install anything. You won't open a terminal. You won't read documentation. You won't Google "how to center a div." Every time you get stuck, you screenshot what you see and paste it into Claude. That's the entire debugging process.
The Core Skill
Iteration Is the Whole Game
The difference between a bad result and a great one is 4–5 rounds of feedback.
Claude's first attempt will be decent. Not perfect. That's expected. The skill isn't writing a perfect prompt — it's knowing how to push back and refine. Think of it like working with a designer. You wouldn't accept the first draft. You'd say what you like, what you don't, and what's missing.
Things you'll actually say
"I don't like this. Make it cleaner."
"The headline is weak. Make it punchier."
"Can you make this look more like [competitor's site]?"
"Add a section for pricing. Three tiers."
"This is broken on mobile — here's a screenshot."
5×
Average iterations from "meh" to "great." Each round takes 30 seconds of feedback from you and 15 seconds of building from Claude.
The screenshot trick
Whenever you're stuck — on any screen, in any tool — take a screenshot, paste it into Claude, and say "I'm stuck. What do I do?" Claude can see what you see. This one habit will get you through 90% of the moments where you'd normally give up.
You're ready. Let's build something.
The Case for Building
Why Build Your Own
When Great Tools Already Exist?
Because using the tools is good. Understanding how they work is power.
The AI tool market has exploded. There are brilliant, polished products that can research, write, analyze, and automate — and you should absolutely use them. Some are broad and general-purpose. Some are built for your specific industry. Here's a sample of what's out there right now.
General-purpose AI tools
Claude
Research, writing, analysis, coding. The tool you're learning to build with.
ChatGPT
Broadest consumer adoption. Text, images, voice, plugins.
Perplexity
AI-native search engine. Every answer comes with live sources.
Whisper Flow
Real-time voice transcription and meeting intelligence.
Otter.ai
Automated meeting notes, summaries, and action items.
Gemini
Google's AI. Deep integration with Docs, Gmail, and Search.
Industry-specific AI tools
These tools are real. They're good. You should use the ones that fit your work. But here's the thing —
So why build your own?
Because when you build a search engine from scratch — even a simple one — you see inside the machine. You understand how every tool on this page actually works.
Harvey didn't start as an $8 billion company. It started as a search box connected to an API that could read legal documents. Abridge started as a microphone connected to a model that could summarize speech. Betterment started as an interface connected to an algorithm that could allocate assets.
Every one of these tools — at its core — does the same three things your search engine will do: take an input, send it to an AI, and present the output. That's the foundation. When you build it yourself, you see the foundation.
🔧
It's like pulling a car engine apart and putting it back together. You don't need to become a mechanic. But once you've done it, you'll never look at a car the same way again. You'll know what's under the hood of every AI tool you use.
What you'll understand after building it
How AI tools retrieve information
You'll see how a query goes from a text box to a live web search to a set of sources — and why some tools give better answers than others.
How AI tools reason and form a perspective
You'll watch a model take raw search results and synthesize them into analysis — weighing sources, spotting contradictions, forming a point of view.
How AI tools present their output
You'll control the format, tone, and structure of the response. That's when you realize every polished AI product is just doing this — with better styling.
What these tools can and can't do
You'll see the boundaries — hallucinations, source quality, reasoning limits. That makes you a smarter user of every AI tool you'll ever touch.
Use the best tools available. But build one yourself — so you understand what you're using, what it costs, how it thinks, and where it breaks. That's the difference between a consumer and a builder.
Exercise 1
Redesign & Launch Your Website
Use AI to design it. GitHub to store it. Netlify to ship it.
What's Happening
What You Say to Claude
Design your website
Claude generates a complete website as an HTML file based on your description. You iterate on design, content, and layout until it's right.
"I run a [type of business]. Here's my current site: [URL]. Redesign it."
"Make the headline bolder and add client testimonials."
"Add a footer with terms, privacy, and a contact form."
"I don't like this — try something more modern."
"Make the headline bolder and add client testimonials."
"Add a footer with terms, privacy, and a contact form."
"I don't like this — try something more modern."
Store it in GitHub
You create a free GitHub account and upload your file to a repository. This is where your site lives.
"Great, I like this. What do I do next?"
"Walk me through that step by step."
"Walk me through that step by step."
Stuck? Screenshot what you see and paste it in.
Launch it on Netlify
You connect GitHub to Netlify, which gives you a live URL. Your site is now on the internet.
"Done. What do I do next?"
"Walk me through that step by step."
"Walk me through that step by step."
Stuck? Screenshot what you see and paste it in.
Share link to your site.
Exercise 2
Build a Topic Search Engine
Pick a niche topic. Build a one-page site that searches and generates reports on it using AI.
This exercise introduces something new: an API key. Don't worry — Claude will ask you about it, explain what it is, and walk you through every step. Here's how the conversation actually flows.
What's Happening
What You Say to Claude
Describe what you want
You tell Claude you want a search engine on a topic. Claude builds the front end — a page with a search box and a results area.
"I want to build a one-page search engine about [your topic]. When someone searches, it should research the web and write a short report with sources."
"Make the output look professional."
"Make the output look professional."
Then Claude will ask you something
C
"To make this work, your site needs an API key — that's how it talks to the AI. Do you have an Anthropic API key, or do you need help getting one?"
"I don't know what that is."
C
Claude explains all of this in plain language:
?
What is it?
A password that lets your website use AI. It's a long string of characters that proves you have permission to use the Anthropic API.
→
How do I get one?
Go to console.anthropic.com, create a free account, and generate a key. Claude walks you through every click.
⚙
Where does it go?
In Netlify's environment variables. It's a settings page where you paste the key so your live site can use it — but no one visiting the site can see it.
↻
How does it work?
When someone searches on your site, your code sends the query to Anthropic's servers with your key. Anthropic checks the key, runs the AI, and sends back a response. You pay a tiny amount per search — usually fractions of a cent.
What's Happening
What You Say to Claude
Launch it
Same as Exercise 1. Your files go to GitHub, GitHub connects to Netlify. Claude tells you where to paste the API key in Netlify's settings. You get a live URL.
"I have the key. What do I do with it?"
"Where in Netlify do I put this?"
"Walk me through that step by step."
"Where in Netlify do I put this?"
"Walk me through that step by step."
Stuck? Screenshot what you see and paste it in.
Share link to your search engine.
Exercise 3
Make It Real for $10
Buy a custom domain. Configure it. Your site is now as legit as any on the internet.
Right now your site lives on a Netlify URL like your-site.netlify.app. That works, but it's not yours. In this exercise, you'll spend about $10 to buy a real domain and connect it — with HTTPS, DNS, and everything configured properly. Claude walks you through every screen.
$10
Average cost of a .com domain on Cloudflare. No markup, no upsells. You own it for a year.
What's Happening
What You Say to Claude
Pick and buy your domain
You create a free Cloudflare account and search for an available domain. Cloudflare sells domains at cost — no markup, no hidden fees. You pick a name and buy it.
"I want to buy a custom domain for my site. Walk me through how to do this on Cloudflare."
"Is [name].com available?"
"What's the difference between .com, .co, and .io?"
"Is [name].com available?"
"What's the difference between .com, .co, and .io?"
Stuck? Screenshot what you see and paste it in.
Configure DNS in Cloudflare
DNS is what tells the internet where your domain points. You'll add a couple of records in Cloudflare that point your new domain to your Netlify site. Claude tells you exactly what to type.
"I bought the domain. Now what?"
"What DNS records do I need to add?"
"I'm in the Cloudflare dashboard — here's what I see."
"What DNS records do I need to add?"
"I'm in the Cloudflare dashboard — here's what I see."
Stuck? Screenshot what you see and paste it in.
Connect the domain in Netlify
You tell Netlify about your custom domain. Netlify handles the SSL certificate automatically — that's the padlock icon that makes your site secure (HTTPS).
"Now walk me through the Netlify side."
"It says 'awaiting external DNS' — is that normal?"
"How do I know when it's working?"
"It says 'awaiting external DNS' — is that normal?"
"How do I know when it's working?"
Stuck? Screenshot what you see and paste it in.
Verify it's live and secure
You visit your new domain in a browser. You should see HTTPS, your site loading, and no warnings. It can take a few minutes for DNS to propagate — Claude will explain what's happening if it's not instant.
"I'm going to my domain but it's showing a blank page."
"How long does this usually take?"
"It's working! Is there anything else I need to configure?"
"How long does this usually take?"
"It's working! Is there anything else I need to configure?"
Stuck? Screenshot what you see and paste it in.
Share your live custom URL.
THE PATTERN / 27 TOOLS DECOMPOSED
EVERY TOOL IS THE SAME THREE LINES OF CODE
① INPUT
What the user types
or uploads
or uploads
visible to the user
+
② SYSTEM PROMPT — the "secret sauce"
Hidden instructions the user never sees
"You are a [expert role]. When given [input], you must [task]. Always format output as [format]. Never [constraint]..."
← THIS IS THE PRODUCT. The entire moat is a paragraph of instructions.
+
③ LLM
Claude, ChatGPT,
Gemini, Llama…
Gemini, Llama…
rented by the token
=
④ OUTPUT
Formatted result
returned to user
returned to user
polished, branded
The Takeaway
Every tool on this page is a system prompt wrapper on a rented LLM. The moat is the instructions — the domain expertise baked into column ②.
What You're Building Today
The exact same thing. Input box + your system prompt + API call to Claude. The difference between your site and Perplexity is UX polish and marketing spend.
TOOL · CATEGORY · VALUATION
① INPUT
② SYSTEM PROMPT (what they hide)
③ LLM
④ OUTPUT
💹 Finance & Markets
Harvey
$8B valuation
Legal · Finance
Legal question or contract document upload
"You are a senior attorney. Analyze this document for legal risk, identify key clauses, and draft a response memo. Cite specific sections. Never speculate beyond the document."
One of: Claude, GPT, Gemini…
Legal memo with cited clauses and risk flags
AlphaSense
$4B valuation
Market Research
Analyst query about a company or sector
"Search earnings call transcripts, SEC filings, and broker reports. Extract relevant passages. Identify trend signals and management sentiment shifts. Format with source citations."
One of: Claude, GPT, Gemini…
Sourced market intelligence brief with citations
Kensho
Acq. $550M (S&P)
Financial Intelligence
Natural language question about market events
"Query structured financial databases. Correlate macro events with asset price movements. Return statistical relationships with confidence levels. Cite data sources."
One of: Claude, GPT, Gemini…
Quantitative answer with data tables and event correlation
Bloomberg GPT
Internal / Bloomberg LP
Financial Data
Financial query within Bloomberg terminal
"You have access to real-time Bloomberg financial data. Answer questions using current market data, news, and filings. Use financial professional terminology. Format for trading desk use."
One of: Claude, GPT, Gemini…
In-terminal financial summary with live data
Glean
$4.6B valuation
Enterprise Search
Employee question about internal company knowledge
"Search connected internal sources: Slack, Drive, Notion, email, Confluence. Return the most relevant passages with source links. Synthesize a direct answer. Only use internal data."
One of: Claude, GPT, Gemini…
Internal answer with source links and excerpts
⚖️ Legal
Casetext / CoCounsel
Acq. $650M (Thomson)
Legal Research
Case research question or legal issue description
"Search case law databases. Find relevant precedents, holdings, and dissents. Rank by relevance to user's jurisdiction and issue. Format as a research memo with Bluebook citations."
One of: Claude, GPT, Gemini…
Case research memo with cited precedents
Ironclad
$3.2B valuation
Contract Intelligence
Contract PDF uploaded for review
"Review this contract against our standard playbook. Flag non-standard terms, identify risk clauses, suggest redline edits. Use conservative legal interpretation. Return tracked changes."
One of: Claude, GPT, Gemini…
Redlined contract with risk flags and edit suggestions
🏥 Healthcare
Abridge
$850M valuation
Clinical Documentation
Doctor-patient conversation audio recording
"Transcribe this clinical encounter. Extract: chief complaint, history of present illness, assessment, and plan. Format as a SOAP note. Use ICD-10 compatible terminology. Flag any safety concerns."
One of: Claude, GPT, Gemini…
Structured SOAP note ready for EHR entry
Suki
$165M raised
Voice Documentation
Doctor voice dictation after patient visit
"Convert this dictated voice note into a structured clinical note. Match the physician's documentation style. Map to standard medical terminology. Pre-fill EHR fields where possible."
One of: Claude, GPT, Gemini…
EHR-ready clinical note with structured fields
Nabla
$45M raised
Ambient AI
Ambient audio of clinical consultation
"Listen passively to this consultation. Identify clinically relevant content. Ignore small talk. Produce a concise clinical summary with diagnosis and treatment plan. Never infer beyond what was said."
One of: Claude, GPT, Gemini…
Ambient summary with diagnosis and treatment notes
💻 Code & Development
GitHub Copilot
$1.5B+ ARR
Code Completion
Code file context + cursor position
"You are a code completion engine. Given the file context and cursor position, predict and complete the next logical block of code. Match the existing code style, variable naming, and patterns exactly."
One of: Claude, GPT, Gemini…
Inline code completion inserted at cursor
Cursor
$9B valuation
AI Code Editor
Natural language instruction + full codebase context
"You have full access to this codebase. Make the requested change. Find all affected files. Apply the edit consistently. Do not break existing functionality. Show a diff of changes."
One of: Claude, GPT, Gemini…
Multi-file code diff applied to the codebase
Replit Ghostwriter
$1.16B valuation
Code Generation
Natural language description of desired feature
"Generate working code for this feature in the language and framework of the active Replit project. The code must run immediately. Include error handling. Add inline comments for clarity."
One of: Claude, GPT, Gemini…
Runnable code block with comments
📈 Sales & Revenue
Gong
$7.25B valuation
Revenue Intelligence
Recorded sales call audio or transcript
"Analyze this sales call. Extract: talk ratio, objections raised, next steps committed, deal risks, and coaching moments. Compare rep behavior to top-performer benchmarks. Flag risk signals."
One of: Claude, GPT, Gemini…
Deal scorecard + coaching insights + next steps
Salesloft
$2.3B valuation
Sales Engagement
Prospect name, company, role, recent news
"Write a personalized cold outreach email for this prospect. Reference their recent company news. Connect their role's likely pain points to our product's value prop. Keep under 80 words. One clear CTA."
One of: Claude, GPT, Gemini…
Personalized outreach email with subject line
⚡ Productivity & Meetings
Notion AI
$10B valuation
Knowledge Management
Existing page content + user action request
"You are editing a Notion document. Perform the requested action: summarize, expand, rewrite, extract action items, or translate. Match the document's existing tone. Keep Notion formatting markup."
One of: Claude, GPT, Gemini…
Edited document block returned inline
Otter.ai
$100M+ raised
Meeting Intelligence
Meeting audio from Zoom, Teams, or Google Meet
"Transcribe this meeting verbatim. Then produce: a 5-bullet executive summary, all action items with owners and deadlines, key decisions made, and unresolved questions. Attribute statements to speakers."
One of: Claude, GPT, Gemini…
Full transcript + summary + action item list
✍️ Writing & Marketing
Grammarly
$13B valuation
Writing Assistant
Text selection with user's writing context
"Analyze this text for grammar, clarity, tone, and engagement. Suggest specific edits. Score the writing. Flag passive voice, wordiness, and unclear antecedents. Match the user's stated communication goal."
One of: Claude, GPT, Gemini…
Inline suggestions with explanations and score
Jasper
$1.5B valuation
Marketing Copy
Product info, target audience, and tone brief
"Write marketing copy for this product in the specified brand voice. Generate 3 variants. Optimize for the selected channel: email, ad, landing page. Use AIDA framework. Include a CTA. Keep brand guidelines."
One of: Claude, GPT, Gemini…
3 copy variants formatted for selected channel
Copy.ai
$2.9M ARR
Ad Copy
Product name, features, and target customer
"Generate 10 ad copy variants for this product. Vary the hook: benefit-led, curiosity, fear-of-missing-out, social proof, and direct offer. Optimize for Facebook/Google character limits. Include emoji variants."
One of: Claude, GPT, Gemini…
Ad copy variants by format, ready to publish
🔬 Research & Search
Perplexity
$9B valuation
AI Search
Search query in natural language
"Search the live web for this query. Find the 5 most authoritative sources. Extract relevant passages. Synthesize a direct, cited answer. Do not speculate beyond the sources. Show source URLs."
One of: Claude, GPT, Gemini…
Cited answer with inline source links
Elicit
$20M raised
Research Synthesis
Research question or hypothesis
"Search academic paper databases. Find studies relevant to this question. Extract: methodology, sample size, findings, limitations. Synthesize across papers. Flag contradictory findings. Use academic citation format."
One of: Claude, GPT, Gemini…
Literature review table with synthesized findings
👥 HR & Recruiting
HireVue
$350M+ raised
Candidate Assessment
Video interview recording + job description
"Evaluate this candidate against the defined competency framework. Score: communication clarity, problem-solving approach, relevant experience signals. Do not assess appearance. Return structured scorecard."
One of: Claude, GPT, Gemini…
Structured competency scorecard with rationale
Textio
$125M raised
HR Writing
Draft job posting or performance review text
"Analyze this job posting for exclusionary language patterns. Identify phrases that statistically reduce applications from underrepresented groups. Suggest inclusive alternatives. Score overall language quality."
One of: Claude, GPT, Gemini…
Annotated rewrite with inclusion score
Exhibit
The API Key — And Why
It Changes Everything
One string of characters turns a static page into something that can think, search, and write.
What it is
An API key is a credential — a long string of characters like sk-ant-api03-7xK9... — that gives your application permission to use someone else's AI. It's how your website talks to a model like Claude, GPT, or Gemini without that model living on your computer.
Think of it like a credit card for intelligence. You don't build the AI. You don't host it. You just call it when you need it, and pay a fraction of a cent per use.
How it works
🔍
User searches
on your site
→
🔑
Your key
authenticates
→
🧠
AI processes
thinks + writes
→
📄
Result returned
to your site
This all happens in seconds. Your site sends a request with your key attached. The AI provider verifies the key, runs the model, and sends back a response. Your site displays it. To your user, it feels like your site is the AI.
What a single API key unlocks
An API key doesn't just let you ask questions. It opens up three layers of capability that didn't exist for individual builders two years ago.
Search
→ Reason
→ Present
→ Reason
→ Present
This is what your $10/month site can do. The same pipeline that powers enterprise research tools — available to anyone with an API key and a text box.
The major API providers
There are a handful of companies that offer AI through API keys. Each has different strengths. Here's the landscape as it stands today.
~$0.003
Average cost per search on your site using Claude Sonnet with web search. A thousand searches costs about $3. This is not enterprise pricing — it's accessible to anyone.
The bottom line
Two years ago, building a tool that could search the web, reason about what it found, and present a polished report required a team of engineers, a data pipeline, and six figures of infrastructure. Today it requires an API key and a conversation with Claude.
The API key is the unlock. Everything else is just telling the AI what to do.
EXHIBIT / UNDER THE HOOD
Once you've built your site
and search engine, this will
make a ton of sense.
and search engine, this will
make a ton of sense.
① THE REQUEST — what happens when someone hits search
🖥️
Browser
User types a query into your search box and hits enter
"latest Fed rate decision"
→
📄
Your HTML/JS
Your code packages the query and fires it to the API with your key attached
fetch("/api", {"{"}query, key{"}"})
→
☁️
Netlify / Vercel
Hosts your files. Runs a serverless function that forwards the request. Keeps your API key hidden.
env: ANTHROPIC_API_KEY
→
🔑
Anthropic API
Verifies your key. Authenticates the request. Routes it to the model. Tracks usage and billing.
sk-ant-api03-...
→
📋
Context Window
Everything the model sees — assembled in order:
① SYSTEM PROMPT
② USER QUERY
③ RETRIEVED SOURCES
② INSIDE THE MODEL — the RAG pipeline
Step 1
Retrieve
The model calls a web search tool. It fires multiple queries against live indexes, pulls the most relevant pages and passages, and loads them into the context window as raw source material.
Sources: news, SEC filings, research papers, databases — anything publicly indexed
→
Step 2
Reason
The model reads all retrieved sources simultaneously inside the context window. It weighs credibility, resolves contradictions, extracts signal from noise, and synthesizes a point of view. This is the step no search engine performs.
This is why it feels like an analyst, not a lookup tool
→
Step 3
Generate
The model writes the response one token at a time — each word predicted from everything that came before it in the context window. Billions of parameters, trained on human text, distilled into a single output stream.
~¾ of a word per token · billed per input + output token
→
Step 4
Format
Your system prompt instructs the model how to structure output — headers, citations, bullet points, length, tone. The raw generation is shaped into exactly the format your application needs before it's returned.
Output: JSON string → your JS renders it as HTML
③ THE RESPONSE — the journey back to your user
📦
JSON Response
Anthropic wraps the output in a JSON object and sends it back to your server function
{"{"}content: [{"{"}type:"text", text:"..."{"}"}]{"}"}
→
⚙️
Server Function
Your Netlify function extracts the text from the JSON and passes it back to the browser as a clean response
→
✨
Your JavaScript
Renders the text as formatted HTML — headers, links, citations — and injects it into the results panel on the page
→
🎉
User sees a report
A polished, sourced, formatted report appears in their browser. It looks like a product. It is one. Yours.
CONCEPTS THAT NOW MAKE SENSE
Token
A chunk of text — roughly ¾ of a word. The model reads and writes in tokens. You're billed per token. "Hello world" ≈ 3 tokens.
Context Window
The model's working memory — everything it can see at once. System prompt + retrieved sources + conversation all live here. Bigger = more expensive.
RAG
Retrieval Augmented Generation. The technical name for what your search engine does — retrieve live sources, then generate a response grounded in them. Every serious AI tool uses this pattern.
Serverless Function
A tiny piece of code that runs on Netlify's servers — not yours. It's what keeps your API key hidden. Your browser never sees the key directly.
EXHIBIT / CLAUDE AI VS CODE
Same prompt. Same AI.
Two different modes.
Two different modes.
One runs in your browser, one runs in your terminal. Both will have a conversation with you — if you ask. The difference is how much you want Claude to take the wheel.
More similar than you'd think
Claude and Claude Code are the same AI. The conversation, the reasoning, the quality — identical. What changes is the environment you're working in and how much control you want to hand over.
When each one wins
Claude.ai is better for setup and configuration — you can paste screenshots directly into the chat, which is invaluable when you're staring at an error screen and don't know what to type.
Claude Code pulls ahead once you're up and running. It connects directly to your folders, writes and updates files in place, and pushes to your live site. Changes feel seamless instead of manual.
Claude Code pulls ahead once you're up and running. It connects directly to your folders, writes and updates files in place, and pushes to your live site. Changes feel seamless instead of manual.
One thing you'll learn the hard way
Both tools have a context window — a limit to how much of a conversation they can hold at once. You'll hit it eventually. When you do, managing it is significantly easier in Claude Code than in Claude.ai. Worth knowing before it happens.
The Prompt — sent to both
"I want to build a search engine so that any town in New Zealand I type in, I get the best restaurants, best bars, and best hikes listed for me."
claude.ai
Chat
I want to build a search engine so that any town in New Zealand I type in, I get the best restaurants, best bars, and best hikes listed for me.
Love this. Quick question before I start building — do you want something polished you could share with people, or are you just trying to get a working version first to test the idea?
Both are totally doable, but the approach is a bit different.
Just get something working I can share. I can make it pretty later.
Perfect. Here's what I'd do: a single HTML file, no backend needed, that calls Claude's API directly with a system prompt that tells it to return restaurants, bars, and hikes for whatever town you type in. You drop the file on Netlify and it's live.
Here's the search function:
javascript
async function searchTown(townName) {
const geo = await geocode(townName + ', NZ');
const [restaurants, bars, hikes] =
await Promise.all([
searchPlaces(geo, 'restaurant'),
searchPlaces(geo, 'bar'),
searchTrails(geo)
]);
return { restaurants, bars, hikes };
}
Want me to write the whole file so you can just drag it into Netlify?
Yes please. But I don't have an API key and I'm not sure what that is. And how do I actually share this with people?
No problem — I'll walk you through the whole thing. Here's what we're going to do:
Step 1 — Get your API key. An API key is basically a password for your app — it's what lets your search engine talk to Claude. You get one from Anthropic's console in about two minutes. I'll show you exactly where to go and what to click.
Step 2 — I'll build the site. Once you have the key, I'll write the whole thing and we'll drop the key in safely so it never shows up in public.
Step 3 — Load it into Netlify. Netlify is a free hosting service. You drag your file in, they give you a real link — something like nz-search.netlify.app — and you can send it to anyone. That's a real site.
That sounds great. Let's start.
Open a new tab and go to console.anthropic.com. Create a free account, then click API Keys in the left sidebar, hit Create Key, give it any name, and copy the key it shows you. Paste it here when you're ready and we'll move to step 2.
Got it, I have my key.
Here's your site. Download it — but don't put your key in the file. We're going to store it as an environment variable in Netlify instead. That way it never appears in your code and never gets exposed publicly.
OK I downloaded it. What do I do with it?
Now we put it on Netlify so it's a real link you can share:
1. Go to netlify.com, create a free account, and drag your file onto the dashboard to deploy
2. Go to Site settings → Environment variables and add a new variable — name it ANTHROPIC_API_KEY, paste your key as the value
3. Your serverless function reads it from there — the key never appears in your code, never ships in the file, never gets exposed in the browser
Netlify gives you a live URL like nz-search.netlify.app — send that to anyone and they can use your search engine.
Terminal
Claude Code
~/nz-search $ claude
I want to build a search engine so that any town in New Zealand I type in, I get the best restaurants, best bars, and best hikes listed for me.
Claude
Before I start — do you want this pulling from live APIs, or a curated dataset? And are you deploying to Netlify or just running it locally first?
~/nz-search $
I'm not sure — I don't have an API. Can you help me with that? And I'm not exactly sure what an API is.
Claude
No problem at all — an API is basically a key that lets your app talk to another service, like Google Maps or Anthropic. Think of it like a password that unlocks someone else's data. I'll walk you through getting everything set up step by step: which APIs you need, how to sign up for them (most are free to start), where to paste the keys, and how to keep them secure. You don't need to understand all of it upfront — we'll go one step at a time. Ready?
~/nz-search $
Yes, let's do it.
Creating
nz-search/ project structure...
Write → index.html
<!DOCTYPE html>
<input id="town" placeholder="Enter a NZ town...">
<button onclick="search()">Search</button>
<div id="restaurants"></div>
<div id="bars"></div>
<div id="hikes"></div>
Write → app.js
async function search() {
const town = document.getElementById('town').value;
const res = await fetch(`/api/search?q=${town}`);
const data = await res.json();
render('restaurants', data.restaurants);
render('bars', data.bars);
render('hikes', data.hikes);
}
Write → api/search.js
export default async (req) => {
const geo = await geocode(req.query.q + ', NZ');
const [restaurants, bars, hikes] =
await Promise.all([
places(geo, 'restaurant'),
places(geo, 'bar'),
trails(geo)
]);
return { restaurants, bars, hikes };
};
Running npm install
added 12 packages in 1.8s
Running npm run dev
Local: http://localhost:3000
✓ Your NZ search engine is running at localhost:3000
3 files created · search input + API + render
~/nz-search $
OK the files are here. What do I do now to get people to see it?
Claude
Two steps. First we push your files to GitHub — that's basically an online home for your code, free, keeps everything versioned so you can always go back. Then we connect it to Netlify, which is a free hosting service that turns your code into a real URL anyone can visit. Every time you make a change and push, it redeploys automatically. I'll walk you through both right now.
~/nz-search $
Yes let's do it.
Claude
On it.
Running
git init
Initialized empty Git repository in ~/nz-search/.git/
git add .
git commit -m "initial build — nz town search engine"
[main (root-commit)] 3 files changed
gh repo create nz-search --public --push
✓ Created repository on GitHub
→ github.com/you/nz-search
Claude
Repo is live. Now go to Netlify → Add new site → Import from Git, connect your GitHub, and pick nz-search. Then go to Site settings → Environment variables and add ANTHROPIC_API_KEY with your key. Deploy. Done.
~/nz-search $
It's live. I want to add a map view. Where do I start?
Claude
I'll add a Mapbox embed that pins each result. You already have the lat/lng from the geocoder — it's just a render layer on top. Want me to do it now?
Claude.ai — use this when
You're figuring out what to build. You want to think out loud, ask questions, iterate on the idea before touching any tools. The conversation is the work.
Claude Code — use this when
You're ready to build and want Claude in your actual codebase. Ask it an open-ended question first and it'll think with you — then it writes files, runs commands, and ships.