AgentIndex icon
AgentIndex
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompareGuides
Submit Tool
ToolsMCP ServersHOTCategoriesTrendingNewBest ListsCompare
Home/
Dev Tooling/
mcp-app-typescript-template
mcp-app-typescript-template logo

mcp-app-typescript-template

Active·★ 21·Apache-2.0·Updated 2026-10-21

This template provides a well-architected starter for building interactive AI applications (MCP Apps) with React widgets, leveraging modern web technologies like TypeScript, Tailwind CSS, and Vite. It demonstrates best practices for integrating with MCP hosts such as ChatGPT, offering comprehensive features for both server-side tooling and dynamic UI components.

#MCP#React#TypeScript#Node.js#AI Applications#Frontend Development
© 2026 AgentIndex.app|Built by a 10-year iOS Developer.
Best by use caseAboutContactAdvertisePrivacy PolicyTerms of UseQYSGitHubBuy me a coffee ☕

Browse by Category

MCP ServersCode AssistantWorkflow AutomationRAG / Knowledge BaseMulti-AgentBrowser AutomationLLM InfraDev ToolingObservability

Not affiliated with Anthropic, OpenAI or Microsoft.

Guides
#Developer Tools
#Widget Development
$ Install
$ git clone https://github.com/pomerium/mcp-app-typescript-template your-mcp-app && cd your-mcp-app && npm install && npm run dev
↗ Visit site★ GitHub
01

Features

01MCP Server with Apps Helpers: Node.js server with `McpServer` and MCP Apps helpers for robust backend development.
02React Widgets with App API Demo: Interactive React components demonstrating the MCP Apps `App` API for communication with hosts.
03UI Capability Negotiation: Server automatically detects host capabilities and adapts responses, supporting both UI and text-only clients.
04Inline Widget Assets: Supports self-contained HTML mode for hosts that sandbox iframes (e.g., Claude.ai) or remote sharing.
05Mock App for Testing: Includes `createMockApp()` helper for local testing and Storybook development without a live MCP connection.
02

Compatibility

Node.js
Runtime
Verified via docs
npm
Package Manager
Verified via docs
TypeScript
Language
Verified via docs
React
Framework
Verified via docs
Docker
Deployment
Verified via docs
macOS
Operating System
Verified via docs
03

Quick start

1
$ git clone https://github.com/pomerium/mcp-app-typescript-template your-mcp-app
2
$ cd your-mcp-app
3
$ npm install
4
$ npm run dev
04

Use cases

↳Building custom interactive AI applications for MCP hosts like ChatGPT, Claude.ai, and VS Code.
↳Integrating server-side tools with dynamic front-end components within AI chat interfaces.
↳Rapid prototyping and development of MCP apps using a robust modern web development stack.
↳Local testing and debugging of MCP app functionality with dedicated tools like `createMockApp()` and MCP Inspector.
↳Deploying production-ready MCP apps using multi-stage Docker builds and comprehensive production checklists.
05

Alternatives

⚡Top VS:
VSfigwright★1.1k→VScreate-mcp-server★14→VSmcpscore★42→

Comments

Log in to leave a comment

No comments yet. Be the first!

On this page
01Features02Compatibility03Quick start04Use cases05Alternatives
VS
digital-twins
★20
→
figwright logo
figwright★ 1.1k
Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.
VSCompare→
create-mcp-server logo
create-mcp-server★ 14
Scaffold production-ready MCP servers in seconds
VSCompare→
mcpscore logo
mcpscore★ 42
Lighthouse for MCP — score any MCP server 0–100.
VSCompare→
digital-twins logo
digital-twins★ 20
Test mode for your integrations, built for the way agents build.
VSCompare→
core logo
core★ 3.7k
A framework helps you quickly build AI Native IDE products. MCP Client, supports Model Context Protocol (MCP) tools via MCP server.
VSCompare→
caldav-mcp logo
caldav-mcp★ 103
🗓️ A CalDAV Model Context Protocol (MCP) server to expose calendar operations as tools for AI assistants.
VSCompare→
ns-ui logo
ns-ui★ 34
223 React components you install as plain source — no runtime package. Tailwind v4 tokens, light and dark. Install with npx shadcn, or connect the MCP server and give an agent the whole catalog.
VSCompare→
roast-my-design-system logo
roast-my-design-system★ 27
v5.2.3 · Try it: npx roast-my-design-system · Your AI can write the UI. This makes sure it writes YOUR ui. A health score, receipts, fixes ranked by payoff, rules injected via --apply, a local MCP server via --mcp, and Claude's read of your numbers embedded in the shareable report. Benchmarked against 34 public repos and 10 reputable systems.
VSCompare→
See all alternatives →
pomerium /
mcp-app-typescript-template
↗

ChatGPT app template using Pomerium, OpenAI Apps SDK and Model Context Protocol (MCP), with a Node.js server and React widgets.

21Apache-2.0
Last commit2d ago
StatusActive
CategoryDev Tooling
Links
Documentation↗Discussion↗Issues↗Releases↗
Cloud Infrastructure
Ad

Deploy on DigitalOcean

Host your MCP servers, Docker containers, and AI agents with $200 free credit over 60 days.

Claim $200 Free Credit