README.md

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

When you build an AI agent, it’s not just about generating intelligent responses; it’s also about enabling your agent to take action. That’s where the Model Context Protocol (MCP) comes into play. MCP simplifies how agents access external tools and services in a consistent manner. Think of it as connecting your agent to a toolbox it can actually use.

For example, if you connect an agent to your calculator MCP server, your agent can perform math operations just by receiving prompts like “What’s 47 times 89?”—no need to hardcode logic or create 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, enabling your agent to perform math operations such as addition, subtraction, multiplication, and division using natural language.

AI Toolkit is a powerful Visual Studio Code extension that streamlines agent development. AI Engineers can easily build AI applications by developing and testing generative AI models—locally or in the cloud. The extension supports most popular 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 through the AI Toolkit.
• Configure an agent to discover and use tools provided by the MCP server.
• Use MCP tools via natural language.

Approach

Here’s a high-level plan:

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

Great, now that we know the workflow, let’s configure an AI agent to use 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 an 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. Make sure to add this 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 that’s Hosted by GitHub.
5. In the Activity Bar, verify 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 drive 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 through the Command Palette.
4. Enter the name Calculator Agent and press Enter.
5. In the Agent (Prompt) Builder, for the Model field, select OpenAI GPT-4o (via GitHub).

-2- Create a system prompt for the agent

With the agent created, it’s time to define its personality and purpose. In this section, you’ll use the Generate system prompt feature to describe the agent’s intended behavior—in this case, a calculator agent—and have the model generate 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 for the agent.
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 adjust if needed.

-3- Create a MCP server

Now that you’ve defined your agent’s system prompt—setting its behavior and responses—it’s time to give the agent practical abilities. 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 real-time math operations based on natural language prompts.

The AI Toolkit includes templates to help you create your own MCP server. We’ll use the Python template to build 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 through the Command Palette.

2. Select + Add Server.

3. Select Create a New MCP Server.

4. Choose python-weather as the template.

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

6. Enter this name for 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 in the terminal: pip install -e .[dev]

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

12. Replace the contents of 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 put them to use! In this section, you’ll submit prompts to the agent to test and confirm that it uses the appropriate tool from the calculator MCP server.

You will run the calculator MCP server on your local development machine 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 corresponding Tool Response.
   • The final output from the model is shown in the Model Response.
6. Submit additional prompts to further test the agent. Modify the prompt in the User prompt field by clicking it and replacing the existing prompt.
7. When finished testing, stop the server in the terminal by pressing CTRL/CMD+C.

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 ones). Remember to restart the server so it loads the new tools.

Solution

Solution

Key Takeaways

Here are the main points from this chapter:

• The AI Toolkit extension is an excellent client for consuming MCP Servers and their tools.
• You can add new tools to MCP servers, expanding your agent’s capabilities to meet changing needs.
• The AI Toolkit provides templates (like Python MCP server templates) that simplify creating custom tools.

Additional Resources

• AI Toolkit docs

What's Next

• Next: Testing & Debugging

Prohlášení o vyloučení odpovědnosti:
Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. Přestože usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoliv nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.