From 91afe50e61cae86ddd1b25f5c6b6239b6ccd4722 Mon Sep 17 00:00:00 2001 From: Dale Nguyen Date: Wed, 22 Apr 2026 10:53:12 -0400 Subject: [PATCH 1/2] feat: add angular basic example --- README.md | 2 +- examples/basic-server-angular/README.md | 73 ++ examples/basic-server-angular/main.ts | 93 +++ examples/basic-server-angular/mcp-app.html | 14 + examples/basic-server-angular/package.json | 60 ++ examples/basic-server-angular/server.ts | 57 ++ .../basic-server-angular/src/app.component.ts | 230 ++++++ examples/basic-server-angular/src/global.css | 92 +++ examples/basic-server-angular/src/main.ts | 9 + examples/basic-server-angular/tsconfig.json | 21 + .../basic-server-angular/tsconfig.server.json | 17 + examples/basic-server-angular/vite.config.ts | 32 + package-lock.json | 667 +++++++++++++++++- tests/e2e/servers.spec.ts | 7 + .../basic-angular.png | Bin 0 -> 40473 bytes 15 files changed, 1371 insertions(+), 3 deletions(-) create mode 100644 examples/basic-server-angular/README.md create mode 100644 examples/basic-server-angular/main.ts create mode 100644 examples/basic-server-angular/mcp-app.html create mode 100644 examples/basic-server-angular/package.json create mode 100644 examples/basic-server-angular/server.ts create mode 100644 examples/basic-server-angular/src/app.component.ts create mode 100644 examples/basic-server-angular/src/global.css create mode 100644 examples/basic-server-angular/src/main.ts create mode 100644 examples/basic-server-angular/tsconfig.json create mode 100644 examples/basic-server-angular/tsconfig.server.json create mode 100644 examples/basic-server-angular/vite.config.ts create mode 100644 tests/e2e/servers.spec.ts-snapshots/basic-angular.png diff --git a/README.md b/README.md index 7348e1541..27d7844b8 100644 --- a/README.md +++ b/README.md @@ -173,7 +173,7 @@ directory contains demo apps showcasing real-world use cases. | | | |:---:|:---| -| [![Basic](examples/basic-server-react/grid-cell.png "Starter template")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) | The same app built with different frameworks — pick your favorite!

[React](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) · [Vue](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) · [Svelte](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) · [Preact](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) · [Solid](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) · [Vanilla JS](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) | +| [![Basic](examples/basic-server-react/grid-cell.png "Starter template")](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) | The same app built with different frameworks — pick your favorite!

