Skip to content

Commit 9d58761

Browse files
Patrick-ErichsenPatrick-Erichsen
authored
Merge pull request #6060 from continuedev/bdougie/mcp-docs
docs: mcp docs and examples
2 parents 869ecec + 17dbd18 commit 9d58761

File tree

2 files changed

+156
-26
lines changed

2 files changed

+156
-26
lines changed

‎docs/docs/customize/deep-dives/mcp.mdx

Lines changed: 156 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,175 @@ keywords: [tool, use, function calling, claude, automatic]
77
import TabItem from "@theme/TabItem";
88
import Tabs from "@theme/Tabs";
99

10-
## MCP
10+
# MCP
1111

12-
Currently custom tools can be configured using the [Model Context Protocol](https://modelcontextprotocol.io/introduction), a standard proposed by Anthropic to unify prompts, context, and tool use.
12+
As AI systems get better, they're still held back by their training data and
13+
can't access real-time information or specialized tools. The [Model Context
14+
Protocol](https://modelcontextprotocol.io/introduction) (MCP) fixes this by
15+
letting AI models connect with outside data sources, tools, and environments.
16+
This allows smooth sharing of information and abilities between AI systems and
17+
the wider digital world. This standard, created by Anthropic to bring together
18+
prompts, context, and tool use, is key for building truly useful AI experiences
19+
that can be set up with custom tools.
1320

14-
MCP Servers can be added to hub Assistants using `mcpServers` blocks. You can explore available MCP server blocks [here](https://hub.continue.dev/explore/mcp).
21+
## How it works
22+
23+
Currently custom tools can be configured using the Model Context
24+
Protocol standard to unify prompts, context, and tool use.
25+
26+
MCP Servers can be added to hub Assistants using `mcpServers` blocks. You can
27+
explore available MCP server blocks
28+
[here](https://hub.continue.dev/explore/mcp).
1529

1630
:::info
1731
MCP can only be used in the **agent** mode.
1832
:::
1933

20-
To set up your own MCP server, read the [MCP quickstart](https://modelcontextprotocol.io/quickstart) and then [create an `mcpServers` block](https://hub.continue.dev/new?type=block&blockType=mcpServers) or add the following to your [config file](./configuration.md):
34+
## Quick Start
35+
36+
Below is a quick example of setting up a new MCP server for use in your assistant:
37+
38+
1. Create a folder called `.continue/mcpServers` at the top level of your workspace
39+
2. Add a file called `playwright-mcp.yaml` to this folder.
40+
3. Write the following contents to `playwright-mcp.yaml` and save.
41+
42+
```yaml title=".continue/mcpServers/playwright-mcp.yaml"
43+
name: Playwright mcpServer
44+
version: 0.0.1
45+
schema: v1
46+
mcpServers:
47+
- name: Browser search
48+
command: npx
49+
args:
50+
- "@playwright/mcp@latest"
51+
```
52+
53+
Now test your MCP server by prompting the following command:
54+
55+
```
56+
Open the browser and navigate Hacker News. Save the top 10 headlines in a hn.txt file.
57+
```
58+
59+
The result will be a generated file called `hn.txt` in the current working directory.
60+
61+
![playwright mcp](/img/mcp-playwright.png)
2162

22-
<Tabs groupId="config-example">
63+
## Using MCP Servers
64+
65+
To set up your own MCP server, read the [MCP
66+
quickstart](https://modelcontextprotocol.io/quickstart) and then [create an
67+
`mcpServers`
68+
block](https://hub.continue.dev/new?type=block&blockType=mcpServers) or add a local MCP
69+
server block to your [config file](./configuration.md):
70+
71+
<Tabs groupId="config.yaml">
2372
<TabItem value="yaml" label="YAML">
2473
```yaml title="config.yaml"
2574
mcpServers:
26-
- name: My MCP Server
27-
command: uvx
75+
- name: SQLite MCP
76+
command: npx
2877
args:
29-
- mcp-server-sqlite
30-
- --db-path
31-
- /Users/NAME/test.db
32-
```
33-
</TabItem>
34-
<TabItem value="json" label="JSON">
35-
```json title="config.json"
36-
{
37-
"experimental": {
38-
"modelContextProtocolServers": [
39-
{
40-
"transport": {
41-
"type": "stdio",
42-
"command": "uvx",
43-
"args": ["mcp-server-sqlite", "--db-path", "/Users/NAME/test.db"]
44-
}
78+
- "-y"
79+
- "mcp-sqlite"
80+
- "/path/to/your/database.db"
81+
82+
````
83+
</TabItem>
84+
<TabItem value="json" label="JSON">
85+
```json title="config.json"
86+
{
87+
"experimental": {
88+
"modelContextProtocolServers": [
89+
{
90+
"transport": {
91+
"type": "stdio",
92+
"command": "uvx",
93+
"args": ["mcp-server-sqlite", "--db-path", "/path/to/your/database.db"]
4594
}
46-
]
47-
}
95+
}
96+
]
4897
}
49-
```
98+
}
99+
````
100+
50101
</TabItem>
51102
</Tabs>
103+
104+
### Syntax
105+
106+
MCP blocks follow the established syntax for blocks, with a few additional properties specific to MCP servers.
107+
108+
- `name` (**required**): A display name for the MCP server.
109+
- `command` (**required**): The command to run to start the MCP server.
110+
- `type` (optional): The type of the MCP server: `sse`, `stdio`, `streamable-http`
111+
- `args` (optional): Arguments to pass to the command.
112+
- `env` (optional): Secrets to be injected into the command as environment variables.
113+
114+
### Transport Types
115+
116+
MCP now supports remote server connections through HTTP-based transports, expanding beyond the traditional local stdio transport method. This enables integration with cloud-hosted MCP servers and distributed architectures.
117+
118+
#### Server-Sent Events (SSE) Transport
119+
120+
For real-time streaming communication, use the SSE transport:
121+
122+
```yaml
123+
mcpServers:
124+
- name: Name
125+
type: sse
126+
url: https://....
127+
```
128+
129+
#### Standard Input/Output (stdio)
130+
131+
For local MCP servers that communicate via standard input and output:
132+
133+
```yaml
134+
mcpServers:
135+
- name: Name
136+
type: stdio
137+
command: npx
138+
args:
139+
- "@modelcontextprotocol/server-sqlite"
140+
- "/path/to/your/database.db"
141+
```
142+
143+
#### Streamable HTTP Transport
144+
145+
For standard HTTP-based communication with streaming capabilities:
146+
147+
```yaml
148+
mcpServers:
149+
- name: Name
150+
type: streamable-http
151+
url: https://....
152+
```
153+
154+
These remote transport options allow you to connect to MCP servers hosted on remote infrastructure, enabling more flexible deployment architectures and shared server resources across multiple clients.
155+
156+
For detailed information about transport mechanisms and their use cases, refer to the official MCP documentation on [transports](https://modelcontextprotocol.io/docs/concepts/transports#server-sent-events-sse).
157+
158+
### Working with Secrets
159+
160+
With some MCP servers you will need to use API keys or other secrets. You can leverage locally stored environments secrets
161+
as well as access hosted secrets in the Continue Hub. To leverage Hub secrets, you can use the `inputs` property in your MCP env block instead of `secrets`.
162+
163+
```yaml
164+
mcpServers:
165+
- name: Supabase MCP
166+
command: npx
167+
args:
168+
- -y
169+
- "@supabase/mcp-server-supabase@latest"
170+
- --access-token
171+
- ${{ secrets.SUPABASE_TOKEN }}
172+
env:
173+
SUPABASE_TOKEN: ${{ secrets.SUPABASE_TOKEN }}
174+
- name: GitHub
175+
command: npx
176+
args:
177+
- "-y"
178+
- "@modelcontextprotocol/server-github"
179+
env:
180+
GITHUB_PERSONAL_ACCESS_TOKEN: ${{ secrets.GITHUB_PERSONAL_ACCESS_TOKEN }}
181+
```

‎docs/static/img/mcp-playwright.png

162 KB
Loading

0 commit comments

Comments
 (0)