README.md

Consuming a server from the AI Toolkit extension for Visual Studio Code

When building an AI agent, it’s not just about generating smart replies; it’s also about enabling your agent to take action. That’s where the Model Context Protocol (MCP) comes in. MCP lets agents access external tools and services in a consistent way. Think of it as plugging your agent into a toolbox it can actually use.

For example, if you connect an agent to your calculator MCP server, your agent can perform math operations simply by receiving a prompt like “What’s 47 times 89?”—no need to hardcode logic or build custom APIs.

Overview

This lesson explains how to connect a calculator MCP server to an agent using the AI Toolkit extension in Visual Studio Code, allowing your agent to perform math operations like addition, subtraction, multiplication, and division using natural language.

AI Toolkit is a powerful Visual Studio Code extension that simplifies agent development. AI Engineers can build AI applications by developing and testing generative AI models—locally or in the cloud. The extension supports most major generative models available today.

Note: The AI Toolkit currently supports Python and TypeScript.

Learning Objectives

By the end of this lesson, you will be able to:

• Consume an MCP server via the AI Toolkit.
• Configure an agent to discover and use tools provided by the MCP server.
• Use MCP tools through natural language.

Approach

Here’s a high-level approach:

• Create an agent and define its system prompt.
• Create a MCP server with calculator tools.
• Connect the Agent Builder to the MCP server.
• Test the agent’s tool usage through natural language.

Great, now that we understand the flow, let’s configure an AI agent to leverage external tools through MCP, boosting its capabilities!

Prerequisites

• Visual Studio Code
• AI Toolkit for Visual Studio Code

Exercise: Consuming a server

In this exercise, you will build, run, and enhance an AI agent with tools from a MCP server inside Visual Studio Code using the AI Toolkit.

-0- Prestep, add the OpenAI GPT-4o model to My Models

This exercise uses the GPT-4o model. Add the model to My Models before creating the agent.

1. Open the AI Toolkit extension from the Activity Bar.
2. In the Catalog section, select Models to open the Model Catalog. This opens the Model Catalog in a new editor tab.
3. In the Model Catalog search bar, type OpenAI GPT-4o.
4. Click + Add to add the model to your My Models list. Make sure you select the model Hosted by GitHub.
5. In the Activity Bar, confirm that the OpenAI GPT-4o model appears in your list.

-1- Create an agent

The Agent (Prompt) Builder lets you create and customize your own AI-powered agents. In this section, you’ll create a new agent and assign a model to power the conversation.

1. Open the AI Toolkit extension from the Activity Bar.
2. In the Tools section, select Agent (Prompt) Builder. This opens the Agent (Prompt) Builder in a new editor tab.
3. Click the + New Agent button. The extension will launch a setup wizard via the Command Palette.
4. Enter the name Calculator Agent and press Enter.
5. In the Agent (Prompt) Builder, for the Model field, select the OpenAI GPT-4o (via GitHub) model.

-2- Create a system prompt for the agent

With the agent scaffolded, it’s time to define its personality and purpose. Here, you’ll use the Generate system prompt feature to describe the agent’s intended behavior—as a calculator agent—and have the model create the system prompt for you.

1. In the Prompts section, click the Generate system prompt button. This opens the prompt builder, which uses AI to generate a system prompt.
2. In the Generate a prompt window, enter the following: You are a helpful and efficient math assistant. When given a problem involving basic arithmetic, you respond with the correct result.
3. Click Generate. A notification will appear in the bottom-right corner confirming that the system prompt is being generated. When done, the prompt will appear in the System prompt field of the Agent (Prompt) Builder.
4. Review the System prompt and edit it if needed.

-3- Create a MCP server

Now that you’ve defined your agent’s system prompt—guiding its behavior and responses—it’s time to equip the agent with practical capabilities. In this section, you’ll create a calculator MCP server with tools for addition, subtraction, multiplication, and division. This server will allow your agent to perform math operations in real time based on natural language prompts.

AI Toolkit provides templates to simplify creating your own MCP server. We’ll use the Python template for the calculator MCP server.

Note: The AI Toolkit currently supports Python and TypeScript.

1. In the Tools section of the Agent (Prompt) Builder, click the + MCP Server button. The extension will launch a setup wizard via the Command Palette.

2. Select + Add Server.

3. Select Create a New MCP Server.

4. Choose python-weather as the template.

5. Select the Default folder to save the MCP server template.

6. Name the server: Calculator

7. A new Visual Studio Code window will open. Select Yes, I trust the authors.

8. In the terminal (Terminal > New Terminal), create a virtual environment: python -m venv .venv

9. Activate the virtual environment in the terminal:

   1. Windows - .venv\Scripts\activate
   2. macOS/Linux - source venv/bin/activate

10. Install the dependencies: pip install -e .[dev]

11. In the Explorer view, expand the src directory and open server.py.

12. Replace the code in server.py with the following and save:

    """
    Sample MCP Calculator Server implementation in Python.
    
    
    This module demonstrates how to create a simple MCP server with calculator tools
    that can perform basic arithmetic operations (add, subtract, multiply, divide).
    """
    
    from mcp.server.fastmcp import FastMCP
    
    server = FastMCP("calculator")
    
    @server.tool()
    def add(a: float, b: float) -> float:
        """Add two numbers together and return the result."""
        return a + b
    
    @server.tool()
    def subtract(a: float, b: float) -> float:
        """Subtract b from a and return the result."""
        return a - b
    
    @server.tool()
    def multiply(a: float, b: float) -> float:
        """Multiply two numbers together and return the result."""
        return a * b
    
    @server.tool()
    def divide(a: float, b: float) -> float:
        """
        Divide a by b and return the result.
        
        Raises:
            ValueError: If b is zero
        """
        if b == 0:
            raise ValueError("Cannot divide by zero")
        return a / b

-4- Run the agent with the calculator MCP server

Now that your agent has tools, it’s time to use them! Here, you’ll submit prompts to test if the agent correctly uses the calculator MCP server tools.

You will run the calculator MCP server locally via the Agent Builder as the MCP client.

1. Press F5 to start debugging the MCP server. The Agent (Prompt) Builder will open in a new editor tab. The status of the server is visible in the terminal.
2. In the User prompt field of the Agent (Prompt) Builder, enter the following prompt: I bought 3 items priced at $25 each, and then used a $20 discount. How much did I pay?
3. Click the Run button to generate the agent's response.
4. Review the agent output. The model should conclude that you paid $55.
5. Here's a breakdown of what should occur:
   • The agent selects the multiply and substract tools to aid in the calculation.
   • The respective a and b values are assigned for the multiply tool.
   • The respective a and b values are assigned for the subtract tool.
   • Each tool’s response appears in the Tool Response section.
   • The final output from the model appears in the Model Response.
6. Submit more prompts to further test the agent. Modify the prompt in the User prompt field by clicking and editing it.
7. When finished testing, stop the server by entering CTRL/CMD+C in the terminal.

Assignment

Try adding a new tool entry to your server.py file (for example, return the square root of a number). Submit prompts that require the agent to use your new tool (or existing tools). Remember to restart the server to load any new tools.

Solution

Solution

Key Takeaways

The main points from this chapter are:

• The AI Toolkit extension is a great client for consuming MCP Servers and their tools.
• You can add new tools to MCP servers, expanding your agent’s capabilities as needed.
• The AI Toolkit includes templates (like Python MCP server templates) to make creating custom tools easier.

Additional Resources

• AI Toolkit docs

What's Next

• Next: Testing & Debugging

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila maklum bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang sahih. Untuk maklumat penting, terjemahan profesional oleh manusia adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.