Heidelberg AICurriculum

Stop Building Apps AI Agents Can’t Use

Leon van Zyl ·2026-05-21 ·2 min read

Summary written by us from the video's transcript. The video, and everything in it, is Leon van Zyl's work.

Learn how to build a Next.js app with an MCP server so AI agents like Claude can interact with its features via API keys.

Takeaways

  • Agent‑ready apps expose functionality through MCP servers or skills so AI assistants can act on users’ behalf.
  • Anthropic’s Model Context Protocol standardizes how agents call tools like `savePrompt` and `searchPrompts`.
  • Using Neon Postgres gives free, branchable databases that simplify development vs. production environments.
  • The workflow—plan with an agent, let the agent generate code, test via the MCP inspector, then deploy—can be repeated for any existing app.
  • API keys authenticate agents to your MCP server, enabling usage tracking, billing, or credit deduction.

Why Agent‑Ready Apps Matter

Modern users access software through AI assistants such as ChatGPT, Claude, and coding agents like Claude Code. To stay relevant, apps must expose their functionality to these agents via Model Context Protocol (MCP) servers or agent skills. Large platforms are racing to provide MCP support because it lets agents perform actions on behalf of users.

Setting Up the Project and Required Skills

Create a fresh Next.js project with `create next app@latest`. Then install the needed Anthropic skills from skills.anthropic.com, including Next Best Practices, Better Auth Best Practices, Front‑End Design, and the MCP Builder skill. Verify the installations by running the `skills` command inside Claude or your chosen coding agent.

Planning and Saving the App Blueprint

Use Claude (or another coding agent) in planning mode to describe the desired app – an AI prompt library with a specific tech stack. Paste the architectural diagram into the resource folder so the agent has clear guidance. Ask the agent to save the generated plan in a new `plans` directory for future reference.

Provisioning a Postgres Database

Sign up for a free Neon Postgres instance, create a project (e.g., “AI prompt MCP”), and add a development branch. Copy the provided connection string, place it into a newly created `.env` file (renamed from `.env.example`), replacing the placeholder `DATABASE_URL`. This gives the app a live database for users, prompts, and API keys.

Running the Agent to Implement the Plan

In Claude Code, issue the goal command to pull in the saved plan and request full implementation (`Please go ahead and implement this entire plan`). The agent builds the codebase, configures authentication, creates database migrations, and writes documentation. After about 14 minutes the app is functional locally.

Testing the MCP Server Locally

Install the Model Context Protocol inspector with `npx add model-context-protocol/inspector`. Connect using the streamable HTTP transport and replace the placeholder bearer token with an actual API key from the app’s dashboard. Verify that the `savePrompt` and `searchPrompts` tools are listed, then test each tool through the inspector UI.

Deploying to Production

Commit the code, push to a public GitHub repo, and import it into Vercel. Add environment variables (including the production Neon connection string) and deploy the production branch. Update the Better Auth URL with the Vercel domain, redeploy, generate a new production API key, and replace the local key in `mcp.json`. Finally, confirm that agents can store and retrieve prompts via the live MCP server.