Skip to content

Commit 4201627

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #31 from sveltejs/docs
docs: add documentation for svelte.dev
2 parents b5a88c4 + 9a70fbe commit 4201627

File tree

11 files changed

+338
-0
lines changed

11 files changed

+338
-0
lines changed

‎apps/mcp-remote/src/hooks.server.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
import { http_transport } from '$lib/mcp/index.js';
22
import { db } from '$lib/server/db/index.js';
3+
import { redirect } from '@sveltejs/kit';
34

45
export async function handle({ event, resolve }) {
6+
if (event.request.method === 'GET') {
7+
const accept = event.request.headers.get('accept');
8+
if (accept) {
9+
const accepts = accept.split(',');
10+
if (!accepts.includes('text/event-stream')) {
11+
// the request it's a browser request, not an MCP client request
12+
// it means someone probably opened it from the docs...we should redirect to the docs
13+
redirect(302, 'https://svelte.dev/docs/mcp/overview');
14+
}
15+
}
16+
}
517
const mcp_response = await http_transport.respond(event.request, {
618
db,
719
});

‎documentation/docs/10-introduction/10-overview.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Overview
3+
---
4+
5+
The Svelte MCP ([Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro)) server can help your LLM or agent of choice write better Svelte code. It works by providing documentation relevant to the task at hand, and statically analysing generated code so that it can suggest fixes and best practices.
6+
7+
## Setup
8+
9+
The setup varies based on the version of the MCP you prefer — remote or local — and your chosen MCP client (e.g. Claude Code, Codex CLI or GitHub Copilot):
10+
11+
- [local setup](local-setup) using `@sveltejs/mcp`
12+
- [remote setup](remote-setup) using [mcp.svelte.dev/mcp](https://mcp.svelte.dev/mcp)
13+
14+
## Usage
15+
16+
To get the most out of the MCP server we recommend including the following prompt in your `AGENTS.md` (or `CLAUDE.md`, if using Claude Code). This will tell the LLM which tools are available and when it's appropriate to use them.
17+
18+
```md
19+
You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
20+
21+
## Available MCP Tools:
22+
23+
### 1. list-sections
24+
25+
Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
26+
When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
27+
28+
### 2. get-documentation
29+
30+
Retrieves full documentation content for specific sections. Accepts single or multiple sections.
31+
After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
32+
33+
### 3. svelte-autofixer
34+
35+
Analyzes Svelte code and returns issues and suggestions.
36+
You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
37+
38+
### 4. playground-link
39+
40+
Generates a Svelte Playground link with the provided code.
41+
After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
42+
```
43+
44+
If your MCP client supports it, we also recommend using the [svelte-task](prompts#svelte-task) prompt to instruct the LLM on the best way to use the MCP server.

‎documentation/docs/10-introduction/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Introduction
3+
---

‎documentation/docs/20-setup/20-local-setup.md‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: Local setup
3+
---
4+
5+
The local (or stdio) version of the MCP server is available via the [`@sveltejs/mcp`](https://www.npmjs.com/package/@sveltejs/mcp) npm package. You can either install it globally and then reference it in your configuration or run it with `npx`:
6+
7+
```bash
8+
npx -y @sveltejs/mcp
9+
```
10+
11+
Here's how to set it up in some common MCP clients:
12+
13+
## Claude Code
14+
15+
To include the local MCP version in Claude Code, simply run the following command:
16+
17+
```bash
18+
claude mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp
19+
```
20+
21+
The `[scope]` must be `user`, `project` or `local`.
22+
23+
## Claude Desktop
24+
25+
In the Settings > Developer section, click on Edit Config. It will open the folder with a `claude_desktop_config.json` file in it. Edit the file to include the following configuration:
26+
27+
```json
28+
{
29+
"mcpServers": {
30+
"svelte": {
31+
"command": "npx",
32+
"args": ["-y", "@sveltejs/mcp"]
33+
}
34+
}
35+
}
36+
```
37+
38+
## Codex CLI
39+
40+
Add the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):
41+
42+
```toml
43+
[mcp_servers.svelte]
44+
command = "npx"
45+
args = ["-y", "@sveltejs/mcp"]
46+
```
47+
48+
## Gemini CLI
49+
50+
To include the local MCP version in Gemini CLI, simply run the following command:
51+
52+
```bash
53+
gemini mcp add -t stdio -s [scope] svelte npx -y @sveltejs/mcp
54+
```
55+
56+
The `[scope]` must be `user`, `project` or `local`.
57+
58+
## OpenCode
59+
60+
Run the command:
61+
62+
```bash
63+
opencode mcp add
64+
```
65+
66+
and follow the instructions, selecting 'Local' under the 'Select MCP server type' prompt:
67+
68+
```bash
69+
opencode mcp add
70+
71+
┌ Add MCP server
72+
│
73+
◇ Enter MCP server name
74+
│ svelte
75+
│
76+
◇ Select MCP server type
77+
│ Local
78+
│
79+
◆ Enter command to run
80+
│ npx -y @sveltejs/mcp
81+
```
82+
83+
## VS Code
84+
85+
- Open the command palette
86+
- Select "MCP: Add Server..."
87+
- Select "Command (stdio)"
88+
- Insert `npx -y @sveltejs/mcp` in the input and press `Enter`
89+
- When prompted for a name, insert `svelte`
90+
- Select if you want to add it as a `Global` or `Workspace` MCP server
91+
92+
## Cursor
93+
94+
- Open the command palette
95+
- Select "View: Open MCP Settings"
96+
- Click on "Add custom MCP"
97+
98+
It will open a file with your MCP servers where you can add the following configuration:
99+
100+
```json
101+
{
102+
"mcpServers": {
103+
"svelte": {
104+
"command": "npx",
105+
"args": ["-y", "@sveltejs/mcp"]
106+
}
107+
}
108+
}
109+
```
110+
111+
## Other clients
112+
113+
If we didn't include the MCP client you are using, refer to their documentation for `stdio` servers and use `npx` as the command and `-y @sveltejs/mcp` as the arguments.

‎documentation/docs/20-setup/30-remote-setup.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Remote setup
3+
---
4+
5+
The remote version of the MCP server is available on `https://mcp.svelte.dev/mcp`.
6+
7+
Here's how to set it up in some common MCP clients:
8+
9+
## Claude Code
10+
11+
To include the remote MCP version in Claude Code, simply run the following command:
12+
13+
```bash
14+
claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
15+
```
16+
17+
You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
18+
19+
## Claude Desktop
20+
21+
- Open Settings > Connectors
22+
- Click on Add Custom Connector
23+
- When prompted for a name, enter `svelte`
24+
- Under the Remote MCP server URL input, use `https://mcp.svelte.dev/mcp`
25+
- Click Add
26+
27+
## Codex CLI
28+
29+
Add the following to your `config.toml` (which defaults to `~/.codex/config.toml`, but refer to [the configuration documentation](https://github.com/openai/codex/blob/main/docs/config.md) for more advanced setups):
30+
31+
```toml
32+
experimental_use_rmcp_client = true
33+
[mcp_servers.svelte]
34+
url = "https://mcp.svelte.dev/mcp"
35+
```
36+
37+
## Gemini CLI
38+
39+
To use the remote MCP server with Gemini CLI, simply run the following command:
40+
41+
```bash
42+
gemini mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
43+
```
44+
45+
The `[scope]` must be `user`, `project` or `local`.
46+
47+
## OpenCode
48+
49+
Run the command:
50+
51+
```bash
52+
opencode mcp add
53+
```
54+
55+
and follow the instructions, selecting 'Remote' under the 'Select MCP server type' prompt:
56+
57+
```bash
58+
opencode mcp add
59+
60+
┌ Add MCP server
61+
│
62+
◇ Enter MCP server name
63+
│ svelte
64+
│
65+
◇ Select MCP server type
66+
│ Remote
67+
│
68+
◇ Enter MCP server URL
69+
│ https://mcp.svelte.dev/mcp
70+
```
71+
72+
## VS Code
73+
74+
- Open the command palette
75+
- Select "MCP: Add Server..."
76+
- Select "HTTP (HTTP or Server-Sent-Events)"
77+
- Insert `https://mcp.svelte.dev/mcp` in the input and press `Enter`
78+
- Insert your preferred name
79+
- Select if you want to add it as a `Global` or `Workspace` MCP server
80+
81+
## Cursor
82+
83+
- Open the command palette
84+
- Select "View: Open MCP Settings"
85+
- Click on "Add custom MCP"
86+
87+
It will open a file with your MCP servers where you can add the following configuration:
88+
89+
```json
90+
{
91+
"mcpServers": {
92+
"svelte": {
93+
"url": "https://mcp.svelte.dev/mcp"
94+
}
95+
}
96+
}
97+
```
98+
99+
## Other clients
100+
101+
If we didn't include the MCP client you are using, refer to their documentation for `remote` servers and use `https://mcp.svelte.dev/mcp` as the URL.

‎documentation/docs/20-setup/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Setup
3+
---

‎documentation/docs/30-capabilities/10-tools.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: Tools
3+
---
4+
5+
The following tools are provided by the MCP server to the model, which can decide to call one or more of them during a session:
6+
7+
## list-sections
8+
9+
Provides a list of all the available documentation sections.
10+
11+
## get-documentation
12+
13+
Allows the model to get the full (and up-to-date) documentation for the requested sections directly from [svelte.dev/docs](/docs).
14+
15+
## svelte-autofixer
16+
17+
Uses static analysis to provide suggestions for the generated code. It should be invoked in a loop by the model until all issues and suggestions are resolved.
18+
19+
## playground-link
20+
21+
Generates an ephemeral playground link with the generated code. It's useful when the generated code is not written to a file in your project and you want to quickly test the generated solution. The code is not stored anywhere except the URL itself (which will often, as a consequence, be quite large).

‎documentation/docs/30-capabilities/20-resources.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Resources
3+
---
4+
5+
This is the list of available resources provided by the MCP server. Resources are included by the user (not by the LLM) and are useful if you want to include specific knowledge in your session. For example, if you know that the component will need to use transitions you can include the transition documentation directly without asking the LLM to do it for you.
6+
7+
## doc-section
8+
9+
This dynamic resource allows you to add every section of the Svelte documentation as a resource. The URI looks like this `svelte://slug-of-the-docs.md` and the returned resource will contain the `llms.txt` version of the specific page you selected.

‎documentation/docs/30-capabilities/30-prompts.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: Prompts
3+
---
4+
5+
This is the list of available prompts provided by the MCP server. Prompts are selected by the user and are sent as a user message. They can be useful to write repetitive instructions for the LLM on how to properly use the MCP server.
6+
7+
## svelte-task
8+
9+
This prompt should be used whenever you are asking the model to work on some Svelte-related task. It will instruct the LLM on which documentation sections are available, which tool to invoke, when to invoke it, and how to interpret the result. It will ask you for the description of the task and the returned value will look like this:
10+
11+
```
12+
You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool \`get-documentation\` with one of the following paths:
13+
<available-docs-paths>
14+
[all available docs]
15+
</available-docs-paths>
16+
17+
Every time you write a Svelte component or a Svelte module you MUST invoke the \`svelte-autofixer\` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.
18+
19+
This is the task you will work on:
20+
21+
<task>
22+
[your task here]
23+
</task>
24+
25+
If you are not writing the code into a file, once you have the final version of the code ask the user if they want to generate a playground link to quickly check the code in it and if they answer yes call the \`playground-link\` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called \`App.svelte\` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.
26+
```

‎documentation/docs/30-capabilities/index.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Capabilities
3+
---

0 commit comments

Comments
 (0)