Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Jonathan Hefner c3d91a13ad Improve example CSS files to better demonstrate host style integration Update `mcp-app.css`, `mcp-app.module.css`, and Svelte/Vue component styles across all `basic-server-*` examples (and `integration-server`) to use CSS variables instead of hardcoded values: - Remove component-local color variables (`--color-primary`, etc.) - Add derived spacing variables to `global.css` based on `--spacing-unit` - Replace hardcoded spacing with `--spacing-xs/sm/md/lg` variables - Add app-defined accent color variables (`--color-accent`, `--color-text-on-accent`) to `global.css` for brand customization - Use app accent colors for button styling - Update button hover to use `color-mix()` for theme-adaptive lightening - Change focus-visible to use `--color-ring-primary` outline This makes the templates more instructive for users and AI coding agents building new MCP Apps by showing how to consume host-provided variables semantically, define app-specific accent colors, and create adaptive styling that integrates with host themes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>		2026-01-30 09:32:26 -06:00
..
src	Improve example CSS files to better demonstrate host style integration	2026-01-30 09:32:26 -06:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
main.ts	Refactor server startup functions	2026-01-24 09:27:54 -06:00
mcp-app.html	Clean up examples (#182 )	2025-12-19 11:44:27 +00:00
package.json	chore: bump to 1.0.1 - fix npm reference for ext-apps dependency in examples + update zod to 4.x (#368 )	2026-01-26 21:55:15 +00:00
README.md	Clean up examples (#182 )	2025-12-19 11:44:27 +00:00
server.ts	fix(examples): resolve DIST_DIR path for npm package execution (#277 )	2026-01-15 12:23:13 +00:00
tsconfig.json	Clean up examples (#182 )	2025-12-19 11:44:27 +00:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	Clean up examples (#182 )	2025-12-19 11:44:27 +00:00

README.md

Example: Integration Test Server

An MCP App example used for E2E integration testing.

Overview

This example demonstrates all App SDK communication APIs and is used by the E2E test suite to verify host-app interactions:

Tool registration with a linked UI resource
React UI using the useApp() hook
App communication APIs: callServerTool, sendMessage, sendLog, openLink

Key Files

server.ts - MCP server with tool and resource registration
mcp-app.html / src/mcp-app.tsx - React UI using useApp() hook

Getting Started

npm install
npm run dev

How It Works

The server registers a get-time tool with metadata linking it to a UI HTML resource (ui://get-time/mcp-app.html).
When the tool is invoked, the Host renders the UI from the resource.
The UI uses the MCP App SDK API to communicate with the host and call server tools.