You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/mcp/10-introduction/10-overview.md
+7-4Lines changed: 7 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,15 +3,18 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
3
3
title: Overview
4
4
---
5
5
6
-
The official Svelte MCP (Model Context Protocol) Server can help your LLM or Agent of choice write better Svelte codeby providing it with documentation and tools to get suggestions on the generated code based on static analysis.
6
+
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.
7
7
8
8
## Setup
9
9
10
-
The setup differs based on the version of the MCP you prefer (either remote or local) and the MCP client of your choice (e.g. Claude Code, Codex CLI, GitHub Copilot etc.). Refer to our documentation to learn how to set those up [locally](./local-setup) and [remotely](./remote-setup) for the most common clients.
10
+
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):
11
+
12
+
-[local setup](local-setup) using `@sveltejs/mcp`
13
+
-[remote setup](remote-setup) using [mcp.svelte.dev/mcp](https://mcp.svelte.dev/mcp)
11
14
12
15
## Usage
13
16
14
-
To get the most out of the MCP we recommend including the following prompt in your `AGENTS.md` or `CLAUDE.md`. This will instruct the LLM on what's available and when it's appropriate to use the MCP.
17
+
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.
15
18
16
19
```md
17
20
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:
@@ -39,4 +42,4 @@ Generates a Svelte Playground link with the provided code.
39
42
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.
40
43
```
41
44
42
-
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.
45
+
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.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/mcp/20-setup/20-local-setup.md
+17-25Lines changed: 17 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
3
3
title: Local setup
4
4
---
5
5
6
-
The STDIO (local) version of the MCP server is available as an `npm` package: `@sveltjs/mcp`. You can either install it globally and then reference it in your configuration or run it with `npx`.
6
+
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`:
7
7
8
8
```bash
9
9
npx -y @sveltejs/mcp
@@ -16,67 +16,63 @@ Here's how to set it up in some common MCP clients:
16
16
To include the local MCP version in Claude Code, simply run the following command:
You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
22
+
The `[scope]`must be `user`, `project` or `local`.
23
23
24
24
## Claude Desktop
25
25
26
-
Open the Developer section in settings, 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
+
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:
27
27
28
28
```json
29
29
{
30
30
"mcpServers": {
31
-
"[name]": {
31
+
"svelte": {
32
32
"command": "npx",
33
33
"args": ["-y", "@sveltejs/mcp"]
34
34
}
35
35
}
36
36
}
37
37
```
38
38
39
-
The top level must be `mcpServers` but you can choose your preferred `name`.
40
-
41
39
## Codex CLI
42
40
43
-
Add the following to your `config.toml` (defaults to `~/.codex/config.toml`... refer to [the configuration documentation](https://github.com/openai/codex/blob/69cb72f8422f2aa7222bea3a6ce48fd130fa76c4/docs/config.md) for more advanced setups):
41
+
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):
44
42
45
43
```toml
46
-
[mcp_servers.name]
44
+
[mcp_servers.svelte]
47
45
command = "npx"
48
46
args = ["-y", "@sveltejs/mcp"]
49
47
```
50
48
51
-
The top level must be `mcp_server` but you can choose your preferred `name`.
52
-
53
49
## Gemini CLI
54
50
55
51
To include the local MCP version in Gemini CLI, simply run the following command:
You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
57
+
The `[scope]`must be `user`, `project` or `local`.
62
58
63
-
## Opencode
59
+
## OpenCode
64
60
65
61
Run the command:
66
62
67
63
```bash
68
64
opencode mcp add
69
65
```
70
66
71
-
and follow the instructions, selecting Local when asked for "Select MCP server type":
67
+
and follow the instructions, selecting 'Local' under the 'Select MCP server type' prompt:
72
68
73
69
```bash
74
70
opencode mcp add
75
71
76
72
┌ Add MCP server
77
73
│
78
74
◇ Enter MCP server name
79
-
│ [name]
75
+
│ svelte
80
76
│
81
77
◇ Select MCP server type
82
78
│ Local
@@ -85,20 +81,18 @@ opencode mcp add
85
81
│ npx -y @sveltejs/mcp
86
82
```
87
83
88
-
You can choose your preferred `name`.
84
+
## VS Code
89
85
90
-
## VSCode
91
-
92
-
- Open the command Palette
86
+
- Open the command palette
93
87
- Select "MCP: Add Server..."
94
88
- Select "Command (stdio)"
95
89
- Insert `npx -y @sveltejs/mcp` in the input and press `Enter`
96
-
-Insert your preferred name
90
+
-When prompted for a name, insert `svelte`
97
91
- Select if you want to add it as a `Global` or `Workspace` MCP server
98
92
99
93
## Cursor
100
94
101
-
- Open the command Palette
95
+
- Open the command palette
102
96
- Select "View: Open MCP Settings"
103
97
- Click on "Add custom MCP"
104
98
@@ -107,16 +101,14 @@ It will open a file with your MCP servers where you can add the following config
107
101
```json
108
102
{
109
103
"mcpServers": {
110
-
"[name]": {
104
+
"svelte": {
111
105
"command": "npx",
112
106
"args": ["-y", "@sveltejs/mcp"]
113
107
}
114
108
}
115
109
}
116
110
```
117
111
118
-
The top level must be `mcpServers` but you can choose your preferred `name`.
119
-
120
112
## Other clients
121
113
122
114
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.
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/mcp/20-setup/30-remote-setup.md
+18-24Lines changed: 18 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,58 +12,56 @@ Here's how to set it up in some common MCP clients:
12
12
To include the remote MCP version in Claude Code, simply run the following command:
13
13
14
14
```bash
15
-
claude mcp add -t http -s [scope] [name] https://mcp.svelte.dev/mcp
15
+
claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
16
16
```
17
17
18
18
You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
19
19
20
20
## Claude Desktop
21
21
22
-
- Open `Settings > Connectors`
23
-
- Click on `Add Custom Connector`
24
-
-Insert the name you prefer most
25
-
-Insert `https://mcp.svelte.dev/mcp` as the `Remote MCP server URL`
26
-
- Click `Add`
22
+
- Open Settings > Connectors
23
+
- Click on Add Custom Connector
24
+
-When prompted for a name, enter `svelte`
25
+
-Under the Remote MCP server URL input, use `https://mcp.svelte.dev/mcp`
26
+
- Click Add
27
27
28
28
## Codex CLI
29
29
30
-
Add the following to your `config.toml` (defaults to `~/.codex/config.toml`... refer to [the configuration documentation](https://github.com/openai/codex/blob/69cb72f8422f2aa7222bea3a6ce48fd130fa76c4/docs/config.md) for more advanced setups):
30
+
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):
31
31
32
32
```toml
33
33
experimental_use_rmcp_client = true
34
-
[mcp_servers.name]
34
+
[mcp_servers.svelte]
35
35
url = "https://mcp.svelte.dev/mcp"
36
36
```
37
37
38
-
To use HTTP servers in Codex you need to enable `experimental_use_rmcp_client` and the top level must be `mcp_server` but you can choose your preferred `name`.
39
-
40
38
## Gemini CLI
41
39
42
-
To include the remote MCP version in Gemini CLI, simply run the following command:
40
+
To use the remote MCP server with Gemini CLI, simply run the following command:
Copy file name to clipboardExpand all lines: apps/svelte.dev/content/docs/mcp/30-capabilities/10-tools.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,20 +3,20 @@ NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-doc
3
3
title: Tools
4
4
---
5
5
6
-
This is the list of available tools provided by the MCP server. The list of tools is given to the model which can decide to call one or more of the tools during a session.
6
+
The following tools are provided by the MCP serverto the model, which can decide to call one or more of them during a session:
7
7
8
8
## list-sections
9
9
10
-
Provides a list of all the available documentation sections and their use cases if available. The titles of the sections will be used by the LLM to get up-to-date documentation directly from the official documentation.
10
+
Provides a list of all the available documentation sections.
11
11
12
12
## get-documentation
13
13
14
-
Allows the model to get the full documentation for the requested sections. The documentation is fetched on the fly from the official Svelte documentation and it will always be up to date.
14
+
Allows the model to get the full (and up-to-date) documentation for the requested sections directly from [svelte.dev/docs](/docs).
15
15
16
16
## svelte-autofixer
17
17
18
18
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.
19
19
20
20
## playground-link
21
21
22
-
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, the server uses the `share-with-hash` functionality of the Svelte playground to generate the correct hash on the fly (which is also why it will generate a pretty big link).
22
+
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).
0 commit comments