Add basic-server-* examples for Vue, Svelte, Preact, and Solid (#141)

* 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

View file

@ -0,0 +1,65 @@
.main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%;
max-width: 425px;
box-sizing: border-box;
> * {
margin-top: 0;
margin-bottom: 0;
}
> * + * {
margin-top: 1.5rem;
}
}
.action {
> * {
margin-top: 0;
margin-bottom: 0;
width: 100%;
}
> * + * {
margin-top: 0.5rem;
}
/* Consistent font for form inputs (inherits from global.css) */
textarea,
input {
font-family: inherit;
font-size: inherit;
}
button {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
color: white;
font-weight: bold;
background-color: var(--color-primary);
cursor: pointer;
&:hover,
&:focus-visible {
background-color: var(--color-primary-hover);
}
}
}
.notice {
padding: 0.5rem 0.75rem;
color: var(--color-primary);
text-align: center;
font-style: italic;
background-color: var(--color-notice-bg);
&::before {
content: "ℹ️ ";
font-style: normal;
}
}