MCP Apps Example Gallery (fable candidate)

MCP Apps Example Gallery (fable candidate)

Hosts six official Model Context Protocol MCP Apps examples as remote Streamable HTTP MCP servers you can try by URL without cloning or local setup.

Category
访问服务器

README

MCP Apps Example Gallery (fable candidate)

Six official Model Context Protocol MCP Apps examples, hosted as remote Streamable HTTP MCP servers you can try by URL — no cloning, no npx, no tunnel. Each example has a stable endpoint, a gallery card with a screenshot and sample prompt, and a Copy MCP URL action.

Independence notice. This gallery is an independent hosted adaptation of the official examples, pinned at upstream commit 10195ad9. It is not an official Model Context Protocol service and is not hosted or endorsed by the Model Context Protocol project. It is a demonstration service: no accounts, no stored user data, and no SLA.

The apps

Slug Example Demonstrates MCP endpoint path
get-time basic-server-react Smallest tool + ui:// resource + UI-to-tool round trip /apps/get-time/mcp
budget-allocator budget-allocator-server Editable form, charts, recalculation /apps/budget-allocator/mcp
cohort-heatmap cohort-heatmap-server Dense interactive data visualization /apps/cohort-heatmap/mcp
customer-segmentation customer-segmentation-server Filtering and chart interaction /apps/customer-segmentation/mcp
scenario-modeler scenario-modeler-server Scenario templates + custom 12-month projections /apps/scenario-modeler/mcp
transcript transcript-server Live browser speech transcription (Web Speech API) /apps/transcript/mcp

Non-MCP routes: / (gallery page), /apps.json (machine-readable manifest), /healthz, /readyz, /version.

Production endpoints

The production gallery is served at https://openwork-mcp-app-gallery-fable.vercel.app (verified against the exact deployed commit; receipts in BENCHMARK_REPORT.md and TIMELINE.md):

Try an example in under five minutes

  1. Open the gallery page and press Copy MCP URL on a card (or copy an endpoint above).
  2. Add the URL as a remote MCP server in an MCP Apps-compatible host. In OpenWork, add it as a user-configured MCP server; other hosts have an equivalent "add remote MCP server" flow.
  3. Send the card's sample prompt (for example, for budget-allocator: "Create a $1 million seed-stage budget I can adjust interactively.").
  4. Interact with the app UI that renders inside the conversation.

Hosts without MCP Apps support still work: every tool returns an ordinary text and/or structured result as fallback, so a plain MCP client gets useful output without any UI.

Protocol support: the current 2026-07-28 protocol revision (per-request envelope) and the stateless 2025-era Streamable HTTP flow (initializetools/* / resources/*) are both served on every endpoint. GET without a session and DELETE return 405 — serving is stateless and there is no server-side session to terminate.

Run it locally

Requires Node.js 24.x and pnpm 10.28.0 (via corepack):

corepack enable
pnpm install --frozen-lockfile
pnpm dev

This builds the six app UIs into the immutable resource bundle, generates the gallery site, and serves everything at http://localhost:3000.

Reproduce the complete release gate (formatting, lint, strict typecheck, provenance/notices verification, source-boundary scan, dependency audit, 95-test unit/gateway/contract matrix over both protocol eras, the production Vercel build, the architecture invariant, SBOM generation, and 15 browser tests through the upstream basic host):

pnpm exec playwright install chromium
pnpm release:check

Source attribution and provenance

  • Upstream example source is copied at the exact pinned commit under upstream/ext-apps/, with per-file digests and every local modification documented in upstream/manifest.json and verified by pnpm verify:notices.
  • Local modifications are limited to: import adaptation from MCP SDK v1 + @modelcontextprotocol/ext-apps/server to the gallery's SDK v2 adapter (src/mcp-app-adapter.ts), reading UI HTML from the bundled immutable store instead of the local filesystem, and a deterministic seeded dataset for customer-segmentation (stateless serverless instances must serve identical data).
  • Gallery-owned code is Apache-2.0 (LICENSE); copied upstream code keeps its own notices (THIRD_PARTY_NOTICES.md).
  • pnpm check:upstream reports upstream drift read-only; upstream is never fetched at build or runtime.

Data behavior, logging, and limits

  • No accounts, no cookies, no database, no uploads, no stored user state. All app data is synthetic or request-bounded; the transcript app's speech recognition runs in your browser (the host asks for microphone permission) and no audio or transcript ever reaches the gallery server.
  • No intended server-side network egress in any Wave 1 app; CI scans the runtime source for network, subprocess, and filesystem-write primitives.
  • Logs contain only anonymous aggregate metadata: app slug, JSON-RPC method category, status, duration, and byte counts — never tool arguments, results, prompts, resource contents, headers, cookies, or IP addresses.
  • Limits: 256 KiB request bodies; 512 KiB tool results; 1 MiB bundled UI resources; a 15-second application deadline (30-second platform maximum); per-instance concurrency caps with 429 + Retry-After shedding; platform edge rate limiting on /apps/*/mcp.
  • Apps can be disabled individually (fail-closed DISABLED_APP_SLUGS override); disabled apps stay visible as enabled: false in /apps.json.

No SLA

This is a hosted learning and demonstration surface, run on provider infrastructure without an availability commitment. Endpoints may be rate-limited, disabled, or removed at any time.

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选