In this tutorial, you'll learn how to set up and configure an MCPServer integration that exposes your ChatBotKit skillsets as Model Context Protocol (MCP) tools for VSCode. This powerful integration allows VSCode's GitHub Copilot in agent mode to directly access and execute your custom abilities.

By the end of this tutorial, you'll have a fully functional MCPServer integration that bridges your ChatBotKit skillsets with VSCode, enabling sophisticated AI workflows and tool usage directly within your development environment.

Learning Objectives

In this tutorial, you'll learn how to:

• Create and configure an MCPServer integration in ChatBotKit
• Connect your existing skillsets to the MCP protocol
• Generate secure access tokens for VSCode authentication
• Configure VSCode to use your ChatBotKit tools via MCP
• Test your integration with VSCode's agent mode
• Troubleshoot common setup and connectivity issues

Before You Begin

Prerequisites

• Active ChatBotKit account with administrator access (sign up at chatbotkit.com)
• Existing skillset with configured abilities that you want to expose as MCP tools
• Visual Studio Code with the latest GitHub Copilot extension installed and configured
• Basic understanding of VSCode extensions and AI tools

What You'll Need

• Access to your ChatBotKit dashboard and skillsets
• Administrative access to configure VSCode settings and extensions
• Text editor for copying configuration snippets

Understanding MCP in VSCode

VSCode Copilot includes native support for the Model Context Protocol (MCP), an open standard that enables AI applications to securely connect to external tools and data sources. ChatBotKit's MCPServer integration exposes your skillsets as MCP tools, allowing VSCode's GitHub Copilot agent mode to discover and execute your custom abilities.

This integration transforms your ChatBotKit skillsets into accessible AI tools within VSCode's development environment, expanding their reach beyond the ChatBotKit platform while maintaining security and access control through VSCode's built-in MCP features.

Creating Your MCPServer Integration

Step 1: Navigate to Integrations

1. Log into your ChatBotKit account and access the main dashboard
2. In the left navigation menu, click "Integrations"
3. You'll see the integrations overview page with available integration types
4. Locate the "MCP Server" option in the integration grid

Step 2: Initialize the Integration

1. Click on the "MCP Server" integration tile
2. You'll be redirected to the integration setup page
3. The interface will display the MCPServer integration configuration form

Configure Basic Settings

1. In the "Name" field, enter a descriptive name for your integration

2. Add a clear description explaining the integration's purpose

3. The system will automatically generate a unique Access Token for authentication

Step 3: Connect Your Skillset

The most critical configuration step is selecting which skillset to expose through the MCP integration.

Select Your Skillset

1. In the "Skillset" dropdown menu, choose the skillset containing the abilities you want to make available as MCP tools
2. Important: Only abilities within the selected skillset will be accessible to MCP clients
3. Ensure your chosen skillset contains properly configured abilities with clear descriptions

Skillset Selection Best Practices

• Start Small: Begin with a skillset containing 3-5 well-tested abilities
• Clear Naming: Ensure ability names are descriptive and follow consistent naming conventions
• Complete Descriptions: Verify that each ability has comprehensive descriptions that VSCode can understand
• Test Individually: Confirm each ability works correctly within ChatBotKit before exposing via MCP

Step 4: Save and Generate Access Token

1. Click "Create" to save your MCPServer integration
2. The system will create the integration and generate a unique access token
3. Critical: Copy and securely store the access token - you'll need it for VSCode configuration
4. The integration will now appear in your integrations list with a unique ID

Configuring VSCode

Once your MCPServer integration is created, you need to configure VSCode to connect to your ChatBotKit tools through the Model Context Protocol.

Step 1: Access Installation Instructions

1. Navigate back to your MCPServer integration page
2. Click the "Install" button to view configuration instructions and copy
3. Alternatively, copy the integration ID and access token - you'll need these for VSCode configuration

Step 2: Configure VSCode MCP Settings

