Add basic-server-* examples for Vue, Svelte, Preact, and Solid (#141)
* Add basic-server-vue example Demonstrates MCP App SDK usage with Vue 3, providing framework parity alongside the existing React and vanilla JS examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-svelte example Demonstrates MCP App SDK usage with Svelte, providing parity with the existing basic-server-react and basic-server-vue examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-preact example Demonstrates MCP App SDK usage with Preact, providing another lightweight framework option alongside the existing React, Vue, and Svelte examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add basic-server-solid example Demonstrates MCP App SDK usage with Solid.js, providing another reactive framework option alongside the existing React, Vue, Svelte, and Preact examples. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add framework GitHub links to README Link each framework name to its official GitHub repo in basic examples list. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner
GitHub
parent
79670b4dcd
commit
8acec0eaad
11 changed files with 3115 additions and 963 deletions
30
examples/basic-server-vue/README.md
Normal file
30
examples/basic-server-vue/README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# 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`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
|
||||
|
||||
## Overview
|
||||
|
||||
- Tool registration with a linked UI resource
|
||||
- Vue 3 UI using the [`App`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html) class
|
||||
- App communication APIs: [`callServerTool`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#callservertool), [`sendMessage`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendmessage), [`sendLog`](https://modelcontextprotocol.github.io/ext-apps/api/classes/app.App.html#sendlog), [`openLink`](https://modelcontextprotocol.github.io/ext-apps/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.vue`](src/App.vue) - Vue 3 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.
|
||||
7
examples/basic-server-vue/env.d.ts
vendored
Normal file
7
examples/basic-server-vue/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module "*.vue" {
|
||||
import type { DefineComponent } from "vue";
|
||||
const component: DefineComponent<object, object, unknown>;
|
||||
export default component;
|
||||
}
|
||||
14
examples/basic-server-vue/mcp-app.html
Normal file
14
examples/basic-server-vue/mcp-app.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>Get Time App</title>
|
||||
<link rel="stylesheet" href="/src/global.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/mcp-app.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
examples/basic-server-vue/package.json
Normal file
32
examples/basic-server-vue/package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "basic-server-vue",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build",
|
||||
"watch": "cross-env INPUT=mcp-app.html vite build --watch",
|
||||
"serve": "bun server.ts",
|
||||
"start": "cross-env NODE_ENV=development npm run build && npm run serve",
|
||||
"dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/ext-apps": "../..",
|
||||
"@modelcontextprotocol/sdk": "^1.24.0",
|
||||
"vue": "^3.5.0",
|
||||
"zod": "^4.1.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.0",
|
||||
"@types/node": "^22.0.0",
|
||||
"@vitejs/plugin-vue": "^5.0.0",
|
||||
"concurrently": "^9.2.1",
|
||||
"cors": "^2.8.5",
|
||||
"cross-env": "^7.0.3",
|
||||
"express": "^5.1.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-singlefile": "^2.3.0"
|
||||
}
|
||||
}
|
||||
58
examples/basic-server-vue/server.ts
Normal file
58
examples/basic-server-vue/server.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { registerAppResource, registerAppTool, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";
|
||||
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 { startServer } from "./src/server-utils.js";
|
||||
|
||||
const DIST_DIR = path.join(import.meta.dirname, "dist");
|
||||
|
||||
/**
|
||||
* Creates a new MCP server instance with tools and resources registered.
|
||||
*/
|
||||
function createServer(): McpServer {
|
||||
const server = new McpServer({
|
||||
name: "Basic MCP App Server (Vue)",
|
||||
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 } },
|
||||
},
|
||||
async (): Promise<CallToolResult> => {
|
||||
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<ReadResourceResult> => {
|
||||
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;
|
||||
}
|
||||
|
||||
startServer(createServer);
|
||||
188
examples/basic-server-vue/src/App.vue
Normal file
188
examples/basic-server-vue/src/App.vue
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { App, type McpUiHostContext } from "@modelcontextprotocol/ext-apps";
|
||||
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
|
||||
|
||||
const log = {
|
||||
info: console.log.bind(console, "[APP]"),
|
||||
warn: console.warn.bind(console, "[APP]"),
|
||||
error: console.error.bind(console, "[APP]"),
|
||||
};
|
||||
|
||||
function extractTime(result: CallToolResult): string {
|
||||
const { text } = result.content?.find((c) => c.type === "text")!;
|
||||
return text;
|
||||
}
|
||||
|
||||
const app = ref<App | null>(null);
|
||||
const hostContext = ref<McpUiHostContext | undefined>();
|
||||
const serverTime = ref("Loading...");
|
||||
const messageText = ref("This is message text.");
|
||||
const logText = ref("This is log text.");
|
||||
const linkUrl = ref("https://modelcontextprotocol.io/");
|
||||
|
||||
onMounted(async () => {
|
||||
const instance = new App({ name: "Get Time App", version: "1.0.0" });
|
||||
|
||||
instance.ontoolinput = (params) => {
|
||||
log.info("Received tool call input:", params);
|
||||
};
|
||||
|
||||
instance.ontoolresult = (result) => {
|
||||
log.info("Received tool call result:", result);
|
||||
serverTime.value = extractTime(result);
|
||||
};
|
||||
|
||||
instance.onerror = log.error;
|
||||
|
||||
instance.onhostcontextchanged = (params) => {
|
||||
hostContext.value = { ...hostContext.value, ...params };
|
||||
};
|
||||
|
||||
await instance.connect();
|
||||
app.value = instance;
|
||||
hostContext.value = instance.getHostContext();
|
||||
});
|
||||
|
||||
async function handleGetTime() {
|
||||
if (!app.value) return;
|
||||
try {
|
||||
log.info("Calling get-time tool...");
|
||||
const result = await app.value.callServerTool({ name: "get-time", arguments: {} });
|
||||
log.info("get-time result:", result);
|
||||
serverTime.value = extractTime(result);
|
||||
} catch (e) {
|
||||
log.error(e);
|
||||
serverTime.value = "[ERROR]";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSendMessage() {
|
||||
if (!app.value) return;
|
||||
const signal = AbortSignal.timeout(5000);
|
||||
try {
|
||||
log.info("Sending message text to Host:", messageText.value);
|
||||
const { isError } = await app.value.sendMessage(
|
||||
{ role: "user", content: [{ type: "text", text: messageText.value }] },
|
||||
{ signal },
|
||||
);
|
||||
log.info("Message", isError ? "rejected" : "accepted");
|
||||
} catch (e) {
|
||||
log.error("Message send error:", signal.aborted ? "timed out" : e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSendLog() {
|
||||
if (!app.value) return;
|
||||
log.info("Sending log text to Host:", logText.value);
|
||||
await app.value.sendLog({ level: "info", data: logText.value });
|
||||
}
|
||||
|
||||
async function handleOpenLink() {
|
||||
if (!app.value) return;
|
||||
log.info("Sending open link request to Host:", linkUrl.value);
|
||||
const { isError } = await app.value.openLink({ url: linkUrl.value });
|
||||
log.info("Open link request", isError ? "rejected" : "accepted");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="main"
|
||||
:style="hostContext?.safeAreaInsets && {
|
||||
paddingTop: hostContext.safeAreaInsets.top + 'px',
|
||||
paddingRight: hostContext.safeAreaInsets.right + 'px',
|
||||
paddingBottom: hostContext.safeAreaInsets.bottom + 'px',
|
||||
paddingLeft: hostContext.safeAreaInsets.left + 'px',
|
||||
}"
|
||||
>
|
||||
<p class="notice">Watch activity in the DevTools console!</p>
|
||||
|
||||
<div class="action">
|
||||
<p><strong>Server Time:</strong> <code id="server-time">{{ serverTime }}</code></p>
|
||||
<button @click="handleGetTime">Get Server Time</button>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<textarea v-model="messageText"></textarea>
|
||||
<button @click="handleSendMessage">Send Message</button>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<input type="text" v-model="logText">
|
||||
<button @click="handleSendLog">Send Log</button>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<input type="url" v-model="linkUrl">
|
||||
<button @click="handleOpenLink">Open Link</button>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main {
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-hover: #1d4ed8;
|
||||
--color-notice-bg: #eff6ff;
|
||||
|
||||
width: 100%;
|
||||
max-width: 425px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
> * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
background-color: var(--color-notice-bg);
|
||||
|
||||
&::before {
|
||||
content: "ℹ️ ";
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
12
examples/basic-server-vue/src/global.css
Normal file
12
examples/basic-server-vue/src/global.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1em;
|
||||
}
|
||||
5
examples/basic-server-vue/src/mcp-app.ts
Normal file
5
examples/basic-server-vue/src/mcp-app.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./global.css";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
110
examples/basic-server-vue/src/server-utils.ts
Normal file
110
examples/basic-server-vue/src/server-utils.ts
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/**
|
||||
* Shared utilities for running MCP servers with various transports.
|
||||
*/
|
||||
|
||||
import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
|
||||
import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
||||
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
||||
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
|
||||
import cors from "cors";
|
||||
import type { Request, Response } from "express";
|
||||
|
||||
/**
|
||||
* Starts an MCP server using the appropriate transport based on command-line arguments.
|
||||
*
|
||||
* If `--stdio` is passed, uses stdio transport. Otherwise, uses Streamable HTTP transport.
|
||||
*
|
||||
* @param createServer - Factory function that creates a new McpServer instance.
|
||||
*/
|
||||
export async function startServer(
|
||||
createServer: () => McpServer,
|
||||
): Promise<void> {
|
||||
try {
|
||||
if (process.argv.includes("--stdio")) {
|
||||
await startStdioServer(createServer);
|
||||
} else {
|
||||
await startStreamableHttpServer(createServer);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts an MCP server with stdio transport.
|
||||
*
|
||||
* @param createServer - Factory function that creates a new McpServer instance.
|
||||
*/
|
||||
export async function startStdioServer(
|
||||
createServer: () => McpServer,
|
||||
): Promise<void> {
|
||||
await createServer().connect(new StdioServerTransport());
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts an MCP server with Streamable HTTP transport in stateless mode.
|
||||
*
|
||||
* Each request creates a fresh server and transport instance, which are
|
||||
* closed when the response ends (no session tracking).
|
||||
*
|
||||
* The server listens on the port specified by the PORT environment variable,
|
||||
* defaulting to 3001 if not set.
|
||||
*
|
||||
* @param createServer - Factory function that creates a new McpServer instance per request.
|
||||
*/
|
||||
export async function startStreamableHttpServer(
|
||||
createServer: () => McpServer,
|
||||
): Promise<void> {
|
||||
const port = parseInt(process.env.PORT ?? "3001", 10);
|
||||
|
||||
// Express app - bind to all interfaces for development/testing
|
||||
const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
|
||||
expressApp.use(cors());
|
||||
|
||||
expressApp.all("/mcp", async (req: Request, res: Response) => {
|
||||
// Create fresh server and transport for each request (stateless mode)
|
||||
const server = createServer();
|
||||
const transport = new StreamableHTTPServerTransport({
|
||||
sessionIdGenerator: undefined,
|
||||
});
|
||||
|
||||
// Clean up when response ends
|
||||
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 { promise, resolve, reject } = Promise.withResolvers<void>();
|
||||
|
||||
const httpServer = expressApp.listen(port, (err?: Error) => {
|
||||
if (err) return reject(err);
|
||||
console.log(`Server listening on http://localhost:${port}/mcp`);
|
||||
resolve();
|
||||
});
|
||||
|
||||
const shutdown = () => {
|
||||
console.log("\nShutting down...");
|
||||
httpServer.close(() => process.exit(0));
|
||||
};
|
||||
|
||||
process.on("SIGINT", shutdown);
|
||||
process.on("SIGTERM", shutdown);
|
||||
|
||||
return promise;
|
||||
}
|
||||
19
examples/basic-server-vue/tsconfig.json
Normal file
19
examples/basic-server-vue/tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"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
|
||||
},
|
||||
"include": ["src", "server.ts", "*.d.ts"]
|
||||
}
|
||||
25
examples/basic-server-vue/vite.config.ts
Normal file
25
examples/basic-server-vue/vite.config.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
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: [vue(), viteSingleFile()],
|
||||
build: {
|
||||
sourcemap: isDevelopment ? "inline" : undefined,
|
||||
cssMinify: !isDevelopment,
|
||||
minify: !isDevelopment,
|
||||
|
||||
rollupOptions: {
|
||||
input: INPUT,
|
||||
},
|
||||
outDir: "dist",
|
||||
emptyOutDir: false,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue