298e884ec3* chore: add stable spec release 2026-01-26 - Use git mv to copy specification from draft to specification/2026-01-26/apps.mdx (preserves history) - Update status from 'Draft' to 'Stable (2026-01-26)' - Add specification version table to README - Update Resources section with links to both stable and draft specs * chore: bump version to 1.0.0 - Update main package version from 0.4.2 to 1.0.0 - Update all example package versions to 1.0.0 - Regenerate package-lock.json * prettier * chore: align protocol version with spec release 2026-01-26 - Add 'Protocol Version: 2026-01-26' to spec header - Update LATEST_PROTOCOL_VERSION from '2025-11-21' to '2026-01-26' - Update spec examples to use '2026-01-26' protocol version - Add '2025-11-21' to SUPPORTED_PROTOCOL_VERSIONS for backwards compatibility * chore: update spec references to stable 2026-01-26 - Update typedoc.config.mjs navigation link - Update docs/overview.md spec links (10 occurrences) - Update plugins/mcp-apps/skills/create-mcp-app/SKILL.md spec link - Update src/spec.types.ts @see links - Update AGENTS.md spec path - Regenerate src/generated/schema.ts with updated links * chore: simplify versioning - first stable release - Remove backwards compatibility version (2025-11-21) - this is the first stable release - Remove redundant 'Protocol Version' header - spec version IS the protocol version * chore: add history reference comment to stable spec
105 lines
3.2 KiB
Markdown
105 lines
3.2 KiB
Markdown
# Example: Wiki Explorer
|
|
|
|
Visualizes Wikipedia link graphs using a force-directed layout. Explore how Wikipedia pages are connected by expanding nodes to reveal first-degree links.
|
|
|
|
<table>
|
|
<tr>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/01-zoomed.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/01-zoomed.png" alt="Zoomed" width="100%"></a></td>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/02-pop-up.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/02-pop-up.png" alt="Pop-up" width="100%"></a></td>
|
|
<td><a href="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/03-expanded-graph.png"><img src="https://modelcontextprotocol.github.io/ext-apps/screenshots/wiki-explorer-server/03-expanded-graph.png" alt="Expanded graph" width="100%"></a></td>
|
|
</tr>
|
|
</table>
|
|
|
|
## MCP Client Configuration
|
|
|
|
Add to your MCP client configuration (stdio transport):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"wiki-explorer": {
|
|
"command": "npx",
|
|
"args": [
|
|
"-y",
|
|
"--silent",
|
|
"--registry=https://registry.npmjs.org/",
|
|
"@modelcontextprotocol/server-wiki-explorer",
|
|
"--stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Local Development
|
|
|
|
To test local modifications, use this configuration (replace `~/code/ext-apps` with your clone path):
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"wiki-explorer": {
|
|
"command": "bash",
|
|
"args": [
|
|
"-c",
|
|
"cd ~/code/ext-apps/examples/wiki-explorer-server && npm run build >&2 && node dist/index.js --stdio"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Features
|
|
|
|
- **Force-directed graph visualization**: Interactive graph powered by [`force-graph`](https://github.com/vasturiano/force-graph)
|
|
- **Node expansion**: Click any node to expand and see all pages it links to
|
|
- **Visual state tracking**: Nodes change color based on state (blue = default, green = expanded, red = error)
|
|
- **Direct page access**: Open any Wikipedia page in your browser
|
|
|
|
## Running
|
|
|
|
1. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Build and start the server:
|
|
|
|
```bash
|
|
npm run start:http # for Streamable HTTP transport
|
|
# OR
|
|
npm run start:stdio # for stdio transport
|
|
```
|
|
|
|
3. View using the [`basic-host`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example or another MCP Apps-compatible host.
|
|
|
|
### Tool Input
|
|
|
|
To test the example, call the `get-first-degree-links` tool with a Wikipedia URL:
|
|
|
|
```json
|
|
{
|
|
"url": "https://en.wikipedia.org/wiki/Graph_theory"
|
|
}
|
|
```
|
|
|
|
Click nodes in the graph to **Open** (view in browser) or **Expand** (visualize linked pages).
|
|
|
|
## Architecture
|
|
|
|
### Server (`server.ts`)
|
|
|
|
MCP server that fetches Wikipedia pages and extracts internal links.
|
|
|
|
Exposes one tool:
|
|
|
|
- `get-first-degree-links` - Returns links to other Wikipedia pages from a given page
|
|
|
|
### App (`src/mcp-app.ts`)
|
|
|
|
Vanilla TypeScript app using force-graph for visualization that:
|
|
|
|
- Receives tool inputs via the MCP App SDK
|
|
- Renders an interactive force-directed graph
|
|
- Supports node expansion to explore link relationships
|