@modelcontextprotocol/server-basic-react 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/dist/index.js +34183 -0
- package/dist/mcp-app.html +160 -0
- package/dist/server.d.ts +5 -0
- package/dist/server.js +27269 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# Example: Basic Server (React)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
An MCP App example with a React UI.
|
|
6
|
+
|
|
7
|
+
> [!TIP]
|
|
8
|
+
> Looking for a vanilla JavaScript example? See [`basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs)!
|
|
9
|
+
|
|
10
|
+
## MCP Client Configuration
|
|
11
|
+
|
|
12
|
+
Add to your MCP client configuration (stdio transport):
|
|
13
|
+
|
|
14
|
+
```json
|
|
15
|
+
{
|
|
16
|
+
"mcpServers": {
|
|
17
|
+
"basic-react": {
|
|
18
|
+
"command": "npx",
|
|
19
|
+
"args": [
|
|
20
|
+
"-y",
|
|
21
|
+
"--silent",
|
|
22
|
+
"--registry=https://registry.npmjs.org/",
|
|
23
|
+
"@modelcontextprotocol/server-basic-react",
|
|
24
|
+
"--stdio"
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Local Development
|
|
32
|
+
|
|
33
|
+
To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path):
|
|
34
|
+
|
|
35
|
+
```json
|
|
36
|
+
{
|
|
37
|
+
"mcpServers": {
|
|
38
|
+
"basic-react": {
|
|
39
|
+
"command": "bash",
|
|
40
|
+
"args": [
|
|
41
|
+
"-c",
|
|
42
|
+
"cd ~/code/ext-apps/examples/basic-server-react && npm run build >&2 && node dist/index.js --stdio"
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Overview
|
|
50
|
+
|
|
51
|
+
- Tool registration with a linked UI resource
|
|
52
|
+
- React UI using the [`useApp()`](https://modelcontextprotocol.github.io/ext-apps/api/functions/_modelcontextprotocol_ext-apps_react.useApp.html) hook
|
|
53
|
+
- 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)
|
|
54
|
+
|
|
55
|
+
## Key Files
|
|
56
|
+
|
|
57
|
+
- [`server.ts`](server.ts) - MCP server with tool and resource registration
|
|
58
|
+
- [`mcp-app.html`](mcp-app.html) / [`src/mcp-app.tsx`](src/mcp-app.tsx) - React UI using `useApp()` hook
|
|
59
|
+
|
|
60
|
+
## Getting Started
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npm install
|
|
64
|
+
npm run dev
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## How It Works
|
|
68
|
+
|
|
69
|
+
1. The server registers a `get-time` tool with metadata linking it to a UI HTML resource (`ui://get-time/mcp-app.html`).
|
|
70
|
+
2. When the tool is invoked, the Host renders the UI from the resource.
|
|
71
|
+
3. The UI uses the MCP App SDK API to communicate with the host and call server tools.
|
|
72
|
+
|
|
73
|
+
## Build System
|
|
74
|
+
|
|
75
|
+
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://modelcontextprotocol.github.io/ext-apps/api/interfaces/app.McpUiResourceCsp.html#resourcedomains) in the UI resource metadata.
|