| Filename | Latest commit message | Latest commit date |
|---|---|---|
fcd243a6f3* fix(e2e): make server-time element fill width for consistent mask - Add flex layout to .action p to make server-time stretch - Add #server-time flex: 1 rule across all basic-server variants - Update golden screenshots with full-width masked time field This ensures the Playwright mask covers a consistent width regardless of the timestamp content, fixing screenshot comparison flakiness. * fix(e2e): wait for select to be enabled in screenshot generator Match the logic in servers.spec.ts - wait for select to be enabled (servers connected) instead of just visible. * chore: trigger CI re-run |
||
| .. | ||
| src | ||
| .gitignore | ||
| env.d.ts | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| server.ts | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| vite.config.ts | ||
Example: Basic Server (Vue)
An MCP App example with a Vue 3 UI using the Composition API.
Tip
Looking for a vanilla JavaScript example? See
basic-server-vanillajs!
Overview
- Tool registration with a linked UI resource
- Vue 3 UI using the
Appclass - App communication APIs:
callServerTool,sendMessage,sendLog,openLink
Key Files
server.ts- MCP server with tool and resource registrationmcp-app.html/src/App.vue- Vue 3 UI usingAppclass
Getting Started
npm install
npm run dev
How It Works
- The server registers a
get-timetool 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.
Build System
This example bundles into a single HTML file using Vite with vite-plugin-singlefile — see vite.config.ts. This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining _meta.ui.csp.resourceDomains in the UI resource metadata.