Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik 8e7206cb15 chore(deps): npm audit fix — sdk 1.29.0, systeminformation 5.31.5, +13 transitives (#585 ) Clears all 15 npm audit findings (8 high / 6 moderate / 1 low): - @modelcontextprotocol/sdk 1.25.2 → 1.29.0 (GHSA-345p-7cg4-v4c7 cross-client data leak via shared transport reuse). Root had it pinned exact in devDependencies which blocked audit fix. - systeminformation 5.30.6 → 5.31.5 (GHSA-5vv4-hvf7-2h46, GHSA-9c88-49p5-5ggf command injection) - hono, undici, rollup, picomatch, minimatch, lodash-es, svelte, devalue, ajv, brace-expansion, markdown-it, yaml, qs — lockfile bumps via npm audit fix		2026-04-02 04:25:00 +01:00
..
src	Improve example CSS files to better demonstrate host style integration	2026-01-30 09:32:26 -06:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
main.ts	Refactor server startup functions	2026-01-24 09:27:54 -06:00
mcp-app.html	Add `basic-server-*` examples for Vue, Svelte, Preact, and Solid (#141 )	2026-01-08 18:44:36 +00:00
package.json	chore(deps): npm audit fix — sdk 1.29.0, systeminformation 5.31.5, +13 transitives (#585 )	2026-04-02 04:25:00 +01:00
README.md	Use `apps.extensions.modelcontextprotocol.io` domain for docs URLs	2026-02-24 11:38:54 -06:00
server.ts	Rewrite Quickstart guide with type-checked code examples	2026-01-24 09:41:51 -06:00
tsconfig.json	Add `basic-server-*` examples for Vue, Svelte, Preact, and Solid (#141 )	2026-01-08 18:44:36 +00:00
tsconfig.server.json	feat: compile example servers to JavaScript for npm consumption (#259 )	2026-01-14 23:46:17 +00:00
vite.config.ts	Add `basic-server-*` examples for Vue, Svelte, Preact, and Solid (#141 )	2026-01-08 18:44:36 +00:00

README.md

Example: Basic Server (Solid)

An MCP App example with a Solid UI.

Tip

Looking for a vanilla JavaScript example? See basic-server-vanillajs!

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "mcpServers": {
    "basic-solid": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-basic-solid",
        "--stdio"
      ]
    }
  }
}

Local Development

To test local modifications, use this configuration (replace ~/code/ext-apps with your clone path):

{
  "mcpServers": {
    "basic-solid": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/basic-server-solid && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

Overview

Tool registration with a linked UI resource
Solid UI using the App class
App communication APIs: callServerTool, sendMessage, sendLog, openLink

Key Files

server.ts - MCP server with tool and resource registration
mcp-app.html / src/mcp-app.tsx - Solid UI using App class

Getting Started

npm install
npm run dev

How It Works

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

Build System

This example bundles into a single HTML file using Vite with vite-plugin-singlefile — see vite.config.ts. This allows all UI content to be served as a single MCP resource. Alternatively, MCP apps can load external resources by defining _meta.ui.csp.resourceDomains in the UI resource metadata.