// workshop
Build your first website
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 Claude Desktop app
Claude does all its building right inside the Claude Desktop app on your computer. There is no separate program to install.
Go to the page below and click the download button for your computer. Open the file when it finishes and follow the installer.
Then open the app and sign in with the account you just made.
Claude Code is the builder that comes with the app. It is where you type what you want and watch Claude make it.
Open Claude Code
Along the top of the Claude app is a small row of icons. Click the one that looks like </>.
That opens Claude Code, the part that builds your app. You are already signed in, so there is nothing else to set up.
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.
Point Claude Code at your folder
At the top of the Claude Code box are two small buttons: Local, and No folder.
Click No folder and choose the claude-workspace folder you just made. Now everything Claude builds goes into it.
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 Claude Code.
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
The third choice, Accept edits, lets Claude make every file change without asking. You can leave it on Auto to start.
Plan first, or just go
Claude has a few modes. Open the little menu by clicking the mode name at the bottom of the box.
Plan is for a big ask, like the whole app you just made. Claude works out what it is going to do and shows you first, before it changes anything.
Auto is for small changes, like making a button bigger or fixing a wrong word. Claude just gets on with it, and only stops to ask about anything risky.
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.
A connector is a plug-in that lets Claude use another service on your behalf. You never touch it directly.
Connect Claude to Vercel
A connector lets Claude talk to Vercel for you. You add it once, from inside the Claude app.
- 1.Open Connectors in the Claude app.
- 2.Make sure you are on Discover, then Directory.
- 3.Type vercel in the search box.
- 4.Click the plus on Vercel to add it.
- 5.Sign in to Vercel when it asks.
Put it on the internet
Paste this into Claude Code, 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 to Vercel
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.
They meet in person, so you build alongside other people in the room.
Want to go further?
You just shipped your first app. When you are ready for more, AI Build Club is where builders go next.
They cover the advanced pieces: adding a database, designing a real front end, letting people sign in, using GitHub, and building bigger, more capable apps. It is also where you swap ideas and pick up the newest techniques.
AI Build Club runs tailored workshops and boot camps for advanced builders and anyone who wants to upskill fast.
You are done. The rest is optional
Everything from here is a bonus. Your app already works and it is on the internet.
The next few screens each give Claude one extra power: a safe backup of your work, 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.
A connector (sometimes called an MCP) is a plug-in that gives Claude a new skill. That is all the word means.
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 Claude Code, 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
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.In the Claude app, open Connectors, then Discover, then Directory.
- 4.Type exa in the search box, then click the plus on Exa to add it.
- 5.Back in Claude Code, say: use exa by default.
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 Claude Code.
- 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 Claude Code.
- 3.Then ask Claude to add it to your app.
help me install posthog mcp: https://posthog.com/docs/model-context-protocol