[Angular](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-angular) · [React](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react) · [Vue](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vue) · [Svelte](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-svelte) · [Preact](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-preact) · [Solid](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-solid) · [Vanilla JS](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs) | ### Running the Examples diff --git a/examples/basic-server-angular/README.md b/examples/basic-server-angular/README.md new file mode 100644 index 000000000..467ab85b9 --- /dev/null +++ b/examples/basic-server-angular/README.md @@ -0,0 +1,73 @@ +# Example: Basic Server (Angular) + +An MCP App example with an Angular UI using standalone components and signals. + +> [!TIP] +> Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)! + +## MCP Client Configuration + +Add to your MCP client configuration (stdio transport): + +```json +{ + "mcpServers": { + "basic-angular": { + "command": "npx", + "args": [ + "-y", + "--silent", + "--registry=https://registry.npmjs.org/", + "@modelcontextprotocol/server-basic-angular", + "--stdio" + ] + } + } +} +``` + +### Local Development + +To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path): + +```json +{ + "mcpServers": { + "basic-angular": { + "command": "bash", + "args": [ + "-c", + "cd ~/code/ext-apps/examples/basic-server-angular && npm run build >&2 && node dist/index.js --stdio" + ] + } + } +} +``` + +## Overview + +- Tool registration with a linked UI resource +- Angular UI using the [`App`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html) class +- App communication APIs: [`callServerTool`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#callservertool), [`sendMessage`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendmessage), [`sendLog`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#sendlog), [`openLink`](https://apps.extensions.modelcontextprotocol.io/api/classes/app.App.html#openlink) + +## Key Files + +- [`server.ts`](server.ts) - MCP server with tool and resource registration +- [`mcp-app.html`](mcp-app.html) / [`src/app.component.ts`](src/app.component.ts) - Angular UI using `App` class + +## Getting Started + +```bash +npm install +npm run dev +``` + +## How It Works + +1. The server registers a `get-time` tool with metadata linking it to a UI HTML resource (`ui://get-time/mcp-app.html`). +2. When the tool is invoked, the Host renders the UI from the resource. +3. 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`](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`](https://apps.extensions.modelcontextprotocol.io/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata. diff --git a/examples/basic-server-angular/main.ts b/examples/basic-server-angular/main.ts new file mode 100644 index 000000000..6aafcb2ac --- /dev/null +++ b/examples/basic-server-angular/main.ts @@ -0,0 +1,93 @@ +/** + * Entry point for running the MCP server. + * Run with: npx mcp-server-basic-angular + * Or: node dist/index.js [--stdio] + */ + +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js"; +import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js"; +import cors from "cors"; +import type { Request, Response } from "express"; +import { createServer } from "./server.js"; + +/** + * Starts an MCP server with Streamable HTTP transport in stateless mode. + * + * @param createServer - Factory function that creates a new McpServer instance per request. + */ +export async function startStreamableHTTPServer( + createServer: () => McpServer, +): Promise { + const port = parseInt(process.env.PORT ?? "3001", 10); + + const app = createMcpExpressApp({ host: "0.0.0.0" }); + app.use(cors()); + + app.all("/mcp", async (req: Request, res: Response) => { + const server = createServer(); + const transport = new StreamableHTTPServerTransport({ + sessionIdGenerator: undefined, + }); + + res.on("close", () => { + transport.close().catch(() => {}); + server.close().catch(() => {}); + }); + + try { + await server.connect(transport); + await transport.handleRequest(req, res, req.body); + } catch (error) { + console.error("MCP error:", error); + if (!res.headersSent) { + res.status(500).json({ + jsonrpc: "2.0", + error: { code: -32603, message: "Internal server error" }, + id: null, + }); + } + } + }); + + const httpServer = app.listen(port, (err) => { + if (err) { + console.error("Failed to start server:", err); + process.exit(1); + } + console.log(`MCP server listening on http://localhost:${port}/mcp`); + }); + + const shutdown = () => { + console.log("\nShutting down..."); + httpServer.close(() => process.exit(0)); + }; + + process.on("SIGINT", shutdown); + process.on("SIGTERM", shutdown); +} + +/** + * Starts an MCP server with stdio transport. + * + * @param createServer - Factory function that creates a new McpServer instance. + */ +export async function startStdioServer( + createServer: () => McpServer, +): Promise { + await createServer().connect(new StdioServerTransport()); +} + +async function main() { + if (process.argv.includes("--stdio")) { + await startStdioServer(createServer); + } else { + await startStreamableHTTPServer(createServer); + } +} + +main().catch((e) => { + console.error(e); + process.exit(1); +}); diff --git a/examples/basic-server-angular/mcp-app.html b/examples/basic-server-angular/mcp-app.html new file mode 100644 index 000000000..12628deb6 --- /dev/null +++ b/examples/basic-server-angular/mcp-app.html @@ -0,0 +1,14 @@ + + + + + + + Get Time App + + + + + + + diff --git a/examples/basic-server-angular/package.json b/examples/basic-server-angular/package.json new file mode 100644 index 000000000..9899ccf85 --- /dev/null +++ b/examples/basic-server-angular/package.json @@ -0,0 +1,60 @@ +{ + "name": "@modelcontextprotocol/server-basic-angular", + "version": "1.7.0", + "type": "module", + "description": "Basic MCP App Server example using Angular", + "repository": { + "type": "git", + "url": "https://github.com/modelcontextprotocol/ext-apps", + "directory": "examples/basic-server-angular" + }, + "license": "MIT", + "main": "dist/server.js", + "files": [ + "dist" + ], + "scripts": { + "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"", + "watch": "cross-env INPUT=mcp-app.html vite build --watch", + "serve": "bun --watch main.ts", + "serve:stdio": "bun main.ts --stdio", + "start": "cross-env NODE_ENV=development npm run build && npm run serve", + "start:stdio": "cross-env NODE_ENV=development npm run build 1>&2 && npm run serve:stdio", + "dev": "cross-env NODE_ENV=development concurrently \"npm run watch\" \"npm run serve\"", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "@angular/common": "^21.0.0", + "@angular/compiler": "^21.0.0", + "@angular/core": "^21.0.0", + "@angular/forms": "^21.0.0", + "@angular/platform-browser": "^21.0.0", + "@angular/platform-browser-dynamic": "^21.0.0", + "@modelcontextprotocol/ext-apps": "^1.0.0", + "@modelcontextprotocol/sdk": "^1.29.0", + "cors": "^2.8.5", + "express": "^5.1.0", + "rxjs": "^7.8.0", + "zod": "^4.1.13" + }, + "devDependencies": { + "@types/cors": "^2.8.19", + "@types/express": "^5.0.0", + "@types/node": "22.10.0", + "concurrently": "^9.2.1", + "cross-env": "^10.1.0", + "typescript": "^5.9.3", + "vite": "^6.0.0", + "vite-plugin-singlefile": "^2.3.0" + }, + "types": "dist/server.d.ts", + "exports": { + ".": { + "types": "./dist/server.d.ts", + "default": "./dist/server.js" + } + }, + "bin": { + "mcp-server-basic-angular": "dist/index.js" + } +} diff --git a/examples/basic-server-angular/server.ts b/examples/basic-server-angular/server.ts new file mode 100644 index 000000000..363b4e81e --- /dev/null +++ b/examples/basic-server-angular/server.ts @@ -0,0 +1,57 @@ +import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js"; +import fs from "node:fs/promises"; +import path from "node:path"; +import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server"; +// Works both from source (server.ts) and compiled (dist/server.js) +const DIST_DIR = import.meta.filename.endsWith(".ts") + ? path.join(import.meta.dirname, "dist") + : import.meta.dirname; + +/** + * Creates a new MCP server instance with tools and resources registered. + */ +export function createServer(): McpServer { + const server = new McpServer({ + name: "Basic MCP App Server (Angular)", + version: "1.0.0", + }); + + // Two-part registration: tool + resource, tied together by the resource URI. + const resourceUri = "ui://get-time/mcp-app.html"; + + // Register a tool with UI metadata. When the host calls this tool, it reads + // `_meta.ui.resourceUri` to know which resource to fetch and render as an + // interactive UI. + registerAppTool(server, + "get-time", + { + title: "Get Time", + description: "Returns the current server time as an ISO 8601 string.", + inputSchema: {}, + _meta: { ui: { resourceUri } }, // Links this tool to its UI resource + }, + async (): Promise => { + const time = new Date().toISOString(); + return { content: [{ type: "text", text: time }] }; + }, + ); + + // Register the resource, which returns the bundled HTML/JavaScript for the UI. + registerAppResource(server, + resourceUri, + resourceUri, + { mimeType: RESOURCE_MIME_TYPE }, + async (): Promise => { + const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8"); + + return { + contents: [ + { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + ], + }; + }, + ); + + return server; +} diff --git a/examples/basic-server-angular/src/app.component.ts b/examples/basic-server-angular/src/app.component.ts new file mode 100644 index 000000000..8404f8d30 --- /dev/null +++ b/examples/basic-server-angular/src/app.component.ts @@ -0,0 +1,230 @@ +import { Component, type OnInit, signal } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { + App, + applyDocumentTheme, + applyHostFonts, + applyHostStyleVariables, + type McpUiHostContext, +} from "@modelcontextprotocol/ext-apps"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +function extractTime(result: CallToolResult): string { + const { text } = result.content?.find((c) => c.type === "text")!; + return text; +} + +@Component({ + selector: "app-root", + imports: [FormsModule], + styles: ` + .main { + width: 100%; + max-width: 425px; + box-sizing: border-box; + + > * { + margin-top: 0; + margin-bottom: 0; + } + + > * + * { + margin-top: var(--spacing-lg); + } + } + + .action { + > * { + margin-top: 0; + margin-bottom: 0; + width: 100%; + } + + > * + * { + margin-top: var(--spacing-sm); + } + + /* Server time row: flex layout for consistent mask width in E2E tests */ + > p { + display: flex; + align-items: baseline; + gap: var(--spacing-xs); + } + + textarea, + input { + display: block; + font-family: inherit; + font-size: inherit; + } + + button { + padding: var(--spacing-sm) var(--spacing-md); + border: none; + border-radius: var(--border-radius-md); + color: var(--color-text-on-accent); + font-weight: var(--font-weight-bold); + background-color: var(--color-accent); + cursor: pointer; + + &:hover { + background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse)); + } + + &:focus-visible { + outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary); + outline-offset: var(--border-width-regular); + } + } + } + + .notice { + padding: var(--spacing-sm) var(--spacing-md); + color: var(--color-text-info); + text-align: center; + font-style: italic; + background-color: var(--color-background-info); + + &::before { + content: "ℹ️ "; + font-style: normal; + } + } + + /* Server time fills remaining width for consistent E2E screenshot masking */ + .server-time { + flex: 1; + min-width: 0; + } + `, + template: ` +
+

Watch activity in the DevTools console!

+ +
+