VSCode supports MCP servers through its built-in Model Context Protocol integration starting from version 1.102. You'll configure this by creating a .vscode/mcp.json file.

Create Workspace MCP Configuration

1. In your VSCode workspace, create a .vscode folder if it doesn't exist
2. Create a new file named mcp.json inside the .vscode folder
3. Add the following configuration, replacing the placeholders with your actual values:

Configuration Parameters

• Integration ID: Replace YOUR_INTEGRATION_ID with the ID from your ChatBotKit MCPServer integration
• Access Token: Replace YOUR_ACCESS_TOKEN with the token generated when you created the integration
• Server Name: Use "chatbotkit" as a descriptive name for your server

Alternative: Add Server via Command Palette

VSCode provides a command to add servers easily:

1. Open the Command Palette (⌃⇧P / Ctrl+Shift+P)
2. Run "MCP: Add Server"
3. Choose "HTTP Server" as the server type
4. Enter server details:
   • Name: chatbotkit
   • URL: https://api.chatbotkit.com/v1/integration/mcpserver/YOUR_INTEGRATION_ID/mcp
   • Headers: Add Authorization header with your token
5. Select "Workspace Settings" to create the .vscode/mcp.json file

User-Level Configuration (Optional)

To make the server available across all workspaces:

1. Run "MCP: Open User Configuration" from the Command Palette
2. Add the same server configuration to your user-level mcp.json file
3. This allows you to use ChatBotKit tools in any VSCode workspace

Testing Your Integration in VSCode

Step 1: Verify MCP Server Connection

After creating your .vscode/mcp.json configuration, VSCode will automatically detect and start your MCP server.

Check Server Status in Extensions View

1. Open the Extensions view (⇧⌘X / Ctrl+Shift+X)
2. Scroll down to the "MCP SERVERS - INSTALLED" section
3. Look for your "chatbotkit" server entry
4. Verify it shows as active/running (green indicator)

Use Command Palette to Verify Connection

1. Open the Command Palette (⌃⇧P / Ctrl+Shift+P)
2. Run "MCP: Show Installed Servers"
3. Confirm your ChatBotKit server appears in the list
4. Right-click on the server to see options like "Show Output" for debugging

Step 2: Access Tools in GitHub Copilot Chat

GitHub Copilot in VSCode automatically discovers MCP tools when configured.

Open GitHub Copilot Chat

1. Open the Chat view using ⌃⌘I (Windows/Linux: Ctrl+Alt+I)
2. Ensure you have GitHub Copilot extension enabled and signed in
3. Look for the mode selector at the top of the chat interface

Switch to Agent Mode

1. Click the dropdown next to the chat input (should show "Chat" by default)
2. Select "Agent" mode from the dropdown
3. Agent mode is required to use MCP tools

Verify Tool Discovery

1. In Agent mode, click the "Tools" button in the chat interface
2. You'll see a tools picker showing all available tools
3. Your ChatBotKit abilities should appear as individual tools
4. Each tool will display its name and description from your skillset

Test a Tool

1. Select a simple tool from your skillset in the tools picker

2. Type a natural language request in the chat that would use that tool

   Example: "Use the weather tool to check current conditions in San Francisco"

3. VSCode will show a tool confirmation dialog before execution

4. Click "Continue" to allow the tool to run

5. Monitor the chat for tool execution results

Direct Tool Reference

You can directly reference tools in any chat mode:

1. Type # in the chat input to see tool suggestions
2. Select a specific tool from the autocomplete list
3. This works in Chat, Edit, and Agent modes

Step 3: Advanced VSCode Integration Testing

Managing Tool Selection

VSCode allows you to control which tools are active in each conversation:

1. In Agent mode, use the "Tools" button to open the tool picker
2. Toggle individual tools on/off as needed for your current task
3. Search for specific tools using the search box in the tool picker
4. Maximum of 128 tools can be enabled per conversation

Tool Confirmation and Security

