modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add wiki-explorer-server example (#122)

Browse source 
Interactive Wikipedia link graph visualization using force-graph with:
- Force-directed graph layout for exploring page connections
- Node expansion to reveal first-degree Wikipedia links
- Visual state tracking (blue=default, green=expanded, red=error)
- Direct browser access to Wikipedia pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2025-12-11 06:58:05 -06:00 • committed by GitHub
commit 366c5d5a6b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 3772 additions and 2820 deletions
Download patch file Download diff file Expand all files Collapse all files

147
examples/wiki-explorer-server/src/mcp-app.css Normal file
View file

@ -0,0 +1,147 @@
#graph {
width: 100%;
height: 100vh;
}
#popup {
display: none;
position: fixed;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
min-width: 200px;
max-width: 400px;
}
.popup-title {
font-weight: 600;
margin-bottom: 12px;
word-wrap: break-word;
color: var(--text-color);
}
.popup-error {
display: none;
color: var(--node-error);
font-size: 14px;
padding: 8px 0;
border-top: 1px solid var(--border-color);
margin-bottom: 8px;
}
.popup-buttons {
display: flex;
gap: 8px;
}
.popup-buttons button {
flex: 1;
padding: 8px 16px;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.popup-buttons button:hover {
opacity: 0.9;
}
#open-btn {
background-color: var(--node-default);
color: white;
}
#expand-btn {
background-color: var(--node-expanded);
color: white;
}
/* Disabled state for buttons */
.popup-buttons button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Controls container */
#controls {
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 8px;
z-index: 100;
}
/* Reset button */
#reset-graph {
width: 40px;
height: 40px;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 4px;
color: var(--text-color);
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: background-color 0.15s;
}
#reset-graph:hover {
background: var(--border-color);
}
#reset-graph:active {
background: var(--border-color);
opacity: 0.8;
}
/* Zoom controls */
#zoom-controls {
display: flex;
flex-direction: column;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
#zoom-controls button {
width: 40px;
height: 40px;
background: var(--bg-color);
border: 1px solid var(--border-color);
color: var(--text-color);
font-size: 20px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s;
}
#zoom-controls button:hover {
background: var(--border-color);
}
#zoom-controls button:active {
background: var(--border-color);
opacity: 0.8;
}
#zoom-in {
border-radius: 4px 4px 0 0;
border-bottom: none;
}
#zoom-out {
border-radius: 0 0 4px 4px;
}