Merge pull request #15 from modelcontextprotocol/justin/fixes
Tweaks to "Get started" and "Your first server"
This commit is contained in:
commit
4438d624d1
6 changed files with 249 additions and 215 deletions
278
docs/concepts/transports.mdx
Normal file
278
docs/concepts/transports.mdx
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
---
|
||||
title: "Transports"
|
||||
description: "Learn about MCP's communication mechanisms"
|
||||
---
|
||||
|
||||
Transports in the Model Context Protocol (MCP) provide the foundation for communication between clients and servers. A transport handles the underlying mechanics of how messages are sent and received.
|
||||
|
||||
## How transports work
|
||||
|
||||
An MCP transport is built on a simple message-passing architecture where both clients and servers can send messages to each other. The transport layer is responsible for:
|
||||
|
||||
- Establishing connections
|
||||
- Sending messages
|
||||
- Receiving messages
|
||||
- Handling connection lifecycles
|
||||
- Managing errors
|
||||
- Ensuring reliable delivery
|
||||
|
||||
## Available transport types
|
||||
|
||||
MCP supports three main transport types:
|
||||
|
||||
### Standard input/output (stdio)
|
||||
|
||||
The stdio transport enables communication through standard input and output streams. This is particularly useful for local integrations and command-line tools.
|
||||
|
||||
```typescript
|
||||
// Server implementation
|
||||
const server = new Server({
|
||||
name: "example-server",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new StdioServerTransport();
|
||||
await server.connect(transport);
|
||||
|
||||
// Client implementation
|
||||
const client = new Client({
|
||||
name: "example-client",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new StdioClientTransport({
|
||||
command: "./server",
|
||||
args: ["--option", "value"]
|
||||
});
|
||||
await client.connect(transport);
|
||||
```
|
||||
|
||||
### WebSocket
|
||||
|
||||
WebSocket transport provides real-time, bidirectional communication over a persistent connection. This is ideal for web-based applications that need low-latency messaging.
|
||||
|
||||
```typescript
|
||||
// Server implementation
|
||||
const server = new Server({
|
||||
name: "example-server",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new WebSocketServerTransport();
|
||||
await server.connect(transport);
|
||||
|
||||
// Client implementation
|
||||
const client = new Client({
|
||||
name: "example-client",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new WebSocketClientTransport(
|
||||
new URL("ws://localhost:3000")
|
||||
);
|
||||
await client.connect(transport);
|
||||
```
|
||||
|
||||
### Server-sent events
|
||||
|
||||
SSE transport enables server-to-client streaming with HTTP POST requests for client-to-server communication. This is useful when WebSocket support isn't available.
|
||||
|
||||
```typescript
|
||||
// Server implementation
|
||||
const server = new Server({
|
||||
name: "example-server",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new SSEServerTransport("/message", response);
|
||||
await server.connect(transport);
|
||||
|
||||
// Client implementation
|
||||
const client = new Client({
|
||||
name: "example-client",
|
||||
version: "1.0.0"
|
||||
});
|
||||
|
||||
const transport = new SSEClientTransport(
|
||||
new URL("http://localhost:3000/sse")
|
||||
);
|
||||
await client.connect(transport);
|
||||
```
|
||||
|
||||
## Transport interface
|
||||
|
||||
All transport implementations must conform to the Transport interface:
|
||||
|
||||
```typescript
|
||||
interface Transport {
|
||||
// Start processing messages
|
||||
start(): Promise<void>;
|
||||
|
||||
// Send a JSON-RPC message
|
||||
send(message: JSONRPCMessage): Promise<void>;
|
||||
|
||||
// Close the connection
|
||||
close(): Promise<void>;
|
||||
|
||||
// Callbacks
|
||||
onclose?: () => void;
|
||||
onerror?: (error: Error) => void;
|
||||
onmessage?: (message: JSONRPCMessage) => void;
|
||||
}
|
||||
```
|
||||
|
||||
## Message format
|
||||
|
||||
Messages sent over MCP transport follow the JSON-RPC 2.0 specification. There are three types of messages:
|
||||
|
||||
### Requests
|
||||
|
||||
```typescript
|
||||
{
|
||||
jsonrpc: "2.0",
|
||||
id: number | string,
|
||||
method: string,
|
||||
params?: object
|
||||
}
|
||||
```
|
||||
|
||||
### Responses
|
||||
|
||||
```typescript
|
||||
{
|
||||
jsonrpc: "2.0",
|
||||
id: number | string,
|
||||
result?: object,
|
||||
error?: {
|
||||
code: number,
|
||||
message: string,
|
||||
data?: unknown
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Notifications
|
||||
|
||||
```typescript
|
||||
{
|
||||
jsonrpc: "2.0",
|
||||
method: string,
|
||||
params?: object
|
||||
}
|
||||
```
|
||||
|
||||
## Error handling
|
||||
|
||||
Transport implementations should handle various error scenarios:
|
||||
|
||||
1. Connection errors
|
||||
2. Message parsing errors
|
||||
3. Protocol errors
|
||||
4. Network timeouts
|
||||
5. Resource cleanup
|
||||
|
||||
Example error handling:
|
||||
|
||||
```typescript
|
||||
class ExampleTransport implements Transport {
|
||||
async start() {
|
||||
try {
|
||||
// Connection logic
|
||||
} catch (error) {
|
||||
this.onerror?.(new Error(`Failed to connect: ${error}`));
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async send(message: JSONRPCMessage) {
|
||||
try {
|
||||
// Sending logic
|
||||
} catch (error) {
|
||||
this.onerror?.(new Error(`Failed to send message: ${error}`));
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Best practices
|
||||
|
||||
When implementing or using MCP transport:
|
||||
|
||||
1. Handle connection lifecycle properly
|
||||
2. Implement proper error handling
|
||||
3. Clean up resources on connection close
|
||||
4. Use appropriate timeouts
|
||||
5. Validate messages before sending
|
||||
6. Log transport events for debugging
|
||||
7. Implement reconnection logic when appropriate
|
||||
8. Handle backpressure in message queues
|
||||
9. Monitor connection health
|
||||
10. Implement proper security measures
|
||||
|
||||
## Security considerations
|
||||
|
||||
When implementing transport:
|
||||
|
||||
### Authentication and authorization
|
||||
|
||||
- Implement proper authentication mechanisms
|
||||
- Validate client credentials
|
||||
- Use secure token handling
|
||||
- Implement authorization checks
|
||||
|
||||
### Data security
|
||||
|
||||
- Use TLS for network transport
|
||||
- Encrypt sensitive data
|
||||
- Validate message integrity
|
||||
- Implement message size limits
|
||||
- Sanitize input data
|
||||
|
||||
### Network security
|
||||
|
||||
- Implement rate limiting
|
||||
- Use appropriate timeouts
|
||||
- Handle denial of service scenarios
|
||||
- Monitor for unusual patterns
|
||||
- Implement proper firewall rules
|
||||
|
||||
## Debugging transport
|
||||
|
||||
Tips for debugging transport issues:
|
||||
|
||||
1. Enable debug logging
|
||||
2. Monitor message flow
|
||||
3. Check connection states
|
||||
4. Validate message formats
|
||||
5. Test error scenarios
|
||||
6. Use network analysis tools
|
||||
7. Implement health checks
|
||||
8. Monitor resource usage
|
||||
9. Test edge cases
|
||||
10. Use proper error tracking
|
||||
|
||||
## Transport selection guide
|
||||
|
||||
Choose the appropriate transport based on your needs:
|
||||
|
||||
### Use stdio when
|
||||
|
||||
- Building command-line tools
|
||||
- Implementing local integrations
|
||||
- Needing simple process communication
|
||||
- Working with shell scripts
|
||||
|
||||
### Use WebSocket when
|
||||
|
||||
- Real-time updates are needed
|
||||
- Low latency is required
|
||||
- Bidirectional communication is necessary
|
||||
- Working with web applications
|
||||
|
||||
### Use SSE when
|
||||
|
||||
- Only server-to-client streaming is needed
|
||||
- WebSocket support is limited
|
||||
- Working with restricted networks
|
||||
- Implementing simple updates
|
||||
|
|
@ -11,6 +11,10 @@ Let's build your first MCP server in Python! We'll create a weather server that
|
|||
|
||||
## Prerequisites
|
||||
|
||||
<Info>
|
||||
The following steps are for macOS. Guides for other platforms are coming soon.
|
||||
</Info>
|
||||
|
||||
<Steps>
|
||||
<Step title="Install Python">
|
||||
You'll need Python 3.10 or higher:
|
||||
|
|
@ -20,7 +24,9 @@ Let's build your first MCP server in Python! We'll create a weather server that
|
|||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Install uv (https://docs.astral.sh/uv/) via homebrew">
|
||||
<Step title="Install uv via homebrew">
|
||||
See https://docs.astral.sh/uv/ for more information.
|
||||
|
||||
```bash
|
||||
brew install uv
|
||||
uv --version # Should be 0.4.18 or higher
|
||||
|
|
|
|||
|
|
@ -22,35 +22,17 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Step>
|
||||
|
||||
<Step title="Create a new project">
|
||||
You can use our [create-typescript-server](https://github.com/modelcontextprotocol/create-typescript-server) tool to bootstrap a new project:
|
||||
|
||||
```bash
|
||||
mkdir weather-server
|
||||
npx @modelcontextprotocol/create-server weather-server
|
||||
cd weather-server
|
||||
npm init -y
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Install dependencies">
|
||||
```bash
|
||||
npm install @modelcontextprotocol/sdk axios dotenv typescript @types/node
|
||||
npm install --save-dev ts-node
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Configure TypeScript">
|
||||
Create `tsconfig.json`:
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
npm install --save axios dotenv
|
||||
```
|
||||
</Step>
|
||||
|
||||
|
|
@ -65,16 +47,8 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
## Create your server
|
||||
|
||||
<Steps>
|
||||
<Step title="Create project structure">
|
||||
```bash
|
||||
mkdir src
|
||||
touch src/index.ts
|
||||
touch src/types.ts
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Define types">
|
||||
In `src/types.ts`:
|
||||
Create a file `src/types.ts`, and add the following:
|
||||
|
||||
```typescript
|
||||
export interface OpenWeatherResponse {
|
||||
|
|
@ -111,7 +85,7 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
}
|
||||
|
||||
// Type guard for forecast arguments
|
||||
export function isValidForecastArgs(args: unknown): args is GetForecastArgs {
|
||||
export function isValidForecastArgs(args: any): args is GetForecastArgs {
|
||||
return (
|
||||
typeof args === "object" &&
|
||||
args !== null &&
|
||||
|
|
@ -124,9 +98,10 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Step>
|
||||
|
||||
<Step title="Add the base code">
|
||||
In `src/index.ts`:
|
||||
Replace `src/index.ts` with the following:
|
||||
|
||||
```typescript
|
||||
#!/usr/bin/env node
|
||||
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
|
||||
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
||||
import {
|
||||
|
|
@ -142,7 +117,6 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
import {
|
||||
WeatherData,
|
||||
ForecastDay,
|
||||
GetForecastArgs,
|
||||
OpenWeatherResponse,
|
||||
isValidForecastArgs
|
||||
} from "./types.js";
|
||||
|
|
@ -171,6 +145,11 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
this.server = new Server({
|
||||
name: "example-weather-server",
|
||||
version: "0.1.0"
|
||||
}, {
|
||||
capabilities: {
|
||||
resources: {},
|
||||
tools: {}
|
||||
}
|
||||
});
|
||||
|
||||
// Configure axios with defaults
|
||||
|
|
@ -223,7 +202,7 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Step>
|
||||
|
||||
<Step title="Add resource handlers">
|
||||
Add this to the `setupHandlers` method:
|
||||
Add this to the `setupResourceHandlers` method:
|
||||
|
||||
```typescript
|
||||
private setupResourceHandlers(): void {
|
||||
|
|
@ -289,7 +268,7 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Step>
|
||||
|
||||
<Step title="Add tool handlers">
|
||||
Add these handlers to the `setupHandlers` method:
|
||||
Add these handlers to the `setupToolHandlers` method:
|
||||
|
||||
```typescript
|
||||
private setupToolHandlers(): void {
|
||||
|
|
@ -359,13 +338,21 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
});
|
||||
}
|
||||
|
||||
return { toolResult: forecasts };
|
||||
return {
|
||||
content: {
|
||||
mimeType: "application/json",
|
||||
text: JSON.stringify(forecasts, null, 2)
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError(error)) {
|
||||
throw new McpError(
|
||||
ErrorCode.InternalError,
|
||||
`Weather API error: ${error.response?.data.message ?? error.message}`
|
||||
);
|
||||
return {
|
||||
content: {
|
||||
mimeType: "text/plain",
|
||||
text: `Weather API error: ${error.response?.data.message ?? error.message}`
|
||||
},
|
||||
isError: true,
|
||||
}
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
|
|
@ -376,21 +363,9 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Step>
|
||||
|
||||
<Step title="Build and test">
|
||||
Add these scripts to `package.json`:
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"start": "node dist/index.js",
|
||||
"dev": "ts-node src/index.ts"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then run:
|
||||
```bash
|
||||
npm run build
|
||||
npm install -g .
|
||||
npm link
|
||||
```
|
||||
</Step>
|
||||
</Steps>
|
||||
|
|
@ -399,7 +374,7 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
|
||||
<Steps>
|
||||
<Step title="Update Claude config">
|
||||
Add to `claude_desktop_config.json`:
|
||||
If you didn't already connect to Claude Desktop during project setup, add to `claude_desktop_config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -504,6 +479,27 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
title="Error Handling"
|
||||
icon="shield"
|
||||
>
|
||||
When a tool encounters an error, return the error message with `isError: true`, so the model can self-correct:
|
||||
|
||||
```typescript
|
||||
try {
|
||||
const response = await axiosInstance.get(...);
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError(error)) {
|
||||
return {
|
||||
content: {
|
||||
mimeType: "text/plain",
|
||||
text: `Weather API error: ${error.response?.data.message ?? error.message}`
|
||||
},
|
||||
isError: true,
|
||||
}
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
```
|
||||
|
||||
For other handlers, throw an error, so the application can notify the user:
|
||||
|
||||
```typescript
|
||||
try {
|
||||
const response = await this.axiosInstance.get(...);
|
||||
|
|
@ -511,7 +507,7 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
if (axios.isAxiosError(error)) {
|
||||
throw new McpError(
|
||||
ErrorCode.InternalError,
|
||||
`API error: ${error.response?.data.message}`
|
||||
`Weather API error: ${error.response?.data.message}`
|
||||
);
|
||||
}
|
||||
throw error;
|
||||
|
|
@ -520,11 +516,11 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
</Card>
|
||||
|
||||
<Card
|
||||
title="Type Guards"
|
||||
title="Type Validation"
|
||||
icon="check"
|
||||
>
|
||||
```typescript
|
||||
function isValidForecastArgs(args: unknown): args is GetForecastArgs {
|
||||
function isValidForecastArgs(args: any): args is GetForecastArgs {
|
||||
return (
|
||||
typeof args === "object" &&
|
||||
args !== null &&
|
||||
|
|
@ -533,71 +529,36 @@ This guide uses the OpenWeatherMap API. You'll need a free API key from [OpenWea
|
|||
);
|
||||
}
|
||||
```
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title="Environment Variables"
|
||||
icon="gear"
|
||||
>
|
||||
```typescript
|
||||
if (!process.env.OPENWEATHER_API_KEY) {
|
||||
throw new Error("OPENWEATHER_API_KEY is required");
|
||||
}
|
||||
```
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title="Constants"
|
||||
icon="box"
|
||||
>
|
||||
```typescript
|
||||
const API_CONFIG = {
|
||||
BASE_URL: '...',
|
||||
ENDPOINTS: {
|
||||
CURRENT: 'weather',
|
||||
FORECAST: 'forecast'
|
||||
}
|
||||
} as const;
|
||||
```
|
||||
<Tip>You can also use libraries like [Zod](https://zod.dev/) to perform this validation automatically.</Tip>
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
## Available transports
|
||||
|
||||
While this guide uses stdio transport, MCP supports multiple transport options:
|
||||
|
||||
### WebSocket
|
||||
```typescript
|
||||
import { WebSocketServerTransport } from "@modelcontextprotocol/sdk/server/websocket.js";
|
||||
const transport = new WebSocketServerTransport();
|
||||
```
|
||||
|
||||
### SSE (Server-Sent Events)
|
||||
```typescript
|
||||
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
|
||||
const transport = new SSEServerTransport("/events", response);
|
||||
```
|
||||
While this guide uses stdio to run the MCP server as a local process, MCP supports other [transports](/docs/concepts/transports) as well.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
<Info>
|
||||
The following troubleshooting tips are for macOS. Guides for other platforms are coming soon.
|
||||
</Info>
|
||||
|
||||
### Build errors
|
||||
```bash
|
||||
# Check TypeScript version
|
||||
npx tsc --version
|
||||
|
||||
# Clean and rebuild
|
||||
rm -rf dist/
|
||||
rm -rf build/
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Runtime errors
|
||||
Look for detailed error messages in the Claude app logs:
|
||||
Look for detailed error messages in the Claude Desktop logs:
|
||||
```bash
|
||||
# Launch Claude with logging
|
||||
open /Applications/Claude.app --stdout ~/Claude.log --stderr ~/Claude.log
|
||||
|
||||
# Monitor logs
|
||||
tail -f ~/Claude.log
|
||||
tail -n 20 -f ~/Library/Application\ Support/Claude/mcp*.log
|
||||
```
|
||||
|
||||
### Type errors
|
||||
|
|
@ -628,4 +589,4 @@ npx tsc --noEmit
|
|||
|
||||
<Note>
|
||||
Need help? Ask Claude! Since it has access to the MCP SDK documentation, it can help you debug issues and suggest improvements to your server.
|
||||
</Note>
|
||||
</Note>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Choose the path that best fits your needs:
|
|||
</Card>
|
||||
<Card
|
||||
title="Build your first server (TypeScript)"
|
||||
icon="code"
|
||||
icon="square-js"
|
||||
href="/docs/first-server/typescript"
|
||||
>
|
||||
Create a simple MCP server in TypeScript to understand the basics
|
||||
|
|
@ -94,14 +94,14 @@ Dive deeper into MCP's core concepts and capabilities:
|
|||
Let your servers request completions from LLMs
|
||||
</Card>
|
||||
<Card
|
||||
title="Transport"
|
||||
title="Transports"
|
||||
icon="network-wired"
|
||||
href="/docs/concepts/transport"
|
||||
href="/docs/concepts/transports"
|
||||
>
|
||||
Learn about MCP's communication mechanisms
|
||||
Learn about MCP's communication mechanism
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
## Contributing
|
||||
|
||||
Want to contribute? Check out our [GitHub repository](https://github.com/modelcontextprotocol) or join our growing community of developers building with MCP.
|
||||
Want to contribute? Check out [@modelcontextprotocol](https://github.com/modelcontextprotocol) on GitHub to join our growing community of developers building with MCP.
|
||||
|
|
|
|||
17
mint.json
17
mint.json
|
|
@ -43,15 +43,24 @@
|
|||
"navigation": [
|
||||
{
|
||||
"group": "Get Started",
|
||||
"pages": ["introduction", "quickstart"]
|
||||
"pages": [
|
||||
"introduction",
|
||||
"quickstart"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Your First MCP Server",
|
||||
"pages": ["docs/first-server/python", "docs/first-server/typescript"]
|
||||
"pages": [
|
||||
"docs/first-server/python",
|
||||
"docs/first-server/typescript"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Development Tools",
|
||||
"pages": ["docs/tools/debugging", "docs/tools/inspector"]
|
||||
"pages": [
|
||||
"docs/tools/debugging",
|
||||
"docs/tools/inspector"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Concepts",
|
||||
|
|
@ -61,7 +70,7 @@
|
|||
"docs/concepts/prompts",
|
||||
"docs/concepts/tools",
|
||||
"docs/concepts/sampling",
|
||||
"docs/concepts/transport"
|
||||
"docs/concepts/transports"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
234
quickstart.mdx
234
quickstart.mdx
|
|
@ -10,16 +10,16 @@ MCP is a protocol that enables secure connections between clients, such as the C
|
|||
- Query and analyze your data securely
|
||||
|
||||
<Note>
|
||||
While this guide focuses on using Claude Desktop as an example MCP client, the protocol is open and can be implemented by any application. IDEs, AI tools, and other software can all act as MCP clients to access local services in a standardized way.
|
||||
While this guide focuses on using Claude Desktop as an example MCP client, the protocol is open and can be implemented by any application. IDEs, AI tools, and other software can all act as MCP clients to access local integrations in a standardized way.
|
||||
</Note>
|
||||
|
||||
<Warning>
|
||||
Claude Desktop's MCP support is currently in developer preview and only supports connecting to local servers running on your machine. Remote connections are not yet supported. MCP integration is only available in the Claude Desktop app, not the Claude web interface (claude.ai).
|
||||
Claude Desktop's MCP support is currently in developer preview and only supports connecting to local MCP servers running on your machine. Remote MCP connections are not yet supported. This integration is only available in the Claude Desktop app, not the Claude web interface (claude.ai).
|
||||
</Warning>
|
||||
|
||||
## How MCP works
|
||||
|
||||
MCP (Model Context Protocol) is an open protocol that enables secure, controlled interactions between AI applications and local resources on your computer. Let's break down how it works, then look at how we'll use it in this guide.
|
||||
MCP (Model Context Protocol) is an open protocol that enables secure, controlled interactions between AI applications and local or remote resources. Let's break down how it works, then look at how we'll use it in this guide.
|
||||
|
||||
### General Architecture
|
||||
At its core, MCP follows a client-server architecture where multiple services can connect to any compatible client:
|
||||
|
|
@ -38,13 +38,17 @@ flowchart LR
|
|||
|
||||
S1 <--> R1[("Local\nResource A")]
|
||||
S2 <--> R2[("Local\nResource B")]
|
||||
S3 <--> R3[("Local\nResource C")]
|
||||
end
|
||||
|
||||
subgraph "Internet"
|
||||
S3 <-->|"Web APIs"| R3[("Remote\nResource C")]
|
||||
end
|
||||
```
|
||||
|
||||
- **MCP Clients**: Applications like Claude Desktop, IDEs, or AI tools that want to access local resources
|
||||
- **MCP Servers**: Lightweight programs that each expose specific capabilities through the standardized MCP protocol
|
||||
- **MCP Clients**: Applications like Claude Desktop, IDEs, or AI tools that want to access resources
|
||||
- **MCP Servers**: Lightweight programs that each expose specific capabilities through the standardized Model Context Protocol
|
||||
- **Local Resources**: Your computer's resources (databases, files, services) that MCP servers can securely access
|
||||
- **Remote Resources**: Resources available over the internet (e.g., through APIs) that MCP servers can connect to
|
||||
|
||||
### In This Guide
|
||||
|
||||
|
|
@ -67,15 +71,15 @@ flowchart LR
|
|||
2. A SQLite MCP Server provides secure database access
|
||||
3. Your local SQLite database stores the actual data
|
||||
|
||||
All communication happens entirely on your machine - no data leaves your computer. The MCP protocol ensures that Claude Desktop can only perform approved database operations through well-defined interfaces.
|
||||
All communication happens entirely on your machine—no data leaves your computer. The MCP protocol ensures that Claude Desktop can only perform approved database operations through well-defined interfaces.
|
||||
This gives you a secure way to let Claude analyze and interact with your local data while maintaining complete control over what it can access.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- macOS (Windows/Linux guides coming soon)
|
||||
- macOS or Windows
|
||||
- The latest version of [Claude Desktop](https://claude.ai/download) installed
|
||||
- Node.js v18 or higher (`node --version` to check)
|
||||
- Git (`git --version` to check)
|
||||
- [Claude Desktop app](https://claude.ai/download) installed
|
||||
- SQLite (`sqlite3 --version` to check)
|
||||
|
||||
<Accordion title="Need to install the prerequisites?">
|
||||
|
|
@ -92,84 +96,144 @@ brew install node git sqlite3
|
|||
|
||||
## Installation
|
||||
|
||||
<Steps>
|
||||
<Step title="Install example servers">
|
||||
Let's start by getting the pre-built MCP servers:
|
||||
<Tabs>
|
||||
<Tab title="macOS">
|
||||
<Steps>
|
||||
<Step title="Install example servers">
|
||||
Let's start by getting the pre-built MCP servers:
|
||||
|
||||
```bash
|
||||
# Clone the example servers
|
||||
git clone https://github.com/modelcontextprotocol/servers
|
||||
cd servers
|
||||
|
||||
# Install dependencies and build
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
# Make servers available globally
|
||||
npm install -g
|
||||
```
|
||||
```bash
|
||||
npm install -g @modelcontextprotocol/servers
|
||||
```
|
||||
|
||||
This makes the MCP servers available as command-line tools that Claude Desktop can launch.
|
||||
</Step>
|
||||
This makes the MCP servers available as command-line tools that Claude Desktop can launch.
|
||||
</Step>
|
||||
|
||||
<Step title="Create a sample database">
|
||||
Let's create a simple SQLite database for testing:
|
||||
<Step title="Create a sample database">
|
||||
Let's create a simple SQLite database for testing:
|
||||
|
||||
```bash
|
||||
# Create a new SQLite database
|
||||
sqlite3 ~/test.db <<EOF
|
||||
CREATE TABLE products (
|
||||
id INTEGER PRIMARY KEY,
|
||||
name TEXT,
|
||||
price REAL
|
||||
);
|
||||
|
||||
INSERT INTO products (name, price) VALUES
|
||||
('Widget', 19.99),
|
||||
('Gadget', 29.99),
|
||||
('Gizmo', 39.99);
|
||||
EOF
|
||||
```
|
||||
</Step>
|
||||
```bash
|
||||
# Create a new SQLite database
|
||||
sqlite3 ~/test.db <<EOF
|
||||
CREATE TABLE products (
|
||||
id INTEGER PRIMARY KEY,
|
||||
name TEXT,
|
||||
price REAL
|
||||
);
|
||||
|
||||
INSERT INTO products (name, price) VALUES
|
||||
('Widget', 19.99),
|
||||
('Gadget', 29.99),
|
||||
('Gizmo', 39.99);
|
||||
EOF
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Configure Claude Desktop">
|
||||
Open your Claude Desktop App configuration:
|
||||
<Step title="Configure Claude Desktop">
|
||||
Open your Claude Desktop App configuration at `~/Library/Application Support/Claude/claude_desktop_config.json` in a text editor.
|
||||
|
||||
```bash
|
||||
# Requires VSCode to be installed to use the 'code' command
|
||||
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
|
||||
```
|
||||
For example, if you have [VS Code](https://code.visualstudio.com/) installed:
|
||||
|
||||
```bash
|
||||
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
|
||||
```
|
||||
|
||||
Add this configuration (replace YOUR_USERNAME with your actual username):
|
||||
Add this configuration (replace YOUR_USERNAME with your actual username):
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"sqlite": {
|
||||
"command": "mcp-server-sqlite",
|
||||
"args": ["/Users/YOUR_USERNAME/test.db"]
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"sqlite": {
|
||||
"command": "mcp-server-sqlite",
|
||||
"args": ["/Users/YOUR_USERNAME/test.db"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
This tells Claude Desktop:
|
||||
1. There's an MCP server named "sqlite"
|
||||
2. Launch it using the `mcp-server-sqlite` command
|
||||
3. Connect it to your test database
|
||||
4. Provide necessary environment variables
|
||||
This tells Claude Desktop:
|
||||
1. There's an MCP server named "sqlite"
|
||||
2. Launch it using the `mcp-server-sqlite` command
|
||||
3. Connect it to your test database
|
||||
|
||||
Save and **restart Claude Desktop App**.
|
||||
</Step>
|
||||
</Steps>
|
||||
Save the file, and restart **Claude Desktop**.
|
||||
</Step>
|
||||
</Steps>
|
||||
</Tab>
|
||||
<Tab title="Windows">
|
||||
<Steps>
|
||||
<Step title="Install example servers">
|
||||
Let's start by getting the pre-built MCP servers:
|
||||
|
||||
```bash
|
||||
npm install -g @modelcontextprotocol/servers
|
||||
```
|
||||
|
||||
This makes the MCP servers available as command-line tools that Claude Desktop can launch.
|
||||
</Step>
|
||||
|
||||
<Step title="Create a sample database">
|
||||
Let's create a simple SQLite database for testing:
|
||||
|
||||
```powershell
|
||||
# Create a new SQLite database
|
||||
$sql = @'
|
||||
CREATE TABLE products (
|
||||
id INTEGER PRIMARY KEY,
|
||||
name TEXT,
|
||||
price REAL
|
||||
);
|
||||
|
||||
INSERT INTO products (name, price) VALUES
|
||||
('Widget', 19.99),
|
||||
('Gadget', 29.99),
|
||||
('Gizmo', 39.99);
|
||||
'@
|
||||
|
||||
cd ~
|
||||
& sqlite3 test.db $sql
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Configure Claude Desktop">
|
||||
Open your Claude Desktop App configuration at `%APPDATA%\Claude\claude_desktop_config.json` in a text editor.
|
||||
|
||||
For example, if you have [VS Code](https://code.visualstudio.com/) installed:
|
||||
|
||||
```powershell
|
||||
code $env:AppData\Claude\claude_desktop_config.json
|
||||
```
|
||||
|
||||
Add this configuration (replace YOUR_USERNAME with your actual username):
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"sqlite": {
|
||||
"command": "mcp-server-sqlite",
|
||||
"args": ["C:\\Users\\YOUR_USERNAME\\test.db"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This tells Claude Desktop:
|
||||
1. There's an MCP server named "sqlite"
|
||||
2. Launch it using the `mcp-server-sqlite` command
|
||||
3. Connect it to your test database
|
||||
|
||||
Save the file, and restart **Claude Desktop**.
|
||||
</Step>
|
||||
</Steps>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Test it out
|
||||
|
||||
Let's verify everything is working. Try sending this prompt to Claude Desktop:
|
||||
|
||||
```
|
||||
Can you connect to my SQLite database and tell me what products are available and their prices?
|
||||
Can you connect to my SQLite database and tell me what products are available, and their prices?
|
||||
```
|
||||
|
||||
Claude Desktop will:
|
||||
|
|
@ -185,11 +249,11 @@ Claude Desktop will:
|
|||
|
||||
When you interact with Claude Desktop using MCP:
|
||||
|
||||
1. **Server Discovery**: Claude Desktop loads your configured MCP servers on startup
|
||||
1. **Server Discovery**: Claude Desktop connects to your configured MCP servers on startup
|
||||
2. **Protocol Handshake**: When you ask about data, Claude Desktop:
|
||||
- Identifies which MCP server can help (sqlite in this case)
|
||||
- Negotiates capabilities through the MCP protocol
|
||||
- Establishes a secure local connection
|
||||
- Negotiates capabilities through the protocol
|
||||
- Requests data or actions from the MCP server
|
||||
|
||||
3. **Interaction Flow**:
|
||||
```mermaid
|
||||
|
|
@ -242,12 +306,9 @@ Want to give Claude Desktop more local integration capabilities? Add these serve
|
|||
<Accordion title="File System Access" icon="folder-open">
|
||||
Add this to your config to let Claude Desktop read and analyze files:
|
||||
```json
|
||||
"tee": {
|
||||
"command": "mcp-server-tee",
|
||||
"args": ["tail", "-f", "/var/log/system.log"],
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
"filesystem": {
|
||||
"command": "mcp-server-filesystem",
|
||||
"args": ["/Users/YOUR_USERNAME/Desktop"]
|
||||
}
|
||||
```
|
||||
</Accordion>
|
||||
|
|
@ -257,10 +318,7 @@ Want to give Claude Desktop more local integration capabilities? Add these serve
|
|||
```json
|
||||
"postgres": {
|
||||
"command": "mcp-server-postgres",
|
||||
"args": ["postgresql://localhost/mydb"],
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
"args": ["postgresql://localhost/mydb"]
|
||||
}
|
||||
```
|
||||
</Accordion>
|
||||
|
|
@ -293,23 +351,23 @@ Each client may implement MCP features differently or support different capabili
|
|||
<AccordionGroup>
|
||||
<Accordion title="Nothing showing up in Claude Desktop?">
|
||||
1. Check if MCP is enabled:
|
||||
- Click the 🔌 icon in Claude Desktop
|
||||
- Click the 🔌 icon in Claude Desktop, next to the chat box
|
||||
- Expand "Installed MCP Servers"
|
||||
- You should see your configured servers
|
||||
|
||||
2. Verify your config:
|
||||
```bash
|
||||
cat ~/Library/Application\ Support/Claude/claude_desktop_config.json
|
||||
```
|
||||
- From Claude Desktop, go to Claude > Settings…
|
||||
- Open the "Developer" tab to see your configuration
|
||||
|
||||
3. Restart Claude Desktop completely:
|
||||
- Quit the app (not just close the window)
|
||||
- Start it again
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Database connection errors?">
|
||||
<Accordion title="MCP or database errors?">
|
||||
1. Check Claude Desktop's logs:
|
||||
```bash
|
||||
tail -f ~/Library/Logs/Claude/mcp.log
|
||||
tail -n 20 -f ~/Library/Logs/Claude/mcp*.log
|
||||
```
|
||||
|
||||
2. Verify database access:
|
||||
|
|
|
|||
Loading…
Reference in a new issue