Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Enhancing the VS Code Agent Mode to integrate with Local tools using Model Context Protocol (MCP)
Building a Todo List Server with Model Context Protocol (MCP)
This blog post walks through creating a Todo List server using the Model Context Protocol (MCP), demonstrating how to build AI-friendly tools that integrate seamlessly with VS Code.
I have been using VS Code with GitHub Copilot for development purposes. The introduction of text-based chat, which brought GPT capabilities directly into the IDE, was revolutionary.
GitHub Copilot and the Local Tools Gap
GitHub Copilot has revolutionized how developers write code by providing intelligent code suggestions and completions. While it excels at understanding code context and generating relevant snippets, there has been a notable gap in its ability to interact with local development tools, intranet KBs, and execute actions in the development environment. This limitation means that while Copilot can suggest code, it cannot directly help with tasks like running commands, managing files, or interacting with local services.
Agent Mode: Bridging the Gap
The introduction of Agent Mode in GitHub Copilot represents a significant step forward in AI-assisted development. It enables Copilot to:
This advancement transformed Copilot from a passive code suggestion tool into an active development partner that can help manage your entire development workflow. While tool execution capabilities brought many advantages, they also came with some inherent challenges. Issues such as maintaining tool code, implementing authentication, and managing authorization capabilities created additional overhead for developers.
MCP: The New Standard for AI Tool Integration
Model Context Protocol (MCP) emerges as the next evolution in this space, providing a standardized way for AI models to interact with development tools and services. Unlike traditional approaches where AI assistants are limited to suggesting code, MCP enables:
Model Context Protocol (MCP) is a specification that enables AI models to interact with external tools and services in a standardized way. It defines how tools can expose their functionality through a structured interface that AI models can understand and use.
Key benefits of MCP that I have personally benefited from:
How MCP Tools Work
Each MCP tool follows a standardized structure:
{
name: "toolName",
description: "What the tool does",
parameters: {
// JSON Schema definition of inputs
},
returns: {
// JSON Schema definition of outputs
}
}
When an AI model wants to use a tool:
This structured approach ensures:
Here's how the different components interact in our MCP Todo implementation:
graph TD
A[GitHub Copilot] -->|Natural Language Commands| B[VS Code]
B -->|MCP Protocol| C[MCP Todo Server]
C -->|CRUD Operations| D[(LowDB/Database)]
C -->|Real-time Updates| B
B -->|Command Results| A
Prerequisites
To follow along, you'll need:
mkdir mcp-todo-server
cd mcp-todo-server
npm init -y
npm install @modelcontextprotocol/sdk express lowdb zod
For this demonstration, we're using lowdb to manage tasks in a JSON file without actual integration with an external system. In a production environment, the lowdb functions can be replaced with actual JIRA CRUD API calls for end-to-end implementation.
mcp-todo-server/
├── src/
│ ├── config/
│ ├── tools/
│ ├── utils/
│ └── server.js
└── package.json
Implementing the MCP Server
1. Basic Server Setup
We started with a basic Express server that implements the MCP protocol. The server uses StreamableHTTP for real-time communication and session management.
Key components in server.js:
We used lowdb, a lightweight JSON database, to persist our todos. The database configuration in config/db.js handles:
We implemented four main tools for managing todos:
To enable VS Code to use our MCP server, follow these steps:
{
"mcp": {
"servers": {
"my-mcp-server": {
"url": ""
}
}
}
}
You can use the 4th step to verify if the server is added correctly after the first 3 steps are done. The User Settings option has Start, Stop, and Restart options. This step helped me identify if there are any issues with the MCP tools server effectively.
Using the Todo MCP Server
Here are some example prompts you can use in VS Code with GitHub Copilot to interact with the todo server. Each example includes a screenshot of the actual interaction:
Prompt: "Create a new todo item called 'Review PR #123'"
Response: Successfully created todo "Review PR #123"
Prompt: "Show me all my todos"
Response: Here are your todos:
- Review PR #123 (Not completed)
- Update documentation (Completed)
- Setup test environment (Not completed)
Prompt: "Mark the todo about PR review as completed"
Response: Updated "Review PR #123" to completed
Prompt: "Delete the todo about documentation"
Response: Successfully deleted "Update documentation"
Prompt: "Show me only completed todos"
Response: Completed todos:
- Review PR #123
Next Steps and Improvements
Potential enhancements for the project:
Common Issues and Solutions
Error: Tool 'createTodo' not found
Solution: Check if server is properly initializing tools in server.js
Key implementation files:
We've successfully built a fully functional MCP-compatible Todo server that:
This implementation serves as a great starting point for building more complex MCP tools and understanding how AI models can interact with custom tools through the Model Context Protocol.
Resources
You can also:
Building a Todo List Server with Model Context Protocol (MCP)
This blog post walks through creating a Todo List server using the Model Context Protocol (MCP), demonstrating how to build AI-friendly tools that integrate seamlessly with VS Code.
Table of Contents
- The Evolution of AI-Assisted Development
- What is Model Context Protocol (MCP)?
- Architecture Overview
- Prerequisites
- Setting Up the Project
- Implementing the MCP Server
- VS Code Integration
- Using the Todo MCP Server
- Next Steps and Improvements
- Troubleshooting
- Resources
I have been using VS Code with GitHub Copilot for development purposes. The introduction of text-based chat, which brought GPT capabilities directly into the IDE, was revolutionary.
GitHub Copilot and the Local Tools Gap
GitHub Copilot has revolutionized how developers write code by providing intelligent code suggestions and completions. While it excels at understanding code context and generating relevant snippets, there has been a notable gap in its ability to interact with local development tools, intranet KBs, and execute actions in the development environment. This limitation means that while Copilot can suggest code, it cannot directly help with tasks like running commands, managing files, or interacting with local services.
Agent Mode: Bridging the Gap
The introduction of Agent Mode in GitHub Copilot represents a significant step forward in AI-assisted development. It enables Copilot to:
- Execute terminal commands
- Modify files directly
- Interact with the VS Code environment
- Handle project-specific tasks
This advancement transformed Copilot from a passive code suggestion tool into an active development partner that can help manage your entire development workflow. While tool execution capabilities brought many advantages, they also came with some inherent challenges. Issues such as maintaining tool code, implementing authentication, and managing authorization capabilities created additional overhead for developers.
MCP: The New Standard for AI Tool Integration
Model Context Protocol (MCP) emerges as the next evolution in this space, providing a standardized way for AI models to interact with development tools and services. Unlike traditional approaches where AI assistants are limited to suggesting code, MCP enables:
Direct Tool Integration
- AI models can directly invoke local tools
- Real-time interaction with development environment
- Standardized communication protocol
Extensible Architecture
- Custom tool definitions
- Plugin-based system
- Easy integration with existing services
Development Environment Awareness
- Context-aware assistance
- Access to local resources
- Real-time feedback loop
Model Context Protocol (MCP) is a specification that enables AI models to interact with external tools and services in a standardized way. It defines how tools can expose their functionality through a structured interface that AI models can understand and use.
Key benefits of MCP that I have personally benefited from:
- Standardized tool definitions with JSON Schema
- Real-time interaction capabilities
- Session management
- Built-in VS Code integration
How MCP Tools Work
Each MCP tool follows a standardized structure:
{
name: "toolName",
description: "What the tool does",
parameters: {
// JSON Schema definition of inputs
},
returns: {
// JSON Schema definition of outputs
}
}
When an AI model wants to use a tool:
- It sends a request with the tool name and parameters
- The MCP server validates the request
- The tool executes with the provided parameters
- Results are returned in a standardized format
This structured approach ensures:
- Consistent tool behavior
- Type safety throughout the system
- Easy tool discovery and documentation
- Predictable error handling
Here's how the different components interact in our MCP Todo implementation:
graph TD
A[GitHub Copilot] -->|Natural Language Commands| B[VS Code]
B -->|MCP Protocol| C[MCP Todo Server]
C -->|CRUD Operations| D[(LowDB/Database)]
C -->|Real-time Updates| B
B -->|Command Results| A
Prerequisites
To follow along, you'll need:
- Node.js (v22 or higher)
- VS Code
- Basic understanding of Express.js
- npm or yarn package manager
- First, create a new project and initialize npm:
mkdir mcp-todo-server
cd mcp-todo-server
npm init -y
- Install required dependencies:
npm install @modelcontextprotocol/sdk express lowdb zod
For this demonstration, we're using lowdb to manage tasks in a JSON file without actual integration with an external system. In a production environment, the lowdb functions can be replaced with actual JIRA CRUD API calls for end-to-end implementation.
- Create the basic directory structure:
mcp-todo-server/
├── src/
│ ├── config/
│ ├── tools/
│ ├── utils/
│ └── server.js
└── package.json
Implementing the MCP Server
1. Basic Server Setup
We started with a basic Express server that implements the MCP protocol. The server uses StreamableHTTP for real-time communication and session management.
Key components in server.js:
- Express server setup
- MCP SDK integration
- StreamableHTTP transport configuration
- Session management for maintaining tool state
We used lowdb, a lightweight JSON database, to persist our todos. The database configuration in config/db.js handles:
- JSON file storage
- Basic CRUD operations
- Data persistence between server restarts
We implemented four main tools for managing todos:
createTodo
- Creates new todo items
- Validates input using Zod schema
- Returns the created todo with a unique ID
listTodos
- Lists all todos or filters by completion status
- Formats output for easy reading
- Supports real-time updates
updateTodo
- Updates todo completion status
- Validates input parameters
- Returns updated todo information
deleteTodo
- Removes todos by ID
- Provides completion confirmation
- Handles error cases gracefully
To enable VS Code to use our MCP server, follow these steps:
- Enable Agent mode in VS Code. Click on the drop down just before the model listing and select agent from it.
- Then click on the Gear icon next to the speaker icon in the above image and select "Add more tools" then select "Add MCP Server"
- Then select HTTP or Server-Sent Events and provide the URL based on the server we created. In this case, it's . Then select a name for the server.
- Alternatively you can Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette. Type "Open Settings (JSON)" and select it and add the following configuration:
{
"mcp": {
"servers": {
"my-mcp-server": {
"url": ""
}
}
}
}
You can use the 4th step to verify if the server is added correctly after the first 3 steps are done. The User Settings option has Start, Stop, and Restart options. This step helped me identify if there are any issues with the MCP tools server effectively.
Reload VS Code to apply the changes or use the Start, Stop, Restart options in the settings.json as shown above.
After successful addition of the MCP server, you should see the tools listed when you click the gear icon in the Copilot chat window.
Using the Todo MCP Server
Here are some example prompts you can use in VS Code with GitHub Copilot to interact with the todo server. Each example includes a screenshot of the actual interaction:
- Creating a Todo
Prompt: "Create a new todo item called 'Review PR #123'"
Response: Successfully created todo "Review PR #123"
- Listing Todos
Prompt: "Show me all my todos"
Response: Here are your todos:
- Review PR #123 (Not completed)
- Update documentation (Completed)
- Setup test environment (Not completed)
- Updating a Todo
Prompt: "Mark the todo about PR review as completed"
Response: Updated "Review PR #123" to completed
- Deleting a Todo
Prompt: "Delete the todo about documentation"
Response: Successfully deleted "Update documentation"
- Filtering Todos
Prompt: "Show me only completed todos"
Response: Completed todos:
- Review PR #123
Next Steps and Improvements
Potential enhancements for the project:
Authentication
- Add user authentication
- Implement role-based access
Advanced Features
- Due dates for todos
- Categories/tags
- Priority levels
Performance
- Caching
- Database optimization
- Rate limiting
Testing
- Unit tests
- Integration tests
- Load testing
Common Issues and Solutions
Server Connection Issues
- Verify the server is running on port 3000
- Check VS Code settings for correct server URL
- Ensure no firewall blocking the connection
Tool Registration Problems
Error: Tool 'createTodo' not found
Solution: Check if server is properly initializing tools in server.js
Schema Validation Errors
- Ensure todo items match the required schema
- Check Zod validation rules in tool implementations
- Verify JSON payload format
Real-time Updates Not Working
- Confirm SSE (Server-Sent Events) connection is established
- Check browser console for connection errors
- Verify StreamableHTTP transport configuration
Key implementation files:
- Server setup:
- Tool implementations:
- Database configuration:
We've successfully built a fully functional MCP-compatible Todo server that:
- Implements CRUD operations
- Maintains persistent storage
- Provides real-time updates
- Integrates seamlessly with VS Code
This implementation serves as a great starting point for building more complex MCP tools and understanding how AI models can interact with custom tools through the Model Context Protocol.
Resources
You can also:
- Report bugs by creating
- Suggest improvements through
- Help improve documentation
- Originally posted at