Whirlwind tour: Build and deploy a full-stack app with InstantDB
👋 Hey there!
In this tutorial we'll build a full-stack app with InstantDB. Within 5-10 minutes you'll have an app that you can run locally and deploy!
What we'll do:
- 1.Install the Instant MCP server
- 2.Scaffold a starter app with Next.js
- 3.Add some rules for our LLMs to understand Instant
- 4.Prompt the LLM to build us an app! (This is the fun part!)
- 5.Deploy the app to Vercel
1. Install the Instant MCP server
Below are instructions on how to add the remote Instant MCP server. Select your preferred tool and follow the instructions.
Click this button to install the Instant MCP server in Cursor:
Alternatively you can paste this into your `~/.cursor/mcp.json` directly
{
"mcpServers": {
"instant": {
"url": "https://mcp.instantdb.com/mcp"
}
}
}
You should now see the Instant MCP server in your MCP servers list. If you don't you may need to restart Cursor. Once you see it, click the "Needs Login" button to go through the auth flow.
Authentication Required
2. Scaffold a starter app with Next.js
With the Instant MCP server installed, we can now scaffold a starter app. Run the following commands in your terminal:
First, create a new Next.js app:
npx create-next-app@latest vibes --yes
Then, navigate to the project:
cd vibes
Finally, add Instant's React SDK:
npm i @instantdb/react
3. Add some rules for our LLMs to understand Instant
Now that we have a Next.js app scaffolded, we need to add some rules for our LLMs to understand how to interact with InstantDB. Select your client below to get the context set up.
Instant Rules for Cursor
.cursor/rules/instant.mdc
Click the button below to copy the rules for Instant and paste them into .cursor/rules/instant.mdc in the root of your project.
Verify Setup
You can verify you set up the rules correctly by asking your LLM "How do you make queries and transactions in InstantDB?" If everything is set up correctly, you should see a response with information about db.useQuery and transact.
If you see a response that doesn't mention these methods, double check that you added the rules correctly and try restarting your tool.
4. Prompt the LLM to build us an app! (This is the fun part!)
Woohoo! Now that we've got everything set up, we're ready to build an app! Fire up your editor (cursor, windsurf, zed, etc.) or your CLI tool (claude, gemini, etc) and type up a prompt. Hit enter and watch the magic happen!
We've seen the best results with Claude Sonnet 4 and Claude Opus. Be sure to select either of those instead of an "auto" model if you can.
Here are some example prompts for inspiration
Debugging Common Issues
Run into an issue? Here are solutions to common problems you might encounter:
5. Deploy the app to Vercel
Once you've got a working app we can get it live by deploying to Vercel! Before we deploy, let's verify there are no build errors. In the terminal run:
npm run build
If there are any build errors paste them into your agent to get them fixed up. Make sure your app still works as expected after your agent gets the build to pass:
npm run dev
If all looks well let's kick off a deploy!
npx vercel --prod
After vercel finishes the deploy check out your live app. If you see any an error about a missing app-id it means we'll need to add it to the vercel environment:
npx vercel env add NEXT_PUBLIC_INSTANT_APP_ID production < .env.local
Once the deploy finishes you should have a fully-working app. Huzzah! If you're curious, you can go to your Instant dashboard and see all the data you've created in the Explorer tab.
Show off your creation!
We'd love to see what you built! Tweet us @instant_db and we'll amplify your awesome creations to the community.
🧡Share on Twitter