HKVibeCode · Intermediate · 10 min
MCP and APIs: Connecting a Vibe Coded App
What the Model Context Protocol is, and which services a small app usually needs.
What MCP is
Model Context Protocol (MCP) is an open standard from Anthropic. It lets a coding assistant call tools: read a database, fetch a page, or write a file, under rules you set. The assistant is still a model. You still review what it changed.
Why an API is still required
Generated UI does not store users, take payment, or send mail by itself. A small app often needs:
| Need | A common choice |
| Database | Supabase |
| Sign-in | Clerk |
| Resend | |
| Payments | Stripe |
| Hosting | Vercel |
Free tiers and prices change. Read the vendor page.
How to connect one
Tell the tool which service you use, which secret name to read on the server, and what must never appear in the browser. Put keys in environment variables. Do not paste a secret key into a prompt that you might share.
Key takeaways
- MCP is a way for the assistant to use tools. It is not a reason to skip review.
- Data, sign-in, email, and payments are separate services.
- Secret keys stay on the server.