modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ext-apps/examples/wiki-explorer-server
History
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Olivier Chafik 75cbf8612c
 feat(basic-host): URL params, fullscreen mode, unified layout (#266) 
* basic-host: handle containerDimensions

* feat(basic-host): Unified tool call layout with shared collapsible panels

* snapshots

* format
2026-01-14 22:09:41 +00:00
..
src Improve consistency and organization of examples for AI learning 2026-01-13 20:48:02 -06: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
mcp-app.html Add color-scheme meta tag to all example apps 2025-12-15 11:42:18 -08:00
package.json chore: release 0.4.0 (#249) 2026-01-12 22:40:24 +00:00
README.md Add wiki-explorer-server example (#122) 2025-12-11 13:58:05 +01:00
screenshot.png feat(basic-host): URL params, fullscreen mode, unified layout (#266) 2026-01-14 22:09:41 +00:00
server-utils.ts fix: add error handling for server startup failures (#236) 2026-01-11 16:52:55 +00:00
server.ts Replace deprecated RESOURCE_URI_META_KEY with _meta.ui.resourceUri 2026-01-12 13:00:11 -06:00
tsconfig.json Add wiki-explorer-server example (#122) 2025-12-11 13:58:05 +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.

Zoomed Pop-up Expanded graph

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

  1. Install dependencies:

    npm install

  2. Build and start the server:

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

  3. 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