VSCode implements security measures for tool execution:

1. First-time confirmation: VSCode will ask for permission to run each tool initially
2. Parameter review: You can inspect and edit tool parameters before execution
3. Persistent permissions: Use the dropdown on "Continue" to set permissions for:
   • Current session only
   • Current workspace
   • All future use

Testing Tool Input Parameters

VSCode provides transparency for tool execution:

1. When a tool is invoked, VSCode shows the input parameters
2. Click "Edit Parameters" to modify inputs before execution
3. Verify parameters match your expectations
4. This helps ensure tools receive correct data

Troubleshooting Tool Issues

If tools don't work as expected:

1. Check server output: Right-click the server in Extensions view → "Show Output"
2. Restart server: Right-click → "Restart" in the MCP servers section
3. Verify tool cache: Run "MCP: Reset Cached Tools" from Command Palette
4. Check workspace folders: VSCode passes workspace context to MCP servers

Using MCP Resources (Advanced)

If your ChatBotKit abilities provide file or data resources:

1. In the Chat view, click "Add Context" → "MCP Resources"
2. Select your ChatBotKit server from the resource picker
3. Choose specific resources to include in your conversation context
4. Resources appear as attachments in your chat

Advanced VSCode MCP Configuration

VSCode-Specific Security Features

Server Trust Management

VSCode implements built-in security for MCP servers:

1. Initial trust prompt: VSCode asks for permission when starting a server for the first time
2. Configuration review: You can review server settings before trusting
3. Trust reset: Use Command Palette → "MCP: Reset Trust" to revoke all server permissions
4. Workspace isolation: Trust settings are separate for each workspace

Secure Token Storage in VSCode

VSCode provides secure ways to handle tokens:

1. Input variables: Use the inputs section in mcp.json for prompted credentials
2. Environment files: Reference .env files in your workspace
3. VSCode settings: Store in user settings with Settings Sync for cross-device access

Example using input variables:

Multiple Workspace Configurations

Workspace-Specific vs User-Level Setup

Choose the right configuration scope for your needs:

1. Workspace-specific: Use .vscode/mcp.json for project-specific tools
2. User-level: Use Command Palette → "MCP: Open User Configuration" for universal access
3. Profile-based: Different MCP configurations for different VSCode profiles

Team Collaboration Setup

Share MCP configuration with your development team:

1. Commit .vscode/mcp.json: Include in version control for team sharing
2. Use environment variables: Reference team-shared environment files
3. Document setup: Include setup instructions in your project README

VSCode Profiles and MCP

Profile-Specific Configurations

Use VSCode profiles to manage different MCP setups:

1. Development profile: Focus on coding assistance tools
2. Writing profile: Content creation and documentation tools
3. Testing profile: QA and testing-related abilities

Switching Between Configurations

1. Change profiles: VSCode profiles automatically switch MCP configurations
2. Manage servers: Each profile maintains its own MCP server list
3. Sync settings: Use Settings Sync to maintain profiles across devices

Dev Container Integration

Containerized MCP Setup

Include MCP configuration in Dev Containers:

This ensures consistent MCP access across team development environments.

Troubleshooting VSCode MCP Integration

Common VSCode-Specific Issues

MCP Server Not Starting

Symptoms: Server appears in Extensions view but shows as inactive or fails to start

VSCode-Specific Solutions:

1. Check MCP output: Go to Extensions view → MCP SERVERS → Right-click your server → "Show Output"
2. Restart server: Right-click server → "Restart"
3. Reload VSCode: Command Palette → "Developer: Reload Window"
4. Check VS Code version: Ensure you're running VS Code 1.102 or later
5. Verify configuration: Command Palette → "MCP: Open Workspace Folder MCP Configuration"

Tools Not Appearing in Chat

Symptoms: VSCode doesn't show ChatBotKit tools in the Tools picker

VSCode-Specific Solutions:

1. Switch to Agent mode: Chat dropdown must be set to "Agent" (not "Chat")
2. Check tool cache: Command Palette → "MCP: Reset Cached Tools"
3. Verify server trust: You may need to trust the server when prompted
4. Check Extensions view: Ensure server appears in "MCP SERVERS - INSTALLED" section
5. Enable autodiscovery: Settings → Search "mcp" → Enable "Chat › Mcp: Discovery"

Authentication Errors in VSCode

Symptoms: "Invalid access token" or "Unauthorized" errors in VSCode output

VSCode-Specific Solutions:

1. Check Headers format: Ensure Authorization header format is exact:

2. View server logs: Extensions view → Right-click server → "Show Output"

3. Restart after config changes: VSCode needs restart after mcp.json changes

4. Check for typos: Use Command Palette → "MCP: Open Workspace Folder MCP Configuration"

VSCode Configuration Debugging

Validate MCP Configuration

VSCode provides built-in validation for MCP configuration:

1. Open configuration: Command Palette → "MCP: Open Workspace Folder MCP Configuration"
2. Check for errors: VSCode will highlight JSON syntax errors in red
3. Use IntelliSense: VSCode provides autocomplete for MCP configuration fields
4. View schema: Hover over fields to see expected values

Test HTTP Endpoint from VSCode

Use VSCode's built-in testing features:

1. Check server URL: Extensions view → Server → "Show Configuration"
2. View connection status: Look for error indicators in Chat view
3. Check workspace context: VSCode passes workspace folders to MCP servers

VSCode-Specific MCP Features

Managing Server Trust

VSCode includes security features for MCP servers:

1. Trust prompt: VSCode asks for permission when starting servers first time
2. Reset trust: Command Palette → "MCP: Reset Trust"
3. Review configuration: Click link in trust dialog to review server settings

Server Management in VSCode

Use VSCode's built-in MCP management:

1. List all servers: Command Palette → "MCP: Show Installed Servers"
2. Browse resources: Extensions view → Server → "Browse Resources"
3. Configure model access: Right-click server → "Configure Model Access"
4. View sampling requests: Right-click server → "Show Sampling Requests"

Debugging with VSCode Output Panel

Monitor MCP activity using VSCode's output features:

1. Open Output panel: View → Output
2. Select MCP source: Dropdown → Select your MCP server
3. Monitor real-time: Watch for connection and tool execution logs
4. Export logs: Right-click in output → Copy for support tickets

Next Steps for VSCode Integration

Congratulations! You've successfully set up an MCPServer integration that exposes your ChatBotKit skillsets as AI tools accessible through VSCode's GitHub Copilot agent mode.

Immediate Next Steps

• Test all abilities: Go through each tool in the Tools picker to verify functionality
• Explore agent workflows: Use natural language to orchestrate multiple tools in conversations
• Share configuration: Distribute the .vscode/mcp.json file to team members
• Monitor performance: Check the Extensions view regularly for server status

VSCode-Specific Advanced Use Cases

• Code assistance: Ask Copilot to use your tools while working on specific files
• Workspace automation: Use tools that interact with your current VSCode workspace
• Custom workflows: Combine ChatBotKit tools with VSCode's built-in features
• Team collaboration: Share consistent tool access across development teams

Integration Maintenance

Regular Health Checks

1. Weekly: Verify tools appear in VSCode Tools picker
2. Monthly: Test tool execution in agent mode
3. Quarterly: Review and update skillset abilities in ChatBotKit
4. As needed: Restart MCP server if tools become unresponsive

Updating Your Integration

When you modify skillsets in ChatBotKit:

1. Changes automatically sync to VSCode (no restart needed)
2. New abilities appear in the Tools picker immediately
3. Deleted abilities are removed from VSCode
4. Important: Notify team members of significant ability changes

Your ChatBotKit abilities are now seamlessly integrated into your VSCode development environment, enabling powerful AI assistance directly within your coding workflow through GitHub Copilot's agent mode.