docs: add comprehensive IDE setup guides for Claude Code, Cursor, and Windsurf

- Create dedicated setup documentation for each IDE
- Add Claude Code setup with proper CLI commands and screenshots
- Add Cursor setup with video tutorial and MCP configuration
- Add Windsurf setup with video tutorial and settings instructions
- Update README to consolidate IDE setup under "Connect your IDE" section
- Include visual guides with screenshots for better user experience
- Link all IDE guides to main Claude Project Setup instructions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
czlonkowski
2025-07-16 00:43:26 +02:00
parent a0f09fba28
commit 18e231efa5
9 changed files with 250 additions and 2 deletions

View File

@@ -285,9 +285,21 @@ Add to Claude Desktop config:
> 💡 Tip: If youre running n8n locally on the same machine (e.g., via Docker), use http://host.docker.internal:5678 as the N8N_API_URL.
## 💻 Visual Studio Code Setup
## 💻 Connect your IDE
See [VS Code Project Setup](./docs/VS_CODE_PROJECT_SETUP.md) for instructions.
n8n-MCP works with multiple AI-powered IDEs and tools. Choose your preferred development environment:
### [Claude Code](./docs/CLAUDE_CODE_SETUP.md)
Quick setup for Claude Code CLI - just type "add this mcp server" and paste the config.
### [Visual Studio Code](./docs/VS_CODE_PROJECT_SETUP.md)
Full setup guide for VS Code with GitHub Copilot integration and MCP support.
### [Cursor](./docs/CURSOR_SETUP.md)
Step-by-step tutorial for connecting n8n-MCP to Cursor IDE with custom rules.
### [Windsurf](./docs/WINDSURF_SETUP.md)
Complete guide for integrating n8n-MCP with Windsurf using project rules.
## 🤖 Claude Project Setup

Binary file not shown.

94
docs/CLAUDE_CODE_SETUP.md Normal file
View File

@@ -0,0 +1,94 @@
# Claude Code Setup
Connect n8n-MCP to Claude Code CLI for enhanced n8n workflow development from the command line.
## Quick Setup via CLI
### Basic configuration (documentation tools only):
```bash
claude mcp add n8n-mcp \
-e MCP_MODE=stdio \
-e LOG_LEVEL=error \
-e DISABLE_CONSOLE_OUTPUT=true \
-- npx n8n-mcp
```
![Adding n8n-MCP server in Claude Code](./img/cc_command.png)
### Full configuration (with n8n management tools):
```bash
claude mcp add n8n-mcp \
-e MCP_MODE=stdio \
-e LOG_LEVEL=error \
-e DISABLE_CONSOLE_OUTPUT=true \
-e N8N_API_URL=https://your-n8n-instance.com \
-e N8N_API_KEY=your-api-key \
-- npx n8n-mcp
```
Make sure to replace `https://your-n8n-instance.com` with your actual n8n URL and `your-api-key` with your n8n API key.
## Alternative Setup Methods
### Option 1: Import from Claude Desktop
If you already have n8n-MCP configured in Claude Desktop:
```bash
claude mcp add-from-claude-desktop
```
### Option 2: Project Configuration
For team sharing, add to `.mcp.json` in your project root:
```json
{
"servers": {
"n8n-mcp": {
"command": "npx",
"args": ["n8n-mcp"],
"env": {
"MCP_MODE": "stdio",
"LOG_LEVEL": "error",
"DISABLE_CONSOLE_OUTPUT": "true",
"N8N_API_URL": "https://your-n8n-instance.com",
"N8N_API_KEY": "your-api-key"
}
}
}
}
```
Then use with scope flag:
```bash
claude mcp add n8n-mcp --scope project
```
## Managing Your MCP Server
Check server status:
```bash
claude mcp list
claude mcp get n8n-mcp
```
During a conversation, use the `/mcp` command to see server status and available tools.
![n8n-MCP connected and showing 39 tools available](./img/cc_connected.png)
Remove the server:
```bash
claude mcp remove n8n-mcp
```
## Project Instructions
For optimal results, create a `CLAUDE.md` file in your project root with the instructions from the [main README's Claude Project Setup section](../README.md#-claude-project-setup).
## Tips
- If you're running n8n locally, use `http://localhost:5678` as the N8N_API_URL
- The n8n API credentials are optional - without them, you'll have documentation and validation tools only
- With API credentials, you'll get full workflow management capabilities
- Use `--scope local` (default) to keep your API credentials private
- Use `--scope project` to share configuration with your team (put credentials in environment variables)
- Claude Code will automatically start the MCP server when you begin a conversation

73
docs/CURSOR_SETUP.md Normal file
View File

@@ -0,0 +1,73 @@
# Cursor Setup
Connect n8n-MCP to Cursor IDE for enhanced n8n workflow development with AI assistance.
[![n8n-mcp Cursor Setup Tutorial](./img/cursor_tut.png)](https://www.youtube.com/watch?v=hRmVxzLGJWI)
## Video Tutorial
Watch the complete setup process: [n8n-MCP Cursor Setup Tutorial](https://www.youtube.com/watch?v=hRmVxzLGJWI)
## Setup Process
### 1. Create MCP Configuration
1. Create a `.cursor` folder in your project root
2. Create `mcp.json` file inside the `.cursor` folder
3. Copy the configuration from this repository
**Basic configuration (documentation tools only):**
```json
{
"mcpServers": {
"n8n-mcp": {
"command": "npx",
"args": ["n8n-mcp"],
"env": {
"MCP_MODE": "stdio",
"LOG_LEVEL": "error",
"DISABLE_CONSOLE_OUTPUT": "true"
}
}
}
}
```
**Full configuration (with n8n management tools):**
```json
{
"mcpServers": {
"n8n-mcp": {
"command": "npx",
"args": ["n8n-mcp"],
"env": {
"MCP_MODE": "stdio",
"LOG_LEVEL": "error",
"DISABLE_CONSOLE_OUTPUT": "true",
"N8N_API_URL": "https://your-n8n-instance.com",
"N8N_API_KEY": "your-api-key"
}
}
}
}
```
### 2. Configure n8n Connection
1. Replace `https://your-n8n-instance.com` with your actual n8n URL
2. Replace `your-api-key` with your n8n API key
### 3. Enable MCP Server
1. Click "Enable MCP Server" button in Cursor
2. Go to Cursor Settings
3. Search for "mcp"
4. Confirm MCP is working
### 4. Set Up Project Instructions
1. In your Cursor chat, invoke "create rule" and hit Tab
2. Name the rule (e.g., "n8n-mcp")
3. Set rule type to "always"
4. Copy the Claude Project instructions from the [main README's Claude Project Setup section](../README.md#-claude-project-setup)

69
docs/WINDSURF_SETUP.md Normal file
View File

@@ -0,0 +1,69 @@
# Windsurf Setup
Connect n8n-MCP to Windsurf IDE for enhanced n8n workflow development with AI assistance.
[![n8n-mcp Windsurf Setup Tutorial](./img/windsurf_tut.png)](https://www.youtube.com/watch?v=klxxT1__izg)
## Video Tutorial
Watch the complete setup process: [n8n-MCP Windsurf Setup Tutorial](https://www.youtube.com/watch?v=klxxT1__izg)
## Setup Process
### 1. Access MCP Configuration
1. Go to Settings in Windsurf
2. Navigate to Windsurf Settings
3. Go to MCP Servers > Manage Plugins
4. Click "View Raw Config"
### 2. Add n8n-MCP Configuration
Copy the configuration from this repository and add it to your MCP config:
**Basic configuration (documentation tools only):**
```json
{
"mcpServers": {
"n8n-mcp": {
"command": "npx",
"args": ["n8n-mcp"],
"env": {
"MCP_MODE": "stdio",
"LOG_LEVEL": "error",
"DISABLE_CONSOLE_OUTPUT": "true"
}
}
}
}
```
**Full configuration (with n8n management tools):**
```json
{
"mcpServers": {
"n8n-mcp": {
"command": "npx",
"args": ["n8n-mcp"],
"env": {
"MCP_MODE": "stdio",
"LOG_LEVEL": "error",
"DISABLE_CONSOLE_OUTPUT": "true",
"N8N_API_URL": "https://your-n8n-instance.com",
"N8N_API_KEY": "your-api-key"
}
}
}
}
```
### 3. Configure n8n Connection
1. Replace `https://your-n8n-instance.com` with your actual n8n URL
2. Replace `your-api-key` with your n8n API key
3. Click refresh to apply the changes
### 4. Set Up Project Instructions
1. Create a `.windsurfrules` file in your project root
2. Copy the Claude Project instructions from the [main README's Claude Project Setup section](../README.md#-claude-project-setup)

BIN
docs/img/cc_command.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
docs/img/cc_connected.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
docs/img/cursor_tut.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 KiB

BIN
docs/img/windsurf_tut.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 414 KiB