MCP Apps

Active
GitHub TypeScript NOASSERTION

Description

Official spec and SDK of MCP Apps protocol - the standard for UIs embedded in AI chatbots, served by MCP servers, enabling interactive user interfaces directly from MCP tools.

Key Features

  • Standardized UI protocol — deliver interactive UIs from MCP tools that render inline in any compliant chat client
  • Multi-client support — works with ChatGPT, Claude, VS Code, Goose, Postman, and MCPJam
  • SDK for three roles — build Views (App class), embed in hosts (app-bridge), or register tools with UI metadata
  • React hooks — useApp, useHostStyles, and other hooks for building Views with React
  • Bidirectional communication — host passes tool data to UI via notifications, UI calls tools through host
  • Agent Skills integration — scaffold new apps or migrate from OpenAI Apps SDK with built-in skills

Use Cases

💡 Building interactive dashboards and data visualizations that appear inline in AI chat
💡 Creating form-based tools that let users input data directly within a conversation
💡 Developing design canvases and media players embedded in chat interfaces
💡 Adding interactive UI to existing MCP servers without changing the backend
💡 Migrating OpenAI Apps SDK projects to the open MCP Apps standard

Tags

mcp typescript chatbot web api sdk

Categories

💬 Chat UI 🔌 MCP Tools

Quick Start

# Install SDK
npm install -S @modelcontextprotocol/ext-apps

# Build an App view
import { App } from '@modelcontextprotocol/ext-apps';
const app = new App();
app.mount(document.getElementById('root'));
Visit GitHub

Related Projects