Server Time: {{ serverTime() }}

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ `, +}) +export class AppComponent implements OnInit { + private app: App | null = null; + + hostContext = signal(undefined); + serverTime = signal("Loading..."); + messageText = "This is message text."; + logText = "This is log text."; + linkUrl = "https://modelcontextprotocol.io/"; + + async ngOnInit() { + const instance = new App({ name: "Get Time App", version: "1.0.0" }); + + instance.ontoolinput = (params) => { + console.info("Received tool call input:", params); + }; + + instance.ontoolresult = (result) => { + console.info("Received tool call result:", result); + this.serverTime.set(extractTime(result)); + }; + + instance.ontoolcancelled = (params) => { + console.info("Tool call cancelled:", params.reason); + }; + + instance.onerror = console.error; + + instance.onhostcontextchanged = (params) => { + const ctx = { ...this.hostContext(), ...params }; + this.hostContext.set(ctx); + + if (ctx.theme) { + applyDocumentTheme(ctx.theme); + } + if (ctx.styles?.variables) { + applyHostStyleVariables(ctx.styles.variables); + } + if (ctx.styles?.css?.fonts) { + applyHostFonts(ctx.styles.css.fonts); + } + }; + + await instance.connect(); + this.app = instance; + + const ctx = instance.getHostContext(); + this.hostContext.set(ctx); + if (ctx?.theme) { + applyDocumentTheme(ctx.theme); + } + if (ctx?.styles?.variables) { + applyHostStyleVariables(ctx.styles.variables); + } + if (ctx?.styles?.css?.fonts) { + applyHostFonts(ctx.styles.css.fonts); + } + } + + async handleGetTime() { + if (!this.app) return; + try { + console.info("Calling get-time tool..."); + const result = await this.app.callServerTool({ name: "get-time", arguments: {} }); + console.info("get-time result:", result); + this.serverTime.set(extractTime(result)); + } catch (e) { + console.error(e); + this.serverTime.set("[ERROR]"); + } + } + + async handleSendMessage() { + if (!this.app) return; + const signal = AbortSignal.timeout(5000); + try { + console.info("Sending message text to Host:", this.messageText); + const { isError } = await this.app.sendMessage( + { role: "user", content: [{ type: "text", text: this.messageText }] }, + { signal }, + ); + console.info("Message", isError ? "rejected" : "accepted"); + } catch (e) { + console.error("Message send error:", signal.aborted ? "timed out" : e); + } + } + + async handleSendLog() { + if (!this.app) return; + console.info("Sending log text to Host:", this.logText); + await this.app.sendLog({ level: "info", data: this.logText }); + } + + async handleOpenLink() { + if (!this.app) return; + console.info("Sending open link request to Host:", this.linkUrl); + const { isError } = await this.app.openLink({ url: this.linkUrl }); + console.info("Open link request", isError ? "rejected" : "accepted"); + } +} diff --git a/examples/basic-server-angular/src/global.css b/examples/basic-server-angular/src/global.css new file mode 100644 index 000000000..801291f46 --- /dev/null +++ b/examples/basic-server-angular/src/global.css @@ -0,0 +1,92 @@ +:root { + color-scheme: light dark; + + /* + * Fallbacks for host style variables used by this app. + * The host may provide these (and many more) via the host context. + */ + --color-text-primary: light-dark(#1f2937, #f3f4f6); + --color-text-inverse: light-dark(#f3f4f6, #1f2937); + --color-text-info: light-dark(#1d4ed8, #60a5fa); + --color-background-primary: light-dark(#ffffff, #1a1a1a); + --color-background-inverse: light-dark(#1a1a1a, #ffffff); + --color-background-info: light-dark(#eff6ff, #1e3a5f); + --color-ring-primary: light-dark(#3b82f6, #60a5fa); + --border-radius-md: 6px; + --border-width-regular: 1px; + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-weight-normal: 400; + --font-weight-bold: 700; + --font-text-md-size: 1rem; + --font-text-md-line-height: 1.5; + --font-heading-3xl-size: 2.25rem; + --font-heading-3xl-line-height: 1.1; + --font-heading-2xl-size: 1.875rem; + --font-heading-2xl-line-height: 1.2; + --font-heading-xl-size: 1.5rem; + --font-heading-xl-line-height: 1.25; + --font-heading-lg-size: 1.25rem; + --font-heading-lg-line-height: 1.3; + --font-heading-md-size: 1rem; + --font-heading-md-line-height: 1.4; + --font-heading-sm-size: 0.875rem; + --font-heading-sm-line-height: 1.4; + + /* Spacing derived from host typography */ + --spacing-unit: var(--font-text-md-size); + --spacing-xs: calc(var(--spacing-unit) * 0.25); + --spacing-sm: calc(var(--spacing-unit) * 0.5); + --spacing-md: var(--spacing-unit); + --spacing-lg: calc(var(--spacing-unit) * 1.5); + + /* App accent color (customize for your brand) */ + --color-accent: #2563eb; + --color-text-on-accent: #ffffff; +} + +* { + box-sizing: border-box; +} + +html, body { + font-family: var(--font-sans); + font-size: var(--font-text-md-size); + font-weight: var(--font-weight-normal); + line-height: var(--font-text-md-line-height); + color: var(--color-text-primary); +} + +h1 { + font-size: var(--font-heading-3xl-size); + line-height: var(--font-heading-3xl-line-height); +} +h2 { + font-size: var(--font-heading-2xl-size); + line-height: var(--font-heading-2xl-line-height); +} +h3 { + font-size: var(--font-heading-xl-size); + line-height: var(--font-heading-xl-line-height); +} +h4 { + font-size: var(--font-heading-lg-size); + line-height: var(--font-heading-lg-line-height); +} +h5 { + font-size: var(--font-heading-md-size); + line-height: var(--font-heading-md-line-height); +} +h6 { + font-size: var(--font-heading-sm-size); + line-height: var(--font-heading-sm-line-height); +} + +code, pre, kbd { + font-family: var(--font-mono); + font-size: 1em; +} + +b, strong { + font-weight: var(--font-weight-bold); +} diff --git a/examples/basic-server-angular/src/main.ts b/examples/basic-server-angular/src/main.ts new file mode 100644 index 000000000..33ee1fa7e --- /dev/null +++ b/examples/basic-server-angular/src/main.ts @@ -0,0 +1,9 @@ +import "@angular/compiler"; +import { bootstrapApplication } from "@angular/platform-browser"; +import { provideZonelessChangeDetection } from "@angular/core"; +import { AppComponent } from "./app.component"; +import "./global.css"; + +bootstrapApplication(AppComponent, { + providers: [provideZonelessChangeDetection()], +}).catch((err) => console.error(err)); diff --git a/examples/basic-server-angular/tsconfig.json b/examples/basic-server-angular/tsconfig.json new file mode 100644 index 000000000..63e4773e6 --- /dev/null +++ b/examples/basic-server-angular/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "lib": ["ESNext", "DOM", "DOM.Iterable"], + "module": "ESNext", + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "verbatimModuleSyntax": true, + "noEmit": true, + "strict": true, + "skipLibCheck": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "experimentalDecorators": true, + "useDefineForClassFields": false + }, + "include": ["src", "server.ts", "*.d.ts"] +} diff --git a/examples/basic-server-angular/tsconfig.server.json b/examples/basic-server-angular/tsconfig.server.json new file mode 100644 index 000000000..05ddd8ec4 --- /dev/null +++ b/examples/basic-server-angular/tsconfig.server.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2022"], + "module": "NodeNext", + "moduleResolution": "NodeNext", + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "./dist", + "rootDir": ".", + "strict": true, + "skipLibCheck": true, + "esModuleInterop": true, + "resolveJsonModule": true + }, + "include": ["server.ts"] +} diff --git a/examples/basic-server-angular/vite.config.ts b/examples/basic-server-angular/vite.config.ts new file mode 100644 index 000000000..93d261e81 --- /dev/null +++ b/examples/basic-server-angular/vite.config.ts @@ -0,0 +1,32 @@ +import { defineConfig } from "vite"; +import { viteSingleFile } from "vite-plugin-singlefile"; + +const INPUT = process.env.INPUT; +if (!INPUT) { + throw new Error("INPUT environment variable is not set"); +} + +const isDevelopment = process.env.NODE_ENV === "development"; + +export default defineConfig({ + plugins: [viteSingleFile()], + esbuild: { + // Enable decorator metadata for Angular + tsconfigRaw: { + compilerOptions: { + experimentalDecorators: true, + }, + }, + }, + build: { + sourcemap: isDevelopment ? "inline" : undefined, + cssMinify: !isDevelopment, + minify: !isDevelopment, + + rollupOptions: { + input: INPUT, + }, + outDir: "dist", + emptyOutDir: false, + }, +}); diff --git a/package-lock.json b/package-lock.json index c0c0c47d9..cd6143a9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -107,6 +107,148 @@ "dev": true, "license": "MIT" }, + "examples/basic-server-angular": { + "name": "@modelcontextprotocol/server-basic-angular", + "version": "1.7.0", + "license": "MIT", + "dependencies": { + "@angular/common": "^21.0.0", + "@angular/compiler": "^21.0.0", + "@angular/core": "^21.0.0", + "@angular/forms": "^21.0.0", + "@angular/platform-browser": "^21.0.0", + "@angular/platform-browser-dynamic": "^21.0.0", + "@modelcontextprotocol/ext-apps": "^1.0.0", + "@modelcontextprotocol/sdk": "^1.29.0", + "cors": "^2.8.5", + "express": "^5.1.0", + "rxjs": "^7.8.0", + "zod": "^4.1.13" + }, + "bin": { + "mcp-server-basic-angular": "dist/index.js" + }, + "devDependencies": { + "@types/cors": "^2.8.19", + "@types/express": "^5.0.0", + "@types/node": "22.10.0", + "concurrently": "^9.2.1", + "cross-env": "^10.1.0", + "typescript": "^5.9.3", + "vite": "^6.0.0", + "vite-plugin-singlefile": "^2.3.0" + } + }, + "examples/basic-server-angular/node_modules/@angular/common": { + "version": "20.3.19", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.19.tgz", + "integrity": "sha512-hcB1eUEN8LGcKGc4DlRJ+abS6AYfbEHDZKg8LnXNugkbwI6Ebyh2AUYTDhzZL2S4aH+C8biHKgSYHFCqieCRhA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/core": "20.3.19", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "examples/basic-server-angular/node_modules/@angular/compiler": { + "version": "20.3.19", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.19.tgz", + "integrity": "sha512-ETkgDKm0l2PuaBubgPJe0ccy8kE75DFu6/zKcz7TUuk3KrKF2OZAopbbjftsUSZGeCNvCdqHzjmcL6hQ6oAOwA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + } + }, + "examples/basic-server-angular/node_modules/@angular/core": { + "version": "20.3.19", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.19.tgz", + "integrity": "sha512-SYnwW+q51bQoPtGFoGovm1P5GK9fMEXsG0lGaEAUapjskblAYyX7hLlM/jgueSojv2SjhqNF8aXR+gjHLhZVNA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/compiler": "20.3.19", + "rxjs": "^6.5.3 || ^7.4.0", + "zone.js": "~0.15.0" + }, + "peerDependenciesMeta": { + "@angular/compiler": { + "optional": true + }, + "zone.js": { + "optional": true + } + } + }, + "examples/basic-server-angular/node_modules/@angular/forms": { + "version": "20.3.19", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.19.tgz", + "integrity": "sha512-WJotd+Lhl4FG2b0K+aQNyQDHhR515zKCuphjiUqEW7sifWrOQxANLKzPBngGrH75ayANFgPaDf7U3ZRIoblcQA==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/common": "20.3.19", + "@angular/core": "20.3.19", + "@angular/platform-browser": "20.3.19", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "examples/basic-server-angular/node_modules/@angular/platform-browser": { + "version": "20.3.19", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.19.tgz", + "integrity": "sha512-TRZfatH1B/kreDwFRwtpLEurJQ6044qh6DWpvxzTbugaG5otLQJKTk+1z81/KsJwQqc1+24v+yuywc1LM7aq7w==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/animations": "20.3.19", + "@angular/common": "20.3.19", + "@angular/core": "20.3.19" + }, + "peerDependenciesMeta": { + "@angular/animations": { + "optional": true + } + } + }, + "examples/basic-server-angular/node_modules/@types/node": { + "version": "22.10.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.0.tgz", + "integrity": "sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, + "examples/basic-server-angular/node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "examples/basic-server-preact": { "name": "@modelcontextprotocol/server-basic-preact", "version": "1.7.0", @@ -1107,6 +1249,103 @@ "dev": true, "license": "MIT" }, + "node_modules/@angular/common": { + "version": "21.2.9", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.9.tgz", + "integrity": "sha512-7spQcF3hPN/fjTx6Pwa32KRRdO0NcixnRuPV4lo50ejtXesjiLVR+fkaX38sawAyGoq89IuuYvUDrbLwCMypmQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/core": "21.2.9", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/compiler": { + "version": "21.2.9", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.9.tgz", + "integrity": "sha512-clsK1EsSPtAuqlRl4CciA/gsvsW7xe0eWcvHxtrMW6DYaUJ6X4AAuDxEEJ5cf/3Mpw4s8KssjIUPPtbrUIGLSQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + } + }, + "node_modules/@angular/core": { + "version": "21.2.9", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.9.tgz", + "integrity": "sha512-uZLq2aedJ+0uEZxyf6a1Nc7y1aZ7akAW7K1Kon8JUDZOvI2IDbk0i00MzkELt8q9uSmSSqg9zNKuhjspFf0Pyw==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/compiler": "21.2.9", + "rxjs": "^6.5.3 || ^7.4.0", + "zone.js": "~0.15.0 || ~0.16.0" + }, + "peerDependenciesMeta": { + "@angular/compiler": { + "optional": true + }, + "zone.js": { + "optional": true + } + } + }, + "node_modules/@angular/platform-browser": { + "version": "21.2.9", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.9.tgz", + "integrity": "sha512-MjEtFvoFtsjsAeu2yzauqGgwwEHV4ml25c9vGFmw4OmSoNme4yp41f2DegwOkn1TTHL3OF3GE65ng2U2feJU4Q==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/animations": "21.2.9", + "@angular/common": "21.2.9", + "@angular/core": "21.2.9" + }, + "peerDependenciesMeta": { + "@angular/animations": { + "optional": true + } + } + }, + "node_modules/@angular/platform-browser-dynamic": { + "version": "21.2.9", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.2.9.tgz", + "integrity": "sha512-Z+2vefW4GUSuTC4BOKNiyftqecLSjxOKwe1ZNljBsjesLzywIXi+v+tyEm8ODHHlf7bz/0HwXvc9OYZmfjt95A==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/common": "21.2.9", + "@angular/compiler": "21.2.9", + "@angular/core": "21.2.9", + "@angular/platform-browser": "21.2.9" + } + }, "node_modules/@babel/code-frame": { "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz", @@ -2637,6 +2876,10 @@ } } }, + "node_modules/@modelcontextprotocol/server-basic-angular": { + "resolved": "examples/basic-server-angular", + "link": true + }, "node_modules/@modelcontextprotocol/server-basic-preact": { "resolved": "examples/basic-server-preact", "link": true @@ -3188,6 +3431,354 @@ "win32" ] }, + "node_modules/@parcel/watcher": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz", + "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.5.6", + "@parcel/watcher-darwin-arm64": "2.5.6", + "@parcel/watcher-darwin-x64": "2.5.6", + "@parcel/watcher-freebsd-x64": "2.5.6", + "@parcel/watcher-linux-arm-glibc": "2.5.6", + "@parcel/watcher-linux-arm-musl": "2.5.6", + "@parcel/watcher-linux-arm64-glibc": "2.5.6", + "@parcel/watcher-linux-arm64-musl": "2.5.6", + "@parcel/watcher-linux-x64-glibc": "2.5.6", + "@parcel/watcher-linux-x64-musl": "2.5.6", + "@parcel/watcher-win32-arm64": "2.5.6", + "@parcel/watcher-win32-ia32": "2.5.6", + "@parcel/watcher-win32-x64": "2.5.6" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz", + "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz", + "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz", + "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz", + "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz", + "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz", + "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz", + "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz", + "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz", + "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz", + "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz", + "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz", + "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz", + "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@pdf-lib/standard-fonts": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", @@ -6431,6 +7022,15 @@ "dev": true, "license": "ISC" }, + "node_modules/immutable": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz", + "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -7783,7 +8383,6 @@ "version": "7.8.2", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz", "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==", - "dev": true, "license": "Apache-2.0", "dependencies": { "tslib": "^2.1.0" @@ -7795,6 +8394,63 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, + "node_modules/sass": { + "version": "1.90.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz", + "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.0.2", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", + "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/scheduler": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", @@ -8751,7 +9407,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "dev": true, "license": "0BSD" }, "node_modules/tsutils": { @@ -9986,6 +10641,14 @@ "peerDependencies": { "zod": "^3.25 || ^4" } + }, + "node_modules/zone.js": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz", + "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==", + "license": "MIT", + "optional": true, + "peer": true } } } diff --git a/tests/e2e/servers.spec.ts b/tests/e2e/servers.spec.ts index a3c30d8a8..bd7f774ac 100644 --- a/tests/e2e/servers.spec.ts +++ b/tests/e2e/servers.spec.ts @@ -8,6 +8,7 @@ import { test, expect, type Page, type ConsoleMessage } from "@playwright/test"; // Note: map-server uses SLOW_SERVERS timeout instead of masking to wait for tiles const DYNAMIC_MASKS: Record = { integration: ['[class*="serverTime"]'], // Server time display [CSS module] + "basic-angular": [".server-time"], // Server time display (component-scoped) "basic-preact": ['[class*="serverTime"]'], // Server time display [CSS module] "basic-react": ['[class*="serverTime"]'], // Server time display [CSS module] "basic-solid": ['[class*="serverTime"]'], // Server time display [CSS module] @@ -45,6 +46,7 @@ const HOST_MASKS: Record = { // Servers with dynamic timestamps in Tool Result (get-time response) // Mask entire collapsible panels to avoid font rendering differences integration: ['[class*="collapsiblePanel"]'], + "basic-angular": ['[class*="collapsiblePanel"]'], "basic-preact": ['[class*="collapsiblePanel"]'], "basic-react": ['[class*="collapsiblePanel"]'], "basic-solid": ['[class*="collapsiblePanel"]'], @@ -71,6 +73,11 @@ const ALL_SERVERS = [ name: "Integration Test Server", dir: "integration-server", }, + { + key: "basic-angular", + name: "Basic MCP App Server (Angular)", + dir: "basic-server-angular", + }, { key: "basic-preact", name: "Basic MCP App Server (Preact)", diff --git a/tests/e2e/servers.spec.ts-snapshots/basic-angular.png b/tests/e2e/servers.spec.ts-snapshots/basic-angular.png new file mode 100644 index 0000000000000000000000000000000000000000..6c603c2cc93a5794fc9b8d4b9c95fd5afbae0bf8 GIT binary patch literal 40473 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

MD)!V5U?e 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 literal 0 HcmV?d00001 From 687e1bdf5314d308ad95cb8d9c40486ceae0ac16 Mon Sep 17 00:00:00 2001 From: Dale Nguyen Date: Mon, 27 Apr 2026 13:42:23 -0400 Subject: [PATCH 2/2] feat: support more angular uis --- docs/blog/angular-mcp-apps.md | 716 ++++++++++++++++++ .../basic-server-angular/greeting-app.html | 14 + examples/basic-server-angular/package.json | 2 +- examples/basic-server-angular/server.ts | 49 +- .../basic-server-angular/src/greeting-main.ts | 9 + .../src/greeting.component.ts | 180 +++++ 6 files changed, 959 insertions(+), 11 deletions(-) create mode 100644 docs/blog/angular-mcp-apps.md create mode 100644 examples/basic-server-angular/greeting-app.html create mode 100644 examples/basic-server-angular/src/greeting-main.ts create mode 100644 examples/basic-server-angular/src/greeting.component.ts diff --git a/docs/blog/angular-mcp-apps.md b/docs/blog/angular-mcp-apps.md new file mode 100644 index 000000000..c86dcd271 --- /dev/null +++ b/docs/blog/angular-mcp-apps.md @@ -0,0 +1,716 @@ +# Building MCP Apps with Angular + +If you've been building MCP servers, you know the drill: your tool returns JSON, the host renders it as text, and the user squints at a timestamp string. [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) change that — they let your server ship an interactive UI that the host renders in an iframe, right inside the conversation. + +MCP Apps are built on the **Model Context Protocol** — an open standard. They're not tied to Claude or any specific AI provider. Any host that implements the MCP Apps specification (Claude Desktop, custom chat clients, or other AI assistants that adopt MCP) can render your UI. You build it once, and it works everywhere MCP is supported. + +This post walks through building MCP Apps with Angular. We'll start with a single tool, add a second tool with its own UI, and then show how to share code between them without bloating either bundle. + +## How MCP Apps Work (Quick Recap) + +``` +View (Angular App) <--PostMessageTransport--> Host (AppBridge) <--MCP Client--> MCP Server +``` + +- **Server** registers tools and resources. Each tool can point to a resource URI containing the UI. +- **Host** (the chat client) fetches that resource and renders it in a sandboxed iframe. +- **View** is your Angular app running inside that iframe. It uses the `App` class from `@modelcontextprotocol/ext-apps` to communicate with the host. + +The key insight: your UI is bundled into a **single self-contained HTML file** using Vite and `vite-plugin-singlefile`. The host doesn't need to know it's Angular — it just loads HTML. + +## Project Structure + +``` +basic-server-angular/ +├── mcp-app.html # HTML entry point for UI #1 +├── greeting-app.html # HTML entry point for UI #2 +├── src/ +│ ├── main.ts # Angular bootstrap for UI #1 +│ ├── app.component.ts # Get Time component +│ ├── greeting-main.ts # Angular bootstrap for UI #2 +│ ├── greeting.component.ts # Greeting component +│ ├── shared/ +│ │ └── mcp-app-setup.ts # Shared App + theming setup +│ └── global.css # Host-aware CSS variables +├── server.ts # MCP server (registers tools + resources) +├── main.ts # Server entry point (HTTP + stdio) +└── vite.config.ts # Builds each HTML into a single file +``` + +## Step 1: The Server + +Every MCP App starts on the server side. You register a **tool** (what the LLM calls) and a **resource** (the HTML that gets rendered). They're linked by a resource URI. + +```ts +// server.ts +import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; +import type { + CallToolResult, + ReadResourceResult, +} from "@modelcontextprotocol/sdk/types.js"; +import fs from "node:fs/promises"; +import path from "node:path"; +import { + registerAppTool, + registerAppResource, + RESOURCE_MIME_TYPE, +} from "@modelcontextprotocol/ext-apps/server"; + +const DIST_DIR = import.meta.filename.endsWith(".ts") + ? path.join(import.meta.dirname, "dist") + : import.meta.dirname; + +export function createServer(): McpServer { + const server = new McpServer({ + name: "Basic MCP App Server (Angular)", + version: "1.0.0", + }); + + const resourceUri = "ui://get-time/mcp-app.html"; + + // Register the tool — this is what the LLM calls + registerAppTool( + server, + "get-time", + { + title: "Get Time", + description: "Returns the current server time as an ISO 8601 string.", + inputSchema: {}, + _meta: { ui: { resourceUri } }, // Links this tool to its UI + }, + async (): Promise => { + const time = new Date().toISOString(); + return { content: [{ type: "text", text: time }] }; + }, + ); + + // Register the resource — the bundled HTML for this tool's UI + registerAppResource( + server, + resourceUri, + resourceUri, + { + mimeType: RESOURCE_MIME_TYPE, + }, + async (): Promise => { + const html = await fs.readFile( + path.join(DIST_DIR, "mcp-app.html"), + "utf-8", + ); + return { + contents: [ + { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + ], + }; + }, + ); + + return server; +} +``` + +The `_meta.ui.resourceUri` is the glue. When the host calls this tool, it reads that field to know which resource to fetch and render. + +## Step 2: The HTML Entry Point + +Each UI needs an HTML file at the project root. This is the Vite entry point that gets bundled into a single self-contained file. + +```html + + + + + + + + Get Time App + + + + + + + +``` + +## Step 3: The Angular App + +The bootstrap is minimal — Angular 19+ with zoneless change detection: + +```ts +// src/main.ts +import "@angular/compiler"; +import { bootstrapApplication } from "@angular/platform-browser"; +import { provideZonelessChangeDetection } from "@angular/core"; +import { AppComponent } from "./app.component"; +import "./global.css"; + +bootstrapApplication(AppComponent, { + providers: [provideZonelessChangeDetection()], +}).catch((err) => console.error(err)); +``` + +Now the component itself. The `App` class from `@modelcontextprotocol/ext-apps` is the bridge between your Angular code and the host: + +```ts +// src/app.component.ts +import { Component, type OnInit, signal } from "@angular/core"; +import { + App, + applyDocumentTheme, + applyHostStyleVariables, + applyHostFonts, + type McpUiHostContext, +} from "@modelcontextprotocol/ext-apps"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +function extractText(result: CallToolResult): string { + return result.content?.find((c) => c.type === "text")!.text; +} + +@Component({ + selector: "app-root", + template: ` +

+

+ Server Time: {{ serverTime() }} +

+ +
+ `, +}) +export class AppComponent implements OnInit { + private app: App | null = null; + hostContext = signal(undefined); + serverTime = signal("Loading..."); + + async ngOnInit() { + const instance = new App({ name: "Get Time App", version: "1.0.0" }); + + // Called when the host sends tool results back to the UI + instance.ontoolresult = (result) => { + this.serverTime.set(extractText(result)); + }; + + // Respond to theme and style changes from the host + instance.onhostcontextchanged = (params) => { + const ctx = { ...this.hostContext(), ...params }; + this.hostContext.set(ctx); + if (ctx.theme) applyDocumentTheme(ctx.theme); + if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables); + if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts); + }; + + // Connect to the host via PostMessageTransport + await instance.connect(); + this.app = instance; + + // Apply initial host context + const ctx = instance.getHostContext(); + this.hostContext.set(ctx); + if (ctx?.theme) applyDocumentTheme(ctx.theme); + if (ctx?.styles?.variables) applyHostStyleVariables(ctx.styles.variables); + if (ctx?.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts); + } + + async handleGetTime() { + if (!this.app) return; + try { + const result = await this.app.callServerTool({ + name: "get-time", + arguments: {}, + }); + this.serverTime.set(extractText(result)); + } catch { + this.serverTime.set("[ERROR]"); + } + } +} +``` + +A few things to note: + +- **`App` class** — this is the SDK's main entry point. You create one, wire up callbacks, and call `connect()`. That's it. +- **`ontoolresult`** — fires when the host sends a tool result. This is how data flows from the server to your UI. +- **`callServerTool()`** — lets the UI call tools on the server. The host proxies this through the MCP client. +- **`onhostcontextchanged`** — the host pushes theme and style updates. The helper functions (`applyDocumentTheme`, etc.) apply them as CSS variables on `document`, so your component styles just work. +- **`safeAreaInsets`** — the host tells you how much padding to leave for its chrome. Use it on your root container. + +## Step 4: Adding a Second UI + +Here's where it gets interesting. Say you want a "Greet" tool with its own UI. Each tool gets its own HTML entry point, its own Angular app, and its own resource registration. + +### Server: Register Both Tools + +```ts +// server.ts — inside createServer() + +// Tool #1: Get Time +const timeResourceUri = "ui://get-time/mcp-app.html"; +registerAppTool( + server, + "get-time", + { + title: "Get Time", + description: "Returns the current server time.", + inputSchema: {}, + _meta: { ui: { resourceUri: timeResourceUri } }, + }, + async (): Promise => { + return { content: [{ type: "text", text: new Date().toISOString() }] }; + }, +); +registerAppResource( + server, + timeResourceUri, + timeResourceUri, + { + mimeType: RESOURCE_MIME_TYPE, + }, + async (): Promise => { + const html = await fs.readFile( + path.join(DIST_DIR, "mcp-app.html"), + "utf-8", + ); + return { + contents: [ + { uri: timeResourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + ], + }; + }, +); + +// Tool #2: Greet +const greetResourceUri = "ui://greet/greeting-app.html"; +registerAppTool( + server, + "greet", + { + title: "Greet", + description: "Returns a personalised greeting.", + inputSchema: { + name: z.string().optional().default("World").describe("Name to greet"), + }, + _meta: { ui: { resourceUri: greetResourceUri } }, + }, + async ({ name }: { name?: string }): Promise => { + const greeting = `Hello, ${name || "World"}! Welcome to the MCP Apps SDK.`; + return { content: [{ type: "text", text: greeting }] }; + }, +); +registerAppResource( + server, + greetResourceUri, + greetResourceUri, + { + mimeType: RESOURCE_MIME_TYPE, + }, + async (): Promise => { + const html = await fs.readFile( + path.join(DIST_DIR, "greeting-app.html"), + "utf-8", + ); + return { + contents: [ + { uri: greetResourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + ], + }; + }, +); +``` + +### Greeting Component + +The greeting UI is a completely separate Angular app: + +```html + + + + + + + + Greeting App + + + + + + + +``` + +```ts +// src/greeting-main.ts +import "@angular/compiler"; +import { bootstrapApplication } from "@angular/platform-browser"; +import { provideZonelessChangeDetection } from "@angular/core"; +import { GreetingComponent } from "./greeting.component"; +import "./global.css"; + +bootstrapApplication(GreetingComponent, { + providers: [provideZonelessChangeDetection()], +}).catch((err) => console.error(err)); +``` + +```ts +// src/greeting.component.ts +import { Component, type OnInit, signal } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { + App, + applyDocumentTheme, + applyHostStyleVariables, + applyHostFonts, + type McpUiHostContext, +} from "@modelcontextprotocol/ext-apps"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +function extractText(result: CallToolResult): string { + return result.content?.find((c) => c.type === "text")!.text; +} + +@Component({ + selector: "greeting-root", + imports: [FormsModule], + template: ` +
+
+ + + +
+ + @if (greeting()) { +
{{ greeting() }}
+ } +
+ `, +}) +export class GreetingComponent implements OnInit { + private app: App | null = null; + hostContext = signal(undefined); + greeting = signal(""); + nameText = ""; + + async ngOnInit() { + const instance = new App({ name: "Greeting App", version: "1.0.0" }); + + instance.ontoolresult = (result) => { + this.greeting.set(extractText(result)); + }; + + instance.onhostcontextchanged = (params) => { + const ctx = { ...this.hostContext(), ...params }; + this.hostContext.set(ctx); + if (ctx.theme) applyDocumentTheme(ctx.theme); + if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables); + if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts); + }; + + await instance.connect(); + this.app = instance; + + const ctx = instance.getHostContext(); + this.hostContext.set(ctx); + if (ctx?.theme) applyDocumentTheme(ctx.theme); + if (ctx?.styles?.variables) applyHostStyleVariables(ctx.styles.variables); + if (ctx?.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts); + } + + async handleGreet() { + if (!this.app) return; + try { + const name = this.nameText.trim() || "World"; + const result = await this.app.callServerTool({ + name: "greet", + arguments: { name }, + }); + this.greeting.set(extractText(result)); + } catch { + this.greeting.set("[ERROR]"); + } + } +} +``` + +## Step 5: Sharing Code Between UIs + +You probably noticed that both components have identical `App` setup and theming boilerplate. That's a great candidate for extraction — and since each HTML is a separate Vite entry point, **Vite's tree-shaking ensures each bundle only includes what it actually imports**. + +Create a shared setup module: + +```ts +// src/shared/mcp-app-setup.ts +import { + App, + applyDocumentTheme, + applyHostStyleVariables, + applyHostFonts, + type McpUiHostContext, +} from "@modelcontextprotocol/ext-apps"; +import type { WritableSignal } from "@angular/core"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +/** + * Extract text content from a tool result. + */ +export function extractText(result: CallToolResult): string { + return result.content?.find((c) => c.type === "text")!.text; +} + +/** + * Apply host context (theme, styles, fonts) to the document. + */ +function applyContext(ctx: McpUiHostContext): void { + if (ctx.theme) applyDocumentTheme(ctx.theme); + if (ctx.styles?.variables) applyHostStyleVariables(ctx.styles.variables); + if (ctx.styles?.css?.fonts) applyHostFonts(ctx.styles.css.fonts); +} + +/** + * Create and connect an MCP App instance with standard host-context + * handling wired up. Both UIs call this instead of duplicating setup. + */ +export async function createMcpApp( + name: string, + hostContext: WritableSignal, + onToolResult?: (result: CallToolResult) => void, +): Promise { + const app = new App({ name, version: "1.0.0" }); + + app.ontoolinput = (params) => console.info("Received tool input:", params); + app.ontoolcancelled = (params) => + console.info("Tool cancelled:", params.reason); + app.onerror = console.error; + + if (onToolResult) { + app.ontoolresult = onToolResult; + } + + app.onhostcontextchanged = (params) => { + const ctx = { ...hostContext(), ...params } as McpUiHostContext; + hostContext.set(ctx); + applyContext(ctx); + }; + + await app.connect(); + + const ctx = app.getHostContext(); + hostContext.set(ctx); + if (ctx) applyContext(ctx); + + return app; +} +``` + +Now both components become much simpler: + +```ts +// src/app.component.ts — simplified +import { Component, type OnInit, signal } from "@angular/core"; +import type { McpUiHostContext } from "@modelcontextprotocol/ext-apps"; +import type { App } from "@modelcontextprotocol/ext-apps"; +import { createMcpApp, extractText } from "./shared/mcp-app-setup"; + +@Component({ + selector: "app-root", + template: ` +
+

+ Server Time: {{ serverTime() }} +

+ +
+ `, +}) +export class AppComponent implements OnInit { + private app: App | null = null; + hostContext = signal(undefined); + serverTime = signal("Loading..."); + + async ngOnInit() { + this.app = await createMcpApp("Get Time App", this.hostContext, (result) => + this.serverTime.set(extractText(result)), + ); + } + + async handleGetTime() { + if (!this.app) return; + try { + const result = await this.app.callServerTool({ + name: "get-time", + arguments: {}, + }); + this.serverTime.set(extractText(result)); + } catch { + this.serverTime.set("[ERROR]"); + } + } +} +``` + +```ts +// src/greeting.component.ts — simplified +import { Component, type OnInit, signal } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import type { McpUiHostContext } from "@modelcontextprotocol/ext-apps"; +import type { App } from "@modelcontextprotocol/ext-apps"; +import { createMcpApp, extractText } from "./shared/mcp-app-setup"; + +@Component({ + selector: "greeting-root", + imports: [FormsModule], + template: ` +
+ + + + @if (greeting()) { +
{{ greeting() }}
+ } +
+ `, +}) +export class GreetingComponent implements OnInit { + private app: App | null = null; + hostContext = signal(undefined); + greeting = signal(""); + nameText = ""; + + async ngOnInit() { + this.app = await createMcpApp("Greeting App", this.hostContext, (result) => + this.greeting.set(extractText(result)), + ); + } + + async handleGreet() { + if (!this.app) return; + try { + const name = this.nameText.trim() || "World"; + const result = await this.app.callServerTool({ + name: "greet", + arguments: { name }, + }); + this.greeting.set(extractText(result)); + } catch { + this.greeting.set("[ERROR]"); + } + } +} +``` + +Both components import `createMcpApp` and `extractText` from the shared module. Since they're in separate Vite builds, tree-shaking still applies — if you add more shared utilities later, each bundle only pulls in what it calls. + +### Sharing Models and Types + +The same principle works for shared data models. If both UIs work with common types — say a user profile that comes from the server: + +```ts +// src/shared/models.ts +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +export interface UserProfile { + name: string; + email: string; + role: "admin" | "viewer"; +} + +export function parseUserProfile(result: CallToolResult): UserProfile { + const text = result.content?.find((c) => c.type === "text")!.text; + return JSON.parse(text) as UserProfile; +} +``` + +Both components can `import { UserProfile, parseUserProfile } from "./shared/models"` — the types are erased at build time (zero cost), and the parser function is only included in bundles that call it. This is a natural place to put validation logic, formatters, or any domain code that multiple UIs need. + +## Step 6: The Build + +The Vite config uses an `INPUT` environment variable to select which HTML file to build: + +```ts +// vite.config.ts +import { defineConfig } from "vite"; +import { viteSingleFile } from "vite-plugin-singlefile"; + +const INPUT = process.env.INPUT; +if (!INPUT) throw new Error("INPUT environment variable is not set"); + +export default defineConfig({ + plugins: [viteSingleFile()], + build: { + rollupOptions: { input: INPUT }, + outDir: "dist", + emptyOutDir: false, // Key: don't wipe previous builds + }, +}); +``` + +The `emptyOutDir: false` is important — it lets you run Vite multiple times, once per HTML file, into the same `dist/` directory. + +The build script chains them: + +```json +{ + "scripts": { + "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && cross-env INPUT=greeting-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node" + } +} +``` + +Each HTML file produces a fully self-contained output (all JS, CSS, and Angular runtime inlined). The two bundles are completely independent. + +## Theming: Looking Native in Any Host + +MCP Apps can look native in any host (Claude Desktop, a custom chat client, etc.) by using CSS variables that the host provides. The `global.css` file defines sensible fallbacks: + +```css +:root { + color-scheme: light dark; + + --color-text-primary: light-dark(#1f2937, #f3f4f6); + --color-background-primary: light-dark(#ffffff, #1a1a1a); + --color-accent: #2563eb; + --color-text-on-accent: #ffffff; + --border-radius-md: 6px; + + --spacing-unit: var(--font-text-md-size); + --spacing-sm: calc(var(--spacing-unit) * 0.5); + --spacing-md: var(--spacing-unit); + --spacing-lg: calc(var(--spacing-unit) * 1.5); + + /* ... more variables */ +} +``` + +When the host sends style updates via `onhostcontextchanged`, the helper functions overwrite these variables on the document root. Your Angular component styles reference the variables (`var(--color-accent)`, `var(--spacing-md)`), so they adapt automatically — no theme prop drilling needed. + +## Recap + +The pattern for building Angular MCP Apps: + +1. **Server**: register a tool + resource pair per UI, linked by a resource URI +2. **HTML**: one entry point per UI, each bootstrapping its own Angular app +3. **Component**: create an `App` instance, wire up callbacks, call `connect()` +4. **Shared code**: extract common setup into a shared module — Vite tree-shakes per entry point +5. **Build**: run Vite once per HTML file into the same `dist/` directory +6. **Theming**: use host CSS variables with fallbacks, apply updates via `onhostcontextchanged` + +Each UI is a self-contained Angular application. They share a server, they can share code, but their bundles are independent. Add a third tool? Same pattern — new HTML, new component, new registration, one more `vite build` in the chain. + +The full source is available in the [ext-apps examples](https://github.com/anthropics/ext-apps/tree/main/examples/basic-server-angular). diff --git a/examples/basic-server-angular/greeting-app.html b/examples/basic-server-angular/greeting-app.html new file mode 100644 index 000000000..44607bdf0 --- /dev/null +++ b/examples/basic-server-angular/greeting-app.html @@ -0,0 +1,14 @@ + + + + + + + Greeting App + + + + + + + diff --git a/examples/basic-server-angular/package.json b/examples/basic-server-angular/package.json index 9899ccf85..da8908e7d 100644 --- a/examples/basic-server-angular/package.json +++ b/examples/basic-server-angular/package.json @@ -14,7 +14,7 @@ "dist" ], "scripts": { - "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"", + "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && cross-env INPUT=greeting-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"", "watch": "cross-env INPUT=mcp-app.html vite build --watch", "serve": "bun --watch main.ts", "serve:stdio": "bun main.ts --stdio", diff --git a/examples/basic-server-angular/server.ts b/examples/basic-server-angular/server.ts index 363b4e81e..bcf3aecba 100644 --- a/examples/basic-server-angular/server.ts +++ b/examples/basic-server-angular/server.ts @@ -2,6 +2,7 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"; import type { CallToolResult, ReadResourceResult } from "@modelcontextprotocol/sdk/types.js"; import fs from "node:fs/promises"; import path from "node:path"; +import { z } from "zod"; import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server"; // Works both from source (server.ts) and compiled (dist/server.js) const DIST_DIR = import.meta.filename.endsWith(".ts") @@ -17,19 +18,16 @@ export function createServer(): McpServer { version: "1.0.0", }); - // Two-part registration: tool + resource, tied together by the resource URI. - const resourceUri = "ui://get-time/mcp-app.html"; + // ── Get Time ────────────────────────────────────────────────────────── + const timeResourceUri = "ui://get-time/mcp-app.html"; - // Register a tool with UI metadata. When the host calls this tool, it reads - // `_meta.ui.resourceUri` to know which resource to fetch and render as an - // interactive UI. registerAppTool(server, "get-time", { title: "Get Time", description: "Returns the current server time as an ISO 8601 string.", inputSchema: {}, - _meta: { ui: { resourceUri } }, // Links this tool to its UI resource + _meta: { ui: { resourceUri: timeResourceUri } }, }, async (): Promise => { const time = new Date().toISOString(); @@ -37,17 +35,48 @@ export function createServer(): McpServer { }, ); - // Register the resource, which returns the bundled HTML/JavaScript for the UI. registerAppResource(server, - resourceUri, - resourceUri, + timeResourceUri, + timeResourceUri, { mimeType: RESOURCE_MIME_TYPE }, async (): Promise => { const html = await fs.readFile(path.join(DIST_DIR, "mcp-app.html"), "utf-8"); + return { + contents: [ + { uri: timeResourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + ], + }; + }, + ); + + // ── Greet ─────────────────────────────────────────────────────────── + const greetResourceUri = "ui://greet/greeting-app.html"; + + registerAppTool(server, + "greet", + { + title: "Greet", + description: "Returns a personalised greeting for the given name.", + inputSchema: { + name: z.string().optional().default("World").describe("Name to greet"), + }, + _meta: { ui: { resourceUri: greetResourceUri } }, + }, + async ({ name }: { name?: string }): Promise => { + const greeting = `Hello, ${name || "World"}! Welcome to the MCP Apps SDK.`; + return { content: [{ type: "text", text: greeting }] }; + }, + ); + registerAppResource(server, + greetResourceUri, + greetResourceUri, + { mimeType: RESOURCE_MIME_TYPE }, + async (): Promise => { + const html = await fs.readFile(path.join(DIST_DIR, "greeting-app.html"), "utf-8"); return { contents: [ - { uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, + { uri: greetResourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }, ], }; }, diff --git a/examples/basic-server-angular/src/greeting-main.ts b/examples/basic-server-angular/src/greeting-main.ts new file mode 100644 index 000000000..748ebba37 --- /dev/null +++ b/examples/basic-server-angular/src/greeting-main.ts @@ -0,0 +1,9 @@ +import "@angular/compiler"; +import { bootstrapApplication } from "@angular/platform-browser"; +import { provideZonelessChangeDetection } from "@angular/core"; +import { GreetingComponent } from "./greeting.component"; +import "./global.css"; + +bootstrapApplication(GreetingComponent, { + providers: [provideZonelessChangeDetection()], +}).catch((err) => console.error(err)); diff --git a/examples/basic-server-angular/src/greeting.component.ts b/examples/basic-server-angular/src/greeting.component.ts new file mode 100644 index 000000000..f040231be --- /dev/null +++ b/examples/basic-server-angular/src/greeting.component.ts @@ -0,0 +1,180 @@ +import { Component, type OnInit, signal } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { + App, + applyDocumentTheme, + applyHostFonts, + applyHostStyleVariables, + type McpUiHostContext, +} from "@modelcontextprotocol/ext-apps"; +import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js"; + +function extractGreeting(result: CallToolResult): string { + const { text } = result.content?.find((c) => c.type === "text")!; + return text; +} + +@Component({ + selector: "greeting-root", + imports: [FormsModule], + styles: ` + .main { + width: 100%; + max-width: 425px; + box-sizing: border-box; + + > * { + margin-top: 0; + margin-bottom: 0; + } + + > * + * { + margin-top: var(--spacing-lg); + } + } + + .action { + > * { + margin-top: 0; + margin-bottom: 0; + width: 100%; + } + + > * + * { + margin-top: var(--spacing-sm); + } + + input { + display: block; + font-family: inherit; + font-size: inherit; + padding: var(--spacing-sm); + border: var(--border-width-regular) solid color-mix(in srgb, var(--color-text-primary) 30%, transparent); + border-radius: var(--border-radius-md); + background: var(--color-background-primary); + color: var(--color-text-primary); + } + + button { + padding: var(--spacing-sm) var(--spacing-md); + border: none; + border-radius: var(--border-radius-md); + color: var(--color-text-on-accent); + font-weight: var(--font-weight-bold); + background-color: var(--color-accent); + cursor: pointer; + + &:hover { + background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse)); + } + + &:focus-visible { + outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary); + outline-offset: var(--border-width-regular); + } + } + } + + .greeting-display { + padding: var(--spacing-md); + border-radius: var(--border-radius-md); + background-color: var(--color-background-info); + color: var(--color-text-info); + text-align: center; + font-size: var(--font-heading-lg-size); + line-height: var(--font-heading-lg-line-height); + } + `, + template: ` +
+
+ + + +
+ + @if (greeting()) { +
{{ greeting() }}
+ } +
+ `, +}) +export class GreetingComponent implements OnInit { + private app: App | null = null; + + hostContext = signal(undefined); + greeting = signal(""); + nameText = ""; + + async ngOnInit() { + const instance = new App({ name: "Greeting App", version: "1.0.0" }); + + instance.ontoolinput = (params) => { + console.info("Received tool call input:", params); + }; + + instance.ontoolresult = (result) => { + console.info("Received tool call result:", result); + this.greeting.set(extractGreeting(result)); + }; + + instance.ontoolcancelled = (params) => { + console.info("Tool call cancelled:", params.reason); + }; + + instance.onerror = console.error; + + instance.onhostcontextchanged = (params) => { + const ctx = { ...this.hostContext(), ...params }; + this.hostContext.set(ctx); + + if (ctx.theme) { + applyDocumentTheme(ctx.theme); + } + if (ctx.styles?.variables) { + applyHostStyleVariables(ctx.styles.variables); + } + if (ctx.styles?.css?.fonts) { + applyHostFonts(ctx.styles.css.fonts); + } + }; + + await instance.connect(); + this.app = instance; + + const ctx = instance.getHostContext(); + this.hostContext.set(ctx); + if (ctx?.theme) { + applyDocumentTheme(ctx.theme); + } + if (ctx?.styles?.variables) { + applyHostStyleVariables(ctx.styles.variables); + } + if (ctx?.styles?.css?.fonts) { + applyHostFonts(ctx.styles.css.fonts); + } + } + + async handleGreet() { + if (!this.app) return; + try { + const name = this.nameText.trim() || "World"; + console.info("Calling greet tool with name:", name); + const result = await this.app.callServerTool({ + name: "greet", + arguments: { name }, + }); + console.info("greet result:", result); + this.greeting.set(extractGreeting(result)); + } catch (e) { + console.error(e); + this.greeting.set("[ERROR]"); + } + } +}