Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Olivier Chafik 2be172defb Use the canonical git+https form for repository.url npm normalizes the bare https URL to git+https://….git at publish time and warns about it on every package. Storing the canonical form removes the warning and matches what npm's trusted-publisher check compares against the repository.		2026-09-08 19:37:47 +01:00
..
src	refactor: finish MCP SDK v2 migration	2026-07-14 17:07:30 -07:00
.gitignore	Improve consistency and organization of examples for AI learning	2026-01-13 20:48:02 -06:00
grid-cell.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
main.ts	refactor: finish MCP SDK v2 migration	2026-07-14 17:07:30 -07:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	Use the canonical git+https form for repository.url	2026-09-08 19:37:47 +01:00
README.md	Use `apps.extensions.modelcontextprotocol.io` domain for docs URLs	2026-02-24 11:38:54 -06:00
screenshot.png	feat(basic-host): URL params, fullscreen mode, unified layout (#266 )	2026-01-14 22:09:41 +00:00
server.ts	refactor: finish MCP SDK v2 migration	2026-07-14 17:07:30 -07:00
tsconfig.json	CI: build the WSL job on ext4, skip the unused Chromium download, list tsconfig types	2026-09-08 18:38:58 +01:00
tsconfig.server.json	CI: build the WSL job on ext4, skip the unused Chromium download, list tsconfig types	2026-09-08 18:38:58 +01:00
vite.config.ts	Add wiki-explorer-server example (#122 )	2025-12-11 13:58:05 +01:00

README.md

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.

MCP Client Configuration

Add to your MCP client configuration (stdio transport):

{
  "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):

{
  "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
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

Install dependencies:
```
npm install
```

Build and start the server:

npm run start:http  # for Streamable HTTP transport
# OR
npm run start:stdio  # for stdio transport

View using the 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:

{
  "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