finished draft of quickstarts
This commit is contained in:
Zack Lee
parent
2d987afeed
commit
e4dd2199fe
1 changed files with 2657 additions and 711 deletions
305
quickstart.mdx
305
quickstart.mdx
|
|
@ -1,305 +0,0 @@
|
|||
---
|
||||
title: "Quickstart"
|
||||
description: "Get started with MCP in less than 5 minutes"
|
||||
---
|
||||
|
||||
Give Claude superpowers by connecting it to your local computer! This guide will show you how to set up Model Context Protocol (MCP) and experience its magic in just 5 minutes.
|
||||
|
||||
<Note>
|
||||
Model Context Protocol (MCP) is like giving Claude hands and eyes on your computer. It can:
|
||||
- Take screenshots and analyze what's on your screen
|
||||
- Read and analyze files from your computer
|
||||
- Help you automate repetitive tasks
|
||||
- Connect to your databases and local tools
|
||||
|
||||
And it does all this while maintaining security - Claude can only access what you explicitly allow.
|
||||
</Note>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
<CodeGroup>
|
||||
```bash macOS
|
||||
# Check if you have Node.js installed
|
||||
node --version # Should be v16 or higher
|
||||
|
||||
# Check if you have git installed
|
||||
git --version
|
||||
```
|
||||
|
||||
```bash Installation
|
||||
# Install Node.js from https://nodejs.org
|
||||
# Install git from https://git-scm.com
|
||||
|
||||
# Or use Homebrew
|
||||
brew install node git
|
||||
```
|
||||
</CodeGroup>
|
||||
|
||||
## Quick Setup
|
||||
|
||||
<Steps>
|
||||
<Step title="Install example servers">
|
||||
Let's start by getting some pre-built MCP servers that Claude can use:
|
||||
|
||||
```bash
|
||||
# Clone the example servers
|
||||
git clone https://github.com/modelcontextprotocol/example-servers
|
||||
cd example-servers
|
||||
|
||||
# Install dependencies and build
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
# Make servers available globally
|
||||
npm install -g
|
||||
```
|
||||
</Step>
|
||||
|
||||
<Step title="Configure Claude">
|
||||
Open your Claude Desktop App configuration:
|
||||
|
||||
```bash
|
||||
code ~/Library/Application\ Support/Claude/claude_desktop_config.json
|
||||
```
|
||||
|
||||
Add this configuration (replace YOUR_USERNAME with your actual username):
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"osascript": {
|
||||
"command": "mcp-server-osascript",
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Save and **restart Claude Desktop App**.
|
||||
</Step>
|
||||
|
||||
<Step title="Grant permissions">
|
||||
When you first use screen capture features, macOS will ask for permissions:
|
||||
|
||||
<Frame>
|
||||
<img src="/api/placeholder/800/400" alt="Screenshot permissions dialog" />
|
||||
</Frame>
|
||||
|
||||
Grant these permissions to Claude Desktop App:
|
||||
- Screen Recording (for screenshots)
|
||||
- Automation (for window management)
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
## Try It Out! 🎉
|
||||
|
||||
Now for the fun part! Try these examples to see MCP in action:
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="🖼️ Basic: Take a screenshot" active>
|
||||
Ask Claude:
|
||||
```
|
||||
Can you take a screenshot of my desktop and describe what you see?
|
||||
```
|
||||
|
||||
Claude will:
|
||||
1. Use MCP to capture your screen
|
||||
2. Add it as context to your conversation
|
||||
3. Analyze and describe what it sees
|
||||
|
||||
Try follow-up questions like:
|
||||
- "How many windows do I have open?"
|
||||
- "What apps am I running?"
|
||||
- "Is my battery level low?"
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="🪄 Intermediate: Window Management">
|
||||
Ask Claude:
|
||||
```
|
||||
I have several windows open and it's messy. Could you help me organize them? Maybe arrange my browser windows side by side?
|
||||
```
|
||||
|
||||
Claude will:
|
||||
1. Take a screenshot to assess the situation
|
||||
2. Use AppleScript to organize your windows
|
||||
3. Take another screenshot to confirm the changes
|
||||
|
||||
Pro tip: You can ask Claude to create specific layouts or focus on particular apps!
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="🚀 Advanced: Create a Layout Script">
|
||||
Ask Claude:
|
||||
```
|
||||
I often need to arrange my windows with:
|
||||
- Browser on the left half
|
||||
- VS Code on the top right quarter
|
||||
- Terminal on the bottom right quarter
|
||||
|
||||
Can you create an AppleScript to automate this layout?
|
||||
```
|
||||
|
||||
Claude will create a reusable script that you can save and run anytime!
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## What Just Happened?
|
||||
|
||||
<Card>
|
||||
Let's break down the magic:
|
||||
|
||||
1. When you installed the `osascript` server, you gave Claude a way to:
|
||||
- Take screenshots (see what you see)
|
||||
- Run AppleScript (control your windows)
|
||||
- Automate macOS tasks
|
||||
|
||||
2. The MCP protocol lets Claude:
|
||||
- Request these actions securely
|
||||
- Get results back in real-time
|
||||
- Chain actions together intelligently
|
||||
|
||||
3. All of this happens locally on your machine - no data leaves your computer!
|
||||
</Card>
|
||||
|
||||
## Add More Capabilities
|
||||
|
||||
Want to give Claude even more superpowers? Add these servers to your configuration:
|
||||
|
||||
<CardGroup cols={3}>
|
||||
<Card title="File System Access" icon="folder-open">
|
||||
Add this to your config to let Claude read and analyze files:
|
||||
```json
|
||||
"tee": {
|
||||
"command": "mcp-server-tee",
|
||||
"args": ["tail", "-f", "/var/log/system.log"],
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
}
|
||||
```
|
||||
</Card>
|
||||
|
||||
<Card title="Database Connection" icon="database">
|
||||
Connect Claude to your PostgreSQL database:
|
||||
```json
|
||||
"postgres": {
|
||||
"command": "mcp-server-postgres",
|
||||
"args": ["postgresql://localhost/mydb"],
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
}
|
||||
```
|
||||
</Card>
|
||||
|
||||
<Card title="Web Automation" icon="globe">
|
||||
Enable web automation capabilities:
|
||||
```json
|
||||
"puppeteer": {
|
||||
"command": "mcp-server-puppeteer",
|
||||
"env": {
|
||||
"HOME": "/Users/YOUR_USERNAME"
|
||||
}
|
||||
}
|
||||
```
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
## Quick Troubleshooting
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Nothing showing up in Claude?">
|
||||
1. Check if MCP is enabled:
|
||||
- Click the 🔌 icon in Claude
|
||||
- You should see your configured servers
|
||||
|
||||
2. Verify your config:
|
||||
```bash
|
||||
cat ~/Library/Application\ Support/Claude/claude_desktop_config.json
|
||||
```
|
||||
|
||||
3. Restart Claude completely:
|
||||
- Quit the app (not just close the window)
|
||||
- Start it again
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Permission errors?">
|
||||
Run this command to see Claude's logs:
|
||||
```bash
|
||||
tail -f ~/Claude.log
|
||||
```
|
||||
|
||||
Common fixes:
|
||||
- Check `HOME` env variable in your config
|
||||
- Grant missing permissions in System Settings
|
||||
- Try running example commands manually in Terminal
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Pro Tips
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Fast Development">
|
||||
During development:
|
||||
- Use Command+R to reload Claude
|
||||
- This restarts MCP servers without closing Claude
|
||||
- Perfect for testing config changes!
|
||||
</Tab>
|
||||
|
||||
<Tab title="Power User Setup">
|
||||
Run multiple servers for maximum capability:
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"osascript": { ... },
|
||||
"postgres": { ... },
|
||||
"puppeteer": { ... },
|
||||
"tee": { ... }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now Claude can:
|
||||
- Take screenshots
|
||||
- Query your database
|
||||
- Automate web tasks
|
||||
- Read local files
|
||||
|
||||
All in the same conversation!
|
||||
</Tab>
|
||||
|
||||
<Tab title="Debug Mode">
|
||||
Add `"debug": true` to see what's happening:
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"osascript": {
|
||||
"command": "mcp-server-osascript",
|
||||
"env": { ... },
|
||||
"debug": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then watch the logs:
|
||||
```bash
|
||||
tail -f ~/Claude.log
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Next Steps
|
||||
|
||||
<Card>
|
||||
Now that you've experienced MCP, you might want to:
|
||||
|
||||
1. [Build your own MCP server](/mcp-dev) - Create custom integrations
|
||||
2. [Explore example servers](https://github.com/modelcontextprotocol/example-servers) - See what's possible
|
||||
3. Join our [community](/community) - Share your MCP creations!
|
||||
</Card>
|
||||
|
||||
<Note>
|
||||
Remember: Claude will help you write MCP servers! Just describe what you want to build, and Claude can guide you through the process.
|
||||
</Note>
|
||||
Loading…
Reference in a new issue