When you’re building an AI agent, it’s not just about generating smart responses; it’s also about giving your agent the ability to take action.
That’s where the Model Context Protocol (MCP) comes in.
MCP makes it easy for agents to access external tools and services in a consistent way.
Think of it like plugging your agent into a toolbox it can *actually* use.
Let’s say you connect an agent to your calculator MCP server. Suddenly, your agent can perform math operations just by receiving a prompt like “What’s 47 times 89?”—no need to hardcode logic or build custom APIs.
This lesson covers how to connect a calculator MCP server to an agent with the AI Toolkit extension in Visual Studio Code, enabling your agent to perform math operations such as addition, subtraction, multiplication, and division through natural language.
AI Toolkit is a powerful extension for Visual Studio Code 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 major generative models available today.
*Note*: The AI Toolkit currently supports Python and TypeScript.
By the end of this lesson, you will be able to:
Here's how we need to approach this at a high level:
Great, now that we understand the flow, let's configure an AI agent to leverage external tools through MCP, enhancing its capabilities!
> [!WARNING]
> Note for macOS Users.
We're currently investigating an issue affecting dependency installation on macOS.
As a result, macOS users won’t be able to complete this tutorial at this time.
We’ll update the instructions as soon as a fix is available.
Thank you for your patience and understanding!
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.
The exercise leverages the GPT-4o model. The model should be added to My Models before creating the agent.
1. Open the AI Toolkit extension from the Activity Bar.
1. In the Catalog section, select Models to open the Model Catalog. Selecting Models opens the Model Catalog in a new editor tab.
1. In the Model Catalog search bar, enter OpenAI GPT-4o.
1. Click + Add to add the model to your My Models list. Ensure that you've selected the model that's Hosted by GitHub.
1. In the Activity Bar, confirm that the OpenAI GPT-4o model appears in the list.
The Agent (Prompt) Builder enables you to 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.
1. In the Tools section, select Agent (Prompt) Builder. Selecting Agent (Prompt) Builder opens the Agent (Prompt) Builder in a new editor tab.
1. Click the + New Agent button. The extension will launch a setup wizard via the Command Palette.
1. Enter the name Calculator Agent and press Enter.
1. In the Agent (Prompt) Builder, for the Model field, select the OpenAI GPT-4o (via GitHub) model.
With the agent scaffolded, 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 write the system prompt for you.
1. For the Prompts section, click the Generate system prompt button. This button opens in the prompt builder which leverages AI to generate a system prompt for the agent.
1.
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.
1.
Click the Generate button.
A notification will appear in the bottom-right corner confirming that the system prompt is being generated.
Once the prompt generation is complete, the prompt will appear in the System prompt field of the Agent (Prompt) Builder.
1. Review the System prompt and modify if necessary.
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 to execute addition, subtraction, multiplication, and division calculations.
This server will enable your agent to perform real-time math operations in response to natural language prompts.
AI Toolkit is equipped with templates for ease of creating your own MCP server. We'll use the Python template for creating 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.
1. Select + Add Server.
1. Select Create a New MCP Server.
1. Select python-weather as the template.
1. Select Default folder to save the MCP server template.
1. Enter the following name for the server: Calculator
1. A new Visual Studio Code window will open. Select Yes, I trust the authors.
1. Using the terminal (Terminal > New Terminal), create a virtual environment: python -m venv .venv
1. Using the terminal, activate the virtual environment:
1. Windows - .venv\Scripts\activate
1. macOS/Linux - source .venv/bin/activate
1. Using the terminal, install the dependencies: pip install -e .[dev]
1. In the Explorer view of the Activity Bar, expand the src directory and select server.py to open the file in the editor.
1. Replace the code in the server.py file with the following and save:
```python
"""
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
```
Now that your agent has tools, it's time to use them! In this section, you'll submit prompts to the agent to test and validate whether the agent leverages the appropriate tool from the calculator MCP server.
You will run the calculator MCP server on your local dev 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.
1.
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?
1. Click the Run button to generate the agent's response.
1. Review the agent output. The model should conclude that you paid $55.
1. 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.
- The response from each tool is provided in the respective Tool Response.
- The final output from the model is provided in the final Model Response.
1. Submit additional prompts to further test the agent. You can modify the existing prompt in the User prompt field by clicking into the field and replacing the existing prompt.
1. Once you're done testing the agent, you can stop the server via the terminal by entering CTRL/CMD+C to quit.
Try adding an additional tool entry to your server.py file (ex: return the square root of a number).
Submit additional prompts that would require the agent to leverage your new tool (or existing tools).
Be sure to restart the server to load newly added tools.
The takeaways from this chapter is the following:
AI 에이전트를 구축할 때, 단순히 스마트한 응답을 생성하는 것만이 아니라 에이전트가 실제로 행동을 취할 수 있는 능력을 부여하는 것이 중요합니다. 바로 여기서 Model Context Protocol (MCP)이 등장합니다. MCP는 에이전트가 외부 도구와 서비스를 일관된 방식으로 쉽게 접근할 수 있도록 해줍니다. 마치 에이전트를 실제로 사용할 수 있는 도구 상자에 연결하는 것과 같습니다.
예를 들어, 에이전트를 계산기 MCP 서버에 연결했다고 가정해봅시다. 그러면 에이전트는 "47 곱하기 89는 얼마야?"와 같은 프롬프트를 받는 것만으로 수학 연산을 수행할 수 있게 됩니다. 로직을 하드코딩하거나 커스텀 API를 구축할 필요가 없습니다.
이 레슨에서는 Visual Studio Code의 AI Toolkit 확장을 사용하여 계산기 MCP 서버를 에이전트에 연결하는 방법을 다룹니다. 이를 통해 에이전트가 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 수학 연산을 자연어를 통해 수행할 수 있게 됩니다.
AI Toolkit은 Visual Studio Code에서 에이전트 개발을 간소화하는 강력한 확장 프로그램입니다. AI 엔지니어는 로컬 또는 클라우드에서 생성형 AI 모델을 개발하고 테스트하여 AI 애플리케이션을 쉽게 구축할 수 있습니다. 이 확장은 현재 사용 가능한 주요 생성형 모델 대부분을 지원합니다.
*참고*: AI Toolkit은 현재 Python과 TypeScript를 지원합니다.
이 레슨을 마치면 다음을 수행할 수 있습니다:
다음은 전체적인 접근 방식입니다:
좋습니다. 이제 흐름을 이해했으니, MCP를 통해 외부 도구를 활용하여 AI 에이전트의 기능을 확장해봅시다!
> [!WARNING]
> macOS 사용자 참고: 현재 macOS에서 종속성 설치에 영향을 미치는 문제를 조사 중입니다. 이로 인해 macOS 사용자는 이 튜토리얼을 현재 완료할 수 없습니다. 문제가 해결되는 대로 지침을 업데이트하겠습니다. 기다려주셔서 감사합니다!
이 실습에서는 Visual Studio Code의 AI Toolkit을 사용하여 MCP 서버의 도구를 활용하여 AI 에이전트를 구축, 실행 및 개선합니다.
이 실습에서는 GPT-4o 모델을 사용합니다. 에이전트를 생성하기 전에 이 모델을 My Models에 추가해야 합니다.
1. Activity Bar에서 AI Toolkit 확장을 엽니다.
1. Catalog 섹션에서 Models를 선택하여 Model Catalog를 엽니다. Models를 선택하면 Model Catalog가 새 편집기 탭에서 열립니다.
1. Model Catalog 검색창에 OpenAI GPT-4o를 입력합니다.
1. + Add를 클릭하여 모델을 My Models 목록에 추가합니다. GitHub에서 호스팅된 모델을 선택했는지 확인하세요.
1. Activity Bar에서 OpenAI GPT-4o 모델이 목록에 나타나는지 확인합니다.
Agent (Prompt) Builder를 사용하면 AI 기반 에이전트를 생성하고 사용자 정의할 수 있습니다. 이 섹션에서는 새 에이전트를 생성하고 대화를 구동할 모델을 지정합니다.
1. Activity Bar에서 AI Toolkit 확장을 엽니다.
1. Tools 섹션에서 Agent (Prompt) Builder를 선택합니다. Agent (Prompt) Builder를 선택하면 새 편집기 탭에서 Agent (Prompt) Builder가 열립니다.
1. + New Agent 버튼을 클릭합니다. 확장은 Command Palette를 통해 설정 마법사를 실행합니다.
1. 이름으로 Calculator Agent를 입력하고 Enter를 누릅니다.
1. Agent (Prompt) Builder에서 Model 필드에 OpenAI GPT-4o (via GitHub) 모델을 선택합니다.
에이전트의 기본 구조를 생성한 후, 이제 에이전트의 성격과 목적을 정의할 차례입니다. 이 섹션에서는 Generate system prompt 기능을 사용하여 계산기 에이전트의 의도된 동작을 설명하고 모델이 시스템 프롬프트를 작성하도록 합니다.
1. Prompts 섹션에서 Generate system prompt 버튼을 클릭합니다. 이 버튼은 에이전트의 시스템 프롬프트를 생성하는 프롬프트 빌더를 엽니다.
1. Generate a prompt 창에서 다음을 입력합니다: 당신은 유용하고 효율적인 수학 도우미입니다. 기본 산술 문제를 받으면 올바른 결과를 제공합니다.
1. Generate 버튼을 클릭합니다. 오른쪽 하단에 시스템 프롬프트가 생성 중임을 알리는 알림이 나타납니다. 프롬프트 생성이 완료되면 Agent (Prompt) Builder의 System prompt 필드에 프롬프트가 나타납니다.
1. System prompt를 검토하고 필요하면 수정합니다.
에이전트의 시스템 프롬프트를 정의하여 동작과 응답을 안내한 후, 이제 에이전트에 실질적인 기능을 추가할 차례입니다. 이 섹션에서는 덧셈, 뺄셈, 곱셈, 나눗셈 계산을 실행할 도구를 포함한 계산기 MCP 서버를 생성합니다. 이 서버는 에이전트가 자연어 프롬프트에 따라 실시간으로 수학 연산을 수행할 수 있도록 합니다.
AI Toolkit은 사용자 정의 MCP 서버를 쉽게 생성할 수 있는 템플릿을 제공합니다. 우리는 계산기 MCP 서버를 생성하기 위해 Python 템플릿을 사용할 것입니다.
*참고*: AI Toolkit은 현재 Python과 TypeScript를 지원합니다.
1. Agent (Prompt) Builder의 Tools 섹션에서 + MCP Server 버튼을 클릭합니다. 확장은 Command Palette를 통해 설정 마법사를 실행합니다.
1. + Add Server를 선택합니다.
1. Create a New MCP Server를 선택합니다.
1. 템플릿으로 python-weather를 선택합니다.
1. MCP 서버 템플릿을 저장할 폴더로 Default folder를 선택합니다.
1. 서버 이름으로 Calculator를 입력합니다.
1. 새 Visual Studio Code 창이 열립니다. Yes, I trust the authors를 선택합니다.
1. Terminal 메뉴에서 New Terminal을 열어 가상 환경을 생성합니다: python -m venv .venv
1. 터미널에서 가상 환경을 활성화합니다:
- Windows - .venv\Scripts\activate
- macOS/Linux - source .venv/bin/activate
1. 터미널에서 종속성을 설치합니다: pip install -e .[dev]
1. Activity Bar의 Explorer 보기에서 src 디렉토리를 확장하고 server.py를 선택하여 파일을 편집기에서 엽니다.
1. server.py 파일의 코드를 다음으로 교체하고 저장합니다:
```python
"""
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
```
이제 에이전트가 도구를 갖췄으니 이를 사용해볼 차례입니다! 이 섹션에서는 에이전트에 프롬프트를 제출하여 계산기 MCP 서버의 적절한 도구를 활용하는지 테스트하고 검증합니다.
1. MCP 서버를 디버깅하려면 F5를 누릅니다. Agent (Prompt) Builder가 새 편집기 탭에서 열립니다. 서버 상태는 터미널에서 확인할 수 있습니다.
1. Agent (Prompt) Builder의 User prompt 필드에 다음 프롬프트를 입력합니다: 나는 각각 $25인 물건 3개를 샀고, $20 할인권을 사용했어. 총 얼마를 지불했지?
1. Run 버튼을 클릭하여 에이전트의 응답을 생성합니다.
1. 에이전트 출력을 검토합니다. 모델은 $55를 지불했다고 결론을 내려야 합니다.
1. 다음과 같은 과정이 발생해야 합니다:
- 에이전트가 계산을 돕기 위해 multiply와 subtract 도구를 선택합니다.
- multiply 도구에 각각 a와 b 값이 할당됩니다.
- subtract 도구에 각각 a와 b 값이 할당됩니다.
- 각 도구의 응답이 Tool Response에 제공됩니다.
- 모델의 최종 출력이 Model Response에 제공됩니다.
1. 추가 프롬프트를 제출하여 에이전트를 더 테스트합니다. User prompt 필드에서 기존 프롬프트를 클릭하여 수정할 수 있습니다.
1. 테스트가 끝나면 터미널에서 CTRL/CMD+C를 입력하여 서버를 종료할 수 있습니다.
server.py 파일에 추가 도구 항목(예: 숫자의 제곱근 반환)을 추가해보세요. 에이전트가 새 도구(또는 기존 도구)를 활용해야 하는 추가 프롬프트를 제출하세요. 새로 추가된 도구를 로드하려면 서버를 재시작해야 합니다.
이 장의 주요 내용은 다음과 같습니다:
면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다.
정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다.
원본 문서의 원어를 신뢰할 수 있는 권위 있는 출처로 간주해야 합니다.
중요한 정보의 경우, 전문적인 인간 번역을 권장합니다.
이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.