This commit is contained in:
Zachary Lee 2024-12-10 16:06:27 -05:00
commit 091d4654c8
No known key found for this signature in database
2 changed files with 22 additions and 28 deletions

View file

@ -94,15 +94,15 @@ Now, let's create and set up our project:
<CodeGroup> <CodeGroup>
```bash MacOS/Linux ```bash MacOS/Linux
# Create a new directory for our project # Create a new directory for our project
uv init mcp-quickstart uv init weather
cd mcp-quickstart cd weather
# Create virtual environment and activate it # Create virtual environment and activate it
uv venv uv venv
source .venv/bin/activate source .venv/bin/activate
# Install dependencies # Install dependencies
uv pip install mcp httpx uv add mcp httpx
# Remove template file # Remove template file
rm hello.py rm hello.py
@ -115,15 +115,15 @@ touch src/weather/server.py
```powershell Windows ```powershell Windows
# Create a new directory for our project # Create a new directory for our project
uv init mcp-quickstart uv init weather
cd mcp-quickstart cd weather
# Create virtual environment and activate it # Create virtual environment and activate it
uv venv uv venv
.venv\Scripts\activate .venv\Scripts\activate
# Install dependencies # Install dependencies
uv pip install mcp httpx uv add mcp httpx
# Clean up boilerplate code # Clean up boilerplate code
rm hello.py rm hello.py
@ -169,8 +169,8 @@ __all__ = ['main', 'server']
<CodeGroup> <CodeGroup>
```bash MacOS/Linux ```bash MacOS/Linux
# Create a new directory for our project # Create a new directory for our project
mkdir mcp-quickstart mkdir weather
cd mcp-quickstart cd weather
# Initialize a new npm project # Initialize a new npm project
npm init -y npm init -y
@ -186,8 +186,8 @@ touch src/index.ts
```powershell Windows ```powershell Windows
# Create a new directory for our project # Create a new directory for our project
md mcp-quickstart md weather
cd mcp-quickstart cd weather
# Initialize a new npm project # Initialize a new npm project
npm init -y npm init -y
@ -566,7 +566,7 @@ async def handle_call_tool(
return [types.TextContent(type="text", text=f"No active alerts for {state}")] return [types.TextContent(type="text", text=f"No active alerts for {state}")]
# Format each alert into a concise string # Format each alert into a concise string
formatted_alerts = [format_alert(feature) for feature in features] formatted_alerts = [format_alert(feature) for feature in features[:20]] # only take the first 20 alerts
alerts_text = f"Active alerts for {state}:\n\n" + "\n".join(formatted_alerts) alerts_text = f"Active alerts for {state}:\n\n" + "\n".join(formatted_alerts)
return [ return [
@ -680,7 +680,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
}; };
} }
const formattedAlerts = features.map(formatAlert); const formattedAlerts = features.map(formatAlert).slice(0, 20) // only take the first 20 alerts;
const alertsText = `Active alerts for ${stateCode}:\n\n${formattedAlerts.join( const alertsText = `Active alerts for ${stateCode}:\n\n${formattedAlerts.join(
"\n" "\n"
)}`; )}`;
@ -838,7 +838,9 @@ Make sure to run `npm run build` to build your server! This is a very important
</Tab> </Tab>
</Tabs> </Tabs>
Your server is complete! Let's now test your server from an existing MCP host, Claude for Desktop. Your server is complete! Run `uv run src/weather/server.py` to confirm that everything's working.
Let's now test your server from an existing MCP host, Claude for Desktop.
## Testing your server with Claude for Desktop ## Testing your server with Claude for Desktop
@ -878,7 +880,7 @@ Add this configuration (replace the parent folder path):
"command": "uv", "command": "uv",
"args": [ "args": [
"--directory", "--directory",
"/PATH/TO/PARENT/FOLDER/mcp-quickstart", "/PATH/TO/PARENT/FOLDER/weather",
"run", "run",
"weather" "weather"
] ]
@ -893,7 +895,7 @@ Add this configuration (replace the parent folder path):
"weather": { "weather": {
"command": "node", "command": "node",
"args": [ "args": [
"/PATH/TO/PARENT/FOLDER/mcp-quickstart/build/index.js" "/PATH/TO/PARENT/FOLDER/weather/build/index.js"
] ]
} }
} }
@ -911,7 +913,7 @@ Add this configuration (replace the parent folder path):
"command": "uv", "command": "uv",
"args": [ "args": [
"--directory", "--directory",
"C:\\PATH\TO\PARENT\FOLDER\mcp-quickstart", "C:\\PATH\TO\PARENT\FOLDER\weather",
"run", "run",
"weather" "weather"
] ]
@ -926,7 +928,7 @@ Add this configuration (replace the parent folder path):
"weather": { "weather": {
"command": "node", "command": "node",
"args": [ "args": [
"C:\\PATH\TO\PARENT\FOLDER\mcp-quickstart\build\index.ts" "C:\\PATH\TO\PARENT\FOLDER\weather\build\index.ts"
] ]
} }
} }
@ -939,7 +941,7 @@ Add this configuration (replace the parent folder path):
This tells Claude Desktop: This tells Claude Desktop:
1. There's an MCP server named "weather" 1. There's an MCP server named "weather"
2. Launch it by running `uv --directory /PATH/TO/PARENT/FOLDER/mcp-quickstart run weather` if using Python or `node /PATH/TO/PARENT/FOLDER/mcp-quickstart/build/index.js` if using Node 2. Launch it by running `uv --directory /PATH/TO/PARENT/FOLDER/weather run weather` if using Python or `node /PATH/TO/PARENT/FOLDER/weather/build/index.js` if using Node
Save the file, and restart **Claude Desktop**. Save the file, and restart **Claude Desktop**.

View file

@ -1,17 +1,9 @@
--- ---
title: "Building a MCP client" title: "Building MCP clients"
description: "Learn how to build your first client in MCP" description: "Learn how to build your first client in MCP"
--- ---
In this tutorial, you'll learn how to build a client application that connects to MCP servers. In this tutorial, you'll learn how to build a client application that connects to MCP servers. It helps to have gone through the [Quickstart tutorial](/quickstart) that guides you through the basic of building your first server.
## Prerequisite Knowledge
This tutorial assumes familiarity with:
- Python
- LLMs like Claude
It helps to understand [tool use (aka function calling)](https://docs.anthropic.com/en/docs/build-with-claude/tool-use), but it's not required.
## System Requirements ## System Requirements