Watch

History

Repository files (latest commit first)
Filename	Latest commit message	Latest commit date
Jonathan Hefner 9e9f5f0210 Clean up examples (#182 ) * Centralize example server transport logic in shared utils Move stdio/HTTP transport handling into `server-utils.ts` so example servers only need to call `startServer(createServer)`. Switch HTTP transport to stateless mode and remove legacy SSE endpoints. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Make example servers self-contained with local server-utils Copy `server-utils.ts` into each example's `src/` directory so examples can be used standalone without the shared directory. Updates imports from `"../shared/server-utils.js"` to `"./src/server-utils.js"`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add `integration-server` example for E2E testing Add dedicated `integration-server` example (duplicated from `basic-server-react`) to preserve E2E testing capabilities while allowing `basic-server-react` to be simplified as a minimal example. Changes: - Add `examples/integration-server` exercising SDK communication APIs - Update E2E tests to use `integration-server` instead of `basic-server-react` and `basic-server-vanillajs` - Use server name labels instead of indices for more robust test selection - Remove `basic-react.png` and `basic-vanillajs.png` golden snapshots 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Simplify `basic-server-*` examples - Clarify comments - Return plain text from `get-time` tool instead of JSON - Remove simulated cleanup delay from `onteardown` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>		2025-12-19 11:44:27 +00:00
..
src	Clean up examples (#182 )	2025-12-19 11:44:27 +00:00
mcp-app.html	Add color-scheme meta tag to all example apps	2025-12-15 11:42:18 -08:00
package.json	Fix build errors in examples (#180 )	2025-12-18 11:17:23 +00:00
README.md	Add wiki-explorer-server example (#122 )	2025-12-11 13:58:05 +01:00
server.ts	Clean up examples (#182 )	2025-12-19 11:44:27 +00: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.

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