MCP Apps Next.js Starter
Supports UIby vercel-labs
Minimal Next.js starter for building interactive MCP Apps with integrated UI widgets.
What it does
This starter kit provides a blueprint for creating MCP Apps—interactive UIs that MCP hosts render alongside tool calls. It combines a Next.js frontend (acting as the widget UI) with an MCP server endpoint, allowing for a seamless bridge between LLM tool results and rich React components.
Key features
- Pre-configured
useMcpApphook for easy state synchronization between host and UI. - Built-in MCP server route using
mcp-handlerand@modelcontextprotocol/ext-apps. - Sandboxed iframe-ready layout with CORS middleware for secure cross-origin access.
- One-click deployment to Vercel with automatic BASE_URL resolution.
Installation
- Clone the repo and run
pnpm install. - Set
BASE_URLin your.env(use ngrok for local dev). - Deploy to Vercel or host on a public HTTPS URL.
- Add the
/mcpendpoint to your MCP host.
Supported hosts
- ChatGPT
- Cursor
- Claude.ai
Choose your AI client and follow the steps below.
Cursor
Add the hosted HTTPS URL to Cursor MCP settings.ChatGPT
Add the hosted HTTPS URL (e.g., https://your-app.vercel.app/mcp) to ChatGPT Connectors.claude-ai
Add the hosted HTTPS URL to Claude.ai Settings → Integrations.Related Apps
OpenAI Apps SDK Examples
MCP AppOfficial example gallery of interactive MCP widgets for ChatGPT — 3D viewers, maps, carousels, shopping carts, and more.
Human MCP
MCP ServerGive AI agents human-like senses: visual analysis, image/video generation, speech synthesis, browser automation, and advanced reasoning — 29 MCP tools in one se
Shopify MCP Server
MCP ServerDirect interaction with Shopify store data via GraphQL API for managing products, customers, and orders.
Git MCP Server
MCP ServerFull-featured Git MCP server exposing 28 tools for AI agents to clone, commit, branch, diff, merge, rebase, and more via STDIO or Streamable HTTP.
CodexPotter
MCP ServerAutonomous reconciliation loop that drives Codex to align your codebase with instructed states.
Smart Coding MCP
MCP ServerSemantic code search for AI assistants using local embeddings — find code by meaning, not just keywords.
Recall
MCP ServerPersistent cross-session memory for Claude and AI agents. Self-host on Redis/Valkey or use the managed cloud at recallmcp.com — free tier available.
GFS (Git For database Systems)
MCP ServerSafe database version control for AI coding agents and developers with instant rollbacks and branching.