ext-apps/examples/basic-host at main · modelcontextprotocol/ext-apps · GitHub Skip to content Navigation Menu Sign in Appearance settings * Platform * AI CODE CREATION * GitHub Copilot Write better code with AI * GitHub Copilot app Direct agents from issue to merge * MCP Registry Integrate external tools * DEVELOPER WORKFLOWS * Actions Automate any workflow * Codespaces Instant dev environments * Issues Plan and track work * Code Review Manage code changes * Code Quality Enforce quality at merge * APPLICATION SECURITY * GitHub Advanced Security Find and fix vulnerabilities * Code security Secure your code as you build * Secret protection Stop leaks before they start * EXPLORE * Why GitHub * Documentation * Blog * Changelog * Marketplace View all features * Solutions * BY COMPANY SIZE * Enterprises * Small and medium teams * Startups * Nonprofits * BY USE CASE * App Modernization * DevSecOps * DevOps * CI/CD * View all use cases * BY INDUSTRY * Healthcare * Financial services * Manufacturing * Government * View all industries View all solutions * Resources * EXPLORE BY TOPIC * AI * Software Development * DevOps * Security * View all topics * EXPLORE BY TYPE * Customer stories * Events & webinars * Ebooks & reports * Business insights * GitHub Skills * SUPPORT & SERVICES * Documentation * Customer support * Community forum * Trust center * Partners View all resources * Open Source * COMMUNITY * GitHub Sponsors Fund open source developers * PROGRAMS * Security Lab * Maintainer Community * GitHub Stars * Archive Program * REPOSITORIES * Topics * Trending * Collections * Enterprise * ENTERPRISE SOLUTIONS * Enterprise platform AI-powered developer platform * AVAILABLE ADD-ONS * GitHub Advanced Security Enterprise-grade security features * Copilot for Business Enterprise-grade AI features * Premium Support Enterprise-grade 24/7 support * Pricing Search / Sign in Sign up Appearance settings You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert Uh oh! There was an error while loading. Please reload this page . modelcontextprotocol / ext-apps Public * Notifications You must be signed in to change notification settings * Fork 379 * Star 2.8k * Code * Issues 124 * Pull requests 83 * Discussions * Actions * Projects * Security and quality 0 * Insights Additional navigation options * Code * Issues * Pull requests * Discussions * Actions * Projects * Security and quality * Insights Files Expand file tree main Breadcrumbs * ext-apps * / examples / basic-host / Copy path Directory actions More options More options Directory actions More options More options Latest commit   History History History main Breadcrumbs * ext-apps * / examples / basic-host / Copy path Top Folders and files Name Name Last commit message Last commit date parent directory .. src src     .gitignore .gitignore     README.md README.md     index.html index.html     package.json package.json     sandbox.html sandbox.html     serve.ts serve.ts     tsconfig.json tsconfig.json     vite.config.ts vite.config.ts     View all files README.md Outline Example: Basic Host A reference implementation showing how to build an MCP host application that connects to MCP servers and renders tool UIs in a secure sandbox. This basic host can also be used to test MCP Apps during local development. Key Files * index.html / src/index.tsx - React UI host with tool selection, parameter input, and iframe management * sandbox.html / src/sandbox.ts - Outer iframe proxy with security validation and bidirectional message relay * src/implementation.ts - Core logic: server connection, tool calling, and AppBridge setup Getting Started npm install npm run start # Open http://localhost:8080 By default, the host application will try to connect to an MCP server at http://localhost:3001/mcp . You can configure this behavior by setting the SERVERS environment variable with a JSON array of server URLs: SERVERS= ' ["http://localhost:1234/mcp", "http://localhost:5678/mcp"] ' npm run start Architecture This example uses a double-iframe sandbox pattern for secure UI isolation: Host (port 8080) └── Outer iframe (port 8081) - sandbox proxy └── Inner iframe (srcdoc) - untrusted tool UI Why two iframes? * The outer iframe runs on a separate origin (port 8081) preventing direct access to the host * The inner iframe receives HTML via srcdoc and is restricted by sandbox attributes * Messages flow through the outer iframe which validates and relays them bidirectionally This architecture ensures that even if tool UI code is malicious, it cannot access the host application's DOM, cookies, or JavaScript context. Footer (c) 2026 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Community * Docs * Contact * Manage cookies * Do not share my personal information You can’t perform that action at this time.