// workshop
From idea to working prototype
Build your very first web app, one step at a time. You say what you want, and Claude writes the code for you.
By the end you will have something that works, a web address you can send to anyone, and a safe backup of it.
Set aside about 45 minutes. You need a laptop for this one, not a phone.
Get Claude
Claude is the assistant that does the building. Go to claude.ai and make an account.
Choose the paid plan at $20 a month. The free one runs out partway through a project.
Download the program Claude works inside
Claude does its work inside a free program called VS Code. Think of it as the desk Claude sits at.
Go to the site below and click the big download button. Open the file when it finishes and follow the installer.
An add-on like this is called an extension. It just means a piece you bolt on to add a feature.
Add Claude to it
Open VS Code. Down the left edge is a column of small icons. Click the one made of four squares.
A search box appears at the top. Type claude, then click Install on the one from Anthropic.
Sign in to Claude
Look at the top right of the window. A new orange starburst icon has appeared. Click it.
Claude opens in a panel and asks you to sign in. Use the same account you made a few minutes ago.
Say hello
The Claude panel has a box to type in. Type hello and press Enter.
If Claude answers you, everything is working, and the setup is done.
hello
On a Mac, right-click the desktop and choose New Folder. On Windows, right-click and choose New, then Folder.
Make a folder for your work
Go to your desktop and make a new folder. Name it claude-workspace.
This is where your app will live. Everything Claude builds goes in here.
Open that folder in VS Code
Back in VS Code, click Open on the welcome screen, then pick the claude-workspace folder you just made.
If the welcome screen is gone, use the File menu at the top and choose Open Folder instead.
The more you say, the better it comes out. Mention who it is for and what it should look like.
Ask Claude to build something
Pick something below, or type your own. Then copy the line and paste it into the Claude panel.
Claude writes the files and shows you what it is doing as it goes. It can take a few minutes, so let it finish.
help me build a birthday countdown page
Give Claude your own material
If you want Claude to use your own photos, notes, or spreadsheets, drag those files into the claude-workspace folder.
Then mention them in the chat, for example: use the photos in this folder.
Make a free Vercel account
Right now your app exists only on your own computer. Vercel is the service that puts it online so other people can open it.
Go to vercel.com and sign up. It is free to start.
Let Claude set up the connection
Go back to the Claude panel and paste in the line below.
Claude asks you to log in to Vercel along the way. Follow whatever it asks and say yes.
Help me set up Vercel cli: https://vercel.com/docs/cli
cli is the name of the helper tool Claude uses to talk to Vercel on your behalf. You never have to touch it yourself.
Put it on the internet
Paste this into the Claude panel, using the name of the thing you built.
When it finishes, Claude hands you a web address. Open it. That is your app, live, and anyone you send the link to can use it.
help me publish my app via vercel cli
Make a free GitHub account
GitHub keeps a copy of your project online, along with every version of it. If your laptop dies, your work survives.
Go to github.com and sign up. The free account is plenty.
Let Claude set up the backup tool
Paste this into the Claude panel, then follow the login steps it gives you.
help me install github cli: https://github.com/cli/cli
A repository is just what GitHub calls a saved project.
Save your project
Paste this in, and Claude does the rest.
It will ask whether you want it public, meaning anyone can look at it, or private, meaning only you. Either is fine. Pick private if you are unsure.
save my claude-workspace project as a repository in github
Now show it to someone
You built an app, put it on the internet, and backed it up. That is the same loop professional builders use every day.
One thing left. Paste your app's web address below. You get an instant review of it, plus a page where other builders can tell you what to fix next.
paste your app link
No account needed. You get a page you can share with anyone.
You are done. The rest is optional
Everything from here is a bonus. Your app already works, it is on the internet, and it is backed up.
The next three screens each give Claude one extra power: better web searching, a place to keep information, and a counter for how many people use your app.
Take the ones you want and skip the rest. Each is a one-time setup.
MCP is the name for a plug-in that gives Claude a new skill. That is all the word means.
Give Claude better web search
Claude can search the web for you. Exa makes it much better at finding the right page.
- 1.Make an account at exa.ai.Open exa.ai
- 2.Claim your free $50 of credit.Claim $50
- 3.Paste the line below into the Claude panel.
- 4.After that, say: use exa by default.
help me set up Exa MCP: https://exa.ai/mcp
Let your app remember things
For when your app has to remember things after someone closes it, or people need to log in.
- 1.Make a free account at firebase.google.com.Open firebase.google.com
- 2.Paste the line below into the Claude panel.
- 3.Then tell Claude what you need, like: let people sign in.
help me install firebase mcp: https://firebase.google.com/docs/ai-assistance/mcp-server#claude
See how many people use your app
A counter for how many people opened your app and what they clicked.
- 1.Make an account at posthog.com. Five are free.Open posthog.com
- 2.Paste the line below into the Claude panel.
- 3.Then ask Claude to add it to your app.
help me install posthog mcp: https://posthog.com/docs/model-context-protocol