Windsurf Integration

Integrate Dispersl with Windsurf IDE through Model Context Protocol (MCP) to enhance your development workflow with multi-agent AI capabilities and specialized development agents.

What You'll Get

With Dispersl integrated into Windsurf, you can:

Coordinate multi-agent development teams directly in your IDE
Generate complex applications with specialized AI agents
Automate testing workflows with dedicated test agents
Manage Git operations through AI assistance
Generate comprehensive documentation automatically
Access advanced development tools beyond Windsurf's built-in features

Prerequisites

Windsurf IDE installed and configured
Active Dispersl account with API access
Dispersl MCP key (obtained from your dashboard)
Node.js and npm installed for MCP package

Setup Instructions

Step 1: Get Your Dispersl MCP Key

Obtain your Dispersl MCP key:

Log into your Dispersl dashboard
Navigate to Settings → MCP Integration
Generate a new MCP key or copy your existing key
Save this key securely for configuration

Or via API:

curl -X GET "https://api.dispersl.com/v1/mcp/key" \
  -H "Authorization: Bearer YOUR_DISPERSL_API_KEY"

Step 2: Install Dispersl MCP Package

npm install -g dispersl-mcp

Step 3: Configure Windsurf MCP Settings

Global Configuration

Create a global MCP configuration for use across all projects:

Create the Windsurf config directory
```
mkdir -p ~/.windsurf
```

Create the MCP configuration file Create ~/.windsurf/mcp.json:

{
  "mcpServers": {
    "dispersl": {
      "command": "dispersl-mcp",
      "args": ["--server"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "DISPERSL_API_URL": "https://api.dispersl.com/v1"
      }
    }
  }
}

Project-Specific Configuration

For project-specific Dispersl integration:

Navigate to your project directory
```
cd /path/to/your/project
```

Create project MCP configuration Create .windsurf/mcp.json:

{
  "mcpServers": {
    "dispersl": {
      "command": "dispersl-mcp",
      "args": ["--server", "--project-mode"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "PROJECT_ROOT": ".",
        "DISPERSL_PROJECT_CONFIG": ".dispersl.json"
      }
    }
  }
}

Add to .gitignore
```
echo ".windsurf/mcp.json" >> .gitignore
```

Step 4: Configure Windsurf Settings

Open Windsurf IDE
Go to Settings (Cmd/Ctrl + ,)
Navigate to Extensions → MCP
Enable the Dispersl MCP server
Restart Windsurf to apply changes

Step 5: Optional Project Configuration

Create a .dispersl.json file in your project root for custom agent settings:

{
  "agents": {
    "code": {
      "model": "anthropic/claude-3-sonnet",
      "temperature": 0.1,
      "frameworks": ["react", "typescript", "node"]
    },
    "test": {
      "model": "openai/gpt-4",
      "framework": "jest",
      "coverage_threshold": 90
    },
    "git": {
      "model": "deepseek/deepseek-r1",
      "branch_prefix": "feature/",
      "commit_style": "conventional"
    },
    "docs": {
      "model": "google/gemini-pro",
      "format": "markdown",
      "include_examples": true
    }
  },
  "workflow": {
    "auto_test": true,
    "auto_commit": false,
    "auto_docs": true
  }
}

Verification

Test your Dispersl integration in Windsurf:

Open a project in Windsurf
Open the AI assistant panel

Test the connection:

List available Dispersl agents and their capabilities

Test multi-agent coordination:

Use Dispersl to create a simple REST API with tests and documentation

If successful, you'll see Dispersl agents available and coordinating to complete tasks.

Using Dispersl in Windsurf

Multi-Agent Development Workflows

Full-Stack Application Development

Dispersl: Build a complete task management application with:

1. Plan Agent: Create development roadmap and architecture
2. Code Agent: Generate React frontend with TypeScript
3. Code Agent: Build Node.js/Express backend with database
4. Test Agent: Create comprehensive test suites
5. Git Agent: Set up version control workflow
6. Docs Agent: Generate API and user documentation

Please coordinate all agents and provide progress updates.

Microservices Development

Use Dispersl to create a microservices architecture:
- User authentication service
- Product catalog service
- Order processing service
- Notification service
- API gateway configuration
- Docker containerization
- Kubernetes deployment manifests

Code Generation and Enhancement

API Development

Dispersl Code Agent: Create a GraphQL API for a social media platform with:
- User management and authentication
- Post creation and interaction (likes, comments)
- Real-time notifications
- File upload handling
- Rate limiting and security
- Comprehensive error handling

Frontend Component Library

Generate a React component library with Dispersl:
- Reusable UI components (buttons, forms, modals)
- TypeScript definitions
- Storybook documentation
- Unit tests for all components
- Build and publish configuration

Testing and Quality Assurance

Comprehensive Testing Setup

Dispersl Test Agent: Set up complete testing infrastructure:
- Unit tests with Jest and React Testing Library
- Integration tests for API endpoints
- End-to-end tests with Playwright
- Visual regression testing
- Performance testing setup
- Code coverage reporting
- Automated test execution in CI/CD

Code Quality Enhancement

Use Dispersl to improve code quality:
- ESLint and Prettier configuration
- TypeScript strict mode setup
- Code review automation
- Security vulnerability scanning
- Performance optimization analysis
- Accessibility testing setup

Version Control and DevOps

Git Workflow Setup

Dispersl Git Agent: Establish professional Git workflow:
- Feature branch strategy implementation
- Automated commit message validation
- Pre-commit hooks setup
- Code review process automation
- Release management workflow
- Hotfix procedures

CI/CD Pipeline Creation

Create comprehensive CI/CD pipeline with Dispersl:
- GitHub Actions workflow setup
- Automated testing on pull requests
- Code quality gates
- Security scanning integration
- Docker image building and pushing
- Deployment to staging and production
- Rollback procedures

Documentation and Maintenance

Project Documentation

Dispersl Docs Agent: Generate complete project documentation:
- API reference with interactive examples
- Architecture decision records (ADRs)
- Setup and development guides
- Deployment instructions
- Troubleshooting guides
- Contributing guidelines

Advanced Features

Custom Agent Workflows

Create custom workflows that combine multiple agents:

{
  "workflows": {
    "feature-development": {
      "steps": [
        {
          "agent": "plan",
          "action": "analyze_requirements",
          "input": "feature_description"
        },
        {
          "agent": "code",
          "action": "implement_feature",
          "depends_on": "plan"
        },
        {
          "agent": "test",
          "action": "generate_tests",
          "depends_on": "code"
        },
        {
          "agent": "git",
          "action": "create_pr",
          "depends_on": "test"
        }
      ]
    }
  }
}

Integration with Windsurf Features

File Explorer Integration

Right-click on a directory in Windsurf file explorer:
"Generate Dispersl component structure"
"Create Dispersl test suite for this module"
"Generate Dispersl documentation for this package"

Terminal Integration

# Use Dispersl commands directly in Windsurf terminal
dispersl code "Create authentication middleware"
dispersl test "Generate tests for user service"
dispersl git "Create feature branch for payment system"
dispersl docs "Generate API documentation"

Real-time Collaboration

Team Development

Dispersl: Set up team development environment with:
- Shared coding standards and configurations
- Collaborative Git workflows
- Automated code review processes
- Team documentation standards
- Shared testing strategies
- Deployment coordination

Best Practices

Workflow Optimization

Start with planning: Use the Plan Agent for complex features
Coordinate agents: Let multiple agents work together efficiently
Monitor progress: Track agent coordination through Windsurf's interface
Customize configurations: Tailor agent settings to your project needs

Security and Configuration

Secure MCP keys: Store keys in environment variables
Project isolation: Use project-specific configurations when needed
Access control: Limit agent permissions appropriately
Regular updates: Keep the dispersl-mcp package updated

Performance Optimization

Agent selection: Choose appropriate models for different tasks
Resource management: Monitor token usage and API limits
Caching: Enable caching for frequently used operations
Batch operations: Group related tasks for efficiency

Troubleshooting

Common Issues

"Dispersl agents not responding"

Check your MCP key validity and account credits
Verify network connectivity and firewall settings
Restart Windsurf after configuration changes
Check the dispersl-mcp package installation

"Configuration file errors"

Validate JSON syntax in configuration files
Ensure file paths and permissions are correct
Check environment variable names and values
Verify the MCP server command and arguments

"Agent coordination failures"

Review agent dependencies and execution order
Check for conflicting agent configurations
Monitor API rate limits and usage quotas
Verify project-specific settings

Getting Help

Check Windsurf's developer console for error messages
Review Dispersl logs in your dashboard
Test individual agents to isolate issues
Community support: Join our Discord for assistance
Documentation: Review the complete integration guide

Example Projects

E-commerce Platform

Dispersl: Create a complete e-commerce platform with:
- Product catalog with search and filtering
- Shopping cart and checkout process
- User authentication and profiles
- Order management system
- Payment integration
- Admin dashboard
- Mobile-responsive design
- Comprehensive testing
- Deployment configuration

SaaS Application

Build a SaaS application using Dispersl:
- Multi-tenant architecture
- Subscription management
- User onboarding flow
- Dashboard and analytics
- API rate limiting
- Security and compliance
- Documentation and support

Open Source Library

Create an open source library with Dispersl:
- Core library functionality
- TypeScript definitions
- Comprehensive documentation
- Example applications
- Testing and CI/CD
- Package publishing
- Community guidelines

Next Steps

Complete the setup following the instructions above
Test with simple tasks to verify the integration
Explore multi-agent workflows for complex projects
Customize agent configurations for your development style
Scale to production projects with confidence

Ready to supercharge your Windsurf development experience with Dispersl's multi-agent AI platform!

Vscode Zed