Watch

Olivier Chafik cce8d5c7a3

docs: add MCP client configuration to example READMEs

Add stdio transport configuration snippets near the top of each example
README to help users quickly set up the servers in their MCP clients.

- Node.js examples use npx with the published npm packages
- Python qr-server uses uv with local path
- Removed Claude Desktop-specific references from qr-server

2026-01-16 14:00:57 +00:00

2.2 KiB

Raw Blame History

Example: Basic Server (Svelte)

An MCP App example with a Svelte 5 UI using runes for reactivity.

Tip

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

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

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

Overview

Tool registration with a linked UI resource
Svelte 5 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/App.svelte - Svelte 5 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.

2.2 KiB Raw Blame History