VS Code Integration

Integrate Dispersl with Visual Studio Code 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 VS Code, you can:

Access multi-agent development teams directly in your editor
Generate complex applications with specialized AI agents
Automate testing workflows with dedicated test agents
Manage Git operations through AI assistance
Generate comprehensive documentation as you code
Coordinate multiple development tasks simultaneously

Prerequisites

Visual Studio Code installed
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 Required Extensions

Install the MCP extension for VS Code:

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "MCP Protocol"
Install the MCP extension

Step 3: Install Dispersl MCP Package

npm install -g dispersl-mcp

Step 4: Configure VS Code Settings

Global Configuration

Add to your VS Code user settings (settings.json):

{
  "mcp.servers": {
    "dispersl": {
      "command": "dispersl-mcp",
      "args": ["--vscode-mode"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "VSCODE_INTEGRATION": "true"
      }
    }
  },
  "mcp.autoStart": true,
  "mcp.logLevel": "info"
}

Workspace Configuration

For project-specific configuration, create .vscode/settings.json:

{
  "mcp.servers": {
    "dispersl": {
      "command": "dispersl-mcp",
      "args": ["--vscode-mode", "--project-root", "${workspaceFolder}"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "PROJECT_TYPE": "web-application",
        "DISPERSL_CONFIG": "${workspaceFolder}/.dispersl.json"
      }
    }
  }
}

Step 5: Create Project Configuration

Create .dispersl.json in your project root:

{
  "vscode_integration": {
    "enabled": true,
    "command_palette": true,
    "status_bar": true,
    "sidebar_panel": true
  },
  "agents": {
    "code": {
      "model": "anthropic/claude-3-sonnet",
      "auto_format": true,
      "auto_import": true,
      "code_style": "prettier"
    },
    "test": {
      "model": "openai/gpt-4",
      "framework": "jest",
      "auto_run": false,
      "coverage_display": true
    },
    "git": {
      "model": "deepseek/deepseek-r1",
      "auto_stage": false,
      "commit_template": "conventional",
      "branch_naming": "feature/{ticket}-{description}"
    },
    "docs": {
      "model": "google/gemini-pro",
      "auto_generate": true,
      "format": "jsdoc",
      "include_examples": true
    }
  },
  "keybindings": {
    "dispersl.plan": "ctrl+shift+p",
    "dispersl.code": "ctrl+shift+c",
    "dispersl.test": "ctrl+shift+t",
    "dispersl.git": "ctrl+shift+g",
    "dispersl.docs": "ctrl+shift+d"
  }
}

Step 6: Configure Keybindings (Optional)

Add custom keybindings in keybindings.json:

[
  {
    "key": "ctrl+shift+alt+p",
    "command": "dispersl.planTask",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+alt+c",
    "command": "dispersl.generateCode",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+alt+t",
    "command": "dispersl.generateTests",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+alt+g",
    "command": "dispersl.gitOperations",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+alt+d",
    "command": "dispersl.generateDocs",
    "when": "editorTextFocus"
  }
]

Verification

Test your Dispersl integration in VS Code:

Restart VS Code
Open the Command Palette (Ctrl+Shift+P)
Type "Dispersl" to see available commands
Test the connection:
```
Dispersl: Show Available Agents
```

If successful, you'll see a list of available Dispersl agents and their capabilities.

Using Dispersl in VS Code

Command Palette Integration

Access Dispersl agents through the Command Palette:

Multi-Agent Task Planning

Dispersl: Plan Complex Task - Coordinate multiple agents for complex development tasks
Dispersl: Show Agent Status - View current agent activities and coordination

Code Generation

Dispersl: Generate Code - Use the Code Agent for complex code generation
Dispersl: Refactor Selection - Refactor selected code with AI assistance
Dispersl: Generate API Endpoints - Create REST or GraphQL APIs

Testing

Dispersl: Generate Tests - Create comprehensive test suites
Dispersl: Run Test Agent - Execute testing workflows
Dispersl: Generate Test Data - Create mock data and fixtures

Version Control

Dispersl: Git Workflow - Manage Git operations with AI
Dispersl: Create Feature Branch - Set up new feature branches
Dispersl: Prepare Pull Request - Prepare PRs with proper formatting

Documentation

Dispersl: Generate Documentation - Create comprehensive docs
Dispersl: Update README - Maintain project documentation
Dispersl: Generate API Docs - Create API reference documentation

Context Menu Integration

Right-click on files or folders to access Dispersl features:

File Context Menu

"Generate Dispersl Tests for This File"
"Generate Dispersl Documentation"
"Refactor with Dispersl Code Agent"

Folder Context Menu

"Generate Dispersl Component Structure"
"Create Dispersl Test Suite"
"Generate Dispersl Module Documentation"

Sidebar Panel Integration

Access Dispersl through a dedicated sidebar panel:

Agent Status Panel

View active agents and their current tasks
Monitor agent coordination and progress
Track token usage and costs
View task history and analytics

Quick Actions Panel

Start new multi-agent tasks
Access frequently used agent commands
View recent task results
Manage agent configurations

Status Bar Integration

Dispersl adds status information to VS Code's status bar:

Current active agents indicator
Task progress notifications
Token usage counter
Connection status indicator

Advanced Features

IntelliSense Integration

Dispersl enhances VS Code's IntelliSense with:

AI-powered code completions from specialized agents
Context-aware suggestions based on project patterns
Multi-agent code analysis and recommendations

Debugging Integration

AI-Assisted Debugging

Dispersl Debug: Analyze this error and suggest fixes
- Use Code Agent to understand the error context
- Generate potential solutions
- Create test cases to verify fixes
- Update documentation if needed

Git Integration

Enhanced Git Workflow

AI-powered commit message generation
Automated branch naming based on task context
Intelligent merge conflict resolution
Code review assistance with AI insights

Workspace Configuration

Multi-Project Setup

Configure different Dispersl settings for different project types:

{
  "mcp.servers": {
    "dispersl-frontend": {
      "command": "dispersl-mcp",
      "args": ["--profile", "frontend"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "PROJECT_TYPE": "react-typescript"
      }
    },
    "dispersl-backend": {
      "command": "dispersl-mcp",
      "args": ["--profile", "backend"],
      "env": {
        "DISPERSL_MCP_KEY": "YOUR_DISPERSL_MCP_KEY",
        "PROJECT_TYPE": "node-express"
      }
    }
  }
}

Team Configuration

Set up shared team configurations:

{
  "dispersl.team": {
    "shared_agents": ["code", "test", "docs"],
    "coding_standards": "team-eslint-config",
    "git_workflow": "feature-branch",
    "documentation_style": "jsdoc"
  }
}

Best Practices

Workflow Optimization

Use appropriate agents: Match agents to specific task types
Coordinate efficiently: Let agents work together on complex tasks
Monitor progress: Track agent activities through VS Code interface
Customize settings: Tailor agent configurations to your workflow

Security and Privacy

Secure MCP keys: Store keys in secure environment variables
Access control: Limit agent permissions appropriately
Code privacy: Ensure sensitive code is handled securely
Audit trails: Monitor all agent interactions and changes

Performance Optimization

Agent selection: Choose efficient 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

"MCP server not starting"

Check that dispersl-mcp package is installed globally
Verify your MCP key is correct and active
Check VS Code's developer console for error messages
Restart VS Code after configuration changes

"Agents not responding"

Verify your Dispersl account has sufficient credits
Check network connectivity and firewall settings
Review API rate limits and usage quotas
Check for service status updates

"Configuration errors"

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

Debugging Steps

Check VS Code Output panel for MCP-related logs
Review Dispersl dashboard for agent activity and errors
Test individual agents to isolate issues
Verify configuration files for syntax and content errors
Check network connectivity and service status

Getting Help

Documentation: Review the complete VS Code integration guide
Community: Join our Discord for community support
Support: Contact Dispersl support for technical assistance
Status: Check our status page for service updates

Example Workflows

Full-Stack Development

// Use Command Palette: "Dispersl: Plan Full-Stack Application"

Project: E-commerce Platform
- Frontend: React with TypeScript
- Backend: Node.js with Express
- Database: PostgreSQL with Prisma
- Testing: Jest and Playwright
- Deployment: Docker and Kubernetes

Dispersl will coordinate multiple agents to:
1. Plan the overall architecture
2. Generate frontend components
3. Create backend APIs
4. Set up database schemas
5. Generate comprehensive tests
6. Create deployment configurations
7. Generate documentation

API Development

// Select API endpoint code and use: "Dispersl: Enhance API Endpoint"

Dispersl Code Agent will:
- Add proper error handling
- Implement input validation
- Add authentication middleware
- Generate OpenAPI documentation
- Create comprehensive tests
- Optimize performance

Legacy Code Modernization

// Right-click on legacy file: "Dispersl: Modernize Code"

Dispersl will:
- Analyze current code patterns
- Suggest modern alternatives
- Refactor to current standards
- Add proper TypeScript types
- Generate tests for refactored code
- Update documentation

Next Steps

Complete the setup following the instructions above
Test basic functionality with simple tasks
Explore advanced features like multi-agent coordination
Customize your workflow with project-specific configurations
Scale to production projects with confidence

Ready to transform your VS Code development experience with Dispersl's multi-agent AI platform!

Roocode Windsurf