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 basic-server-* examples for Vue, Svelte, Preact, and Solid (#141)

Browse source 
* Add basic-server-vue example

Demonstrates MCP App SDK usage with Vue 3, providing framework
parity alongside the existing React and vanilla JS examples.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add basic-server-svelte example

Demonstrates MCP App SDK usage with Svelte, providing parity
with the existing basic-server-react and basic-server-vue examples.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add basic-server-preact example

Demonstrates MCP App SDK usage with Preact, providing another
lightweight framework option alongside the existing React, Vue,
and Svelte examples.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add basic-server-solid example

Demonstrates MCP App SDK usage with Solid.js, providing another
reactive framework option alongside the existing React, Vue,
Svelte, and Preact examples.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Add framework GitHub links to README

Link each framework name to its official GitHub repo in basic examples
list.

🤖 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>
This commit is contained in:
Jonathan Hefner 2026-01-08 12:44:36 -06:00 • committed by GitHub
commit 8acec0eaad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 3115 additions and 963 deletions
Download patch file Download diff file Expand all files Collapse all files

8
tests/e2e/servers.spec.ts
View file

@ -5,8 +5,12 @@ import { test, expect, type Page, type ConsoleMessage } from "@playwright/test";
// with partial matches (e.g., [class*="heatmapWrapper"]) for those components
const DYNAMIC_MASKS: Record<string, string[]> = {
integration: ["#server-time"], // Server time display
"basic-preact": ["#server-time"], // Server time display
"basic-react": ["#server-time"], // Server time display
"basic-solid": ["#server-time"], // Server time display
"basic-svelte": ["#server-time"], // Server time display
"basic-vanillajs": ["#server-time"], // Server time display
"basic-vue": ["#server-time"], // Server time display
"cohort-heatmap": ['[class*="heatmapWrapper"]'], // Heatmap grid (random data)
"customer-segmentation": [".chart-container"], // Scatter plot (random data)
"system-monitor": [
@ -24,8 +28,12 @@ const DYNAMIC_MASKS: Record<string, string[]> = {
// Server configurations (key is used for screenshot filenames, name is the MCP server name)
const SERVERS = [
{ key: "integration", name: "Integration Test Server" },
{ key: "basic-preact", name: "Basic MCP App Server (Preact)" },
{ key: "basic-react", name: "Basic MCP App Server (React)" },
{ key: "basic-solid", name: "Basic MCP App Server (Solid)" },
{ key: "basic-svelte", name: "Basic MCP App Server (Svelte)" },
{ key: "basic-vanillajs", name: "Basic MCP App Server (Vanilla JS)" },
{ key: "basic-vue", name: "Basic MCP App Server (Vue)" },
{ key: "budget-allocator", name: "Budget Allocator Server" },
{ key: "cohort-heatmap", name: "Cohort Heatmap Server" },
{ key: "customer-segmentation", name: "Customer Segmentation Server" },