Imagine you hire a world-renowned and brilliant historian who has memorized every textbook ever written up until 2023. They can tell you about any historical event in detail. However, when you ask them how many github repostory have been created in the last 5 years, or what the stock prices are or about the latest weather conditions in your city, they have absolutely no clue. Their knowledge is immense, but static.
Similarly, machine learning models are brilliant, yet isolated from real-time data. The problem is that they are often not trained on the specific information or context of the question you are asking.
For AI agents to obtain up-to-date context on a subject, they rely on Model Context Protocol (MCP) servers to interoperate with external tools and resources (SDKs, APIs, and front-end systems). In this article, we’ll discuss what MCPs are and show you a step-by-step guide on how to build your custom MCP server in TypeScript Continuous AI.
What is a Model Context Protocol (MCP)?
The Model Context Protocol (MCP) is an open protocol that enables large language models (LLMs) to securely connect with external data sources, tools, and environments. Similar to design patterns like Retrieval-Augmented Generation (RAG), tool calling, and AI agents, MCPs provide more contextual data to LLMs.
MCP was developed by Anthropic and has been adopted by major industry players such as Continue, OpenAI, and others. MCP provides a standardized way for AI models to access real-time information and perform actions beyond their static training data. An MCP defines key components like tools (functions or actions an AI can execute), resources (contextual data such as files or schemas), and prompts (predefined templates guiding AI behavior).
Problem Statement:
When you ask, Continue with the current exchange rate for USD, this is what you will get.
To address this challenge, let's build a custom exchange rate MCP server that will help Continue to access live data from the exchange rate API and provide us with real-time rates for 168 world currencies in our VSCode. By the end, we should be able to get real-time data on current exchange rates for USD for different currencies. The steps in this article can be used to create any MCP server of your choice.
System Requirements and Tools
- Basic knowledge of TypeScript/JavaScript
- Node.js is installed on your machine (version 16+).
- VS Code installed
- An exchange rate API access
Step 1: Initial Setup and Environment Configuration
Let's start by setting up our development environment.
a. Create a project directory.
Open your terminal to create a new directory and initialise with NPM using the following commands:
mkdir exchaterate-mcp-server
cd exchangerate-mcp-server
npm init -y
b. Create an entry point file
Inside the new directory you created, make a src/ directory that will hold our code. Inside this folder, create a file that will serve as our entry point.
mkdir src
touch src/main.ts
c. Configure the package.json file
The MCP SDK requires JavaScript modules, so open the package.json file and add ‘"type": "module" ' to enable ES module syntax.
{
"name": "exchangerate-mcp-server",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
}
d. Install dependencies
The MCP server requires two key libraries to be installed.
- The MCP SDK, which will provide everything we need for server functionality
- And Zod for schema validation.
npm install @modelcontextprotocol/sdk
npm install zod
This is what your config.js file should look like once both libraries are installed.
Step 2: Creating Your MCP Server in TypeScript
For the next step, we need to create the MCP server.
Open your main.ts file in VSCode and update it with the following steps to define your server.
a. Import all required modules
You will need to specify the necessary classes from the installed packages.
This sets up a new MCP server and imports McpServer and StdioServerTransport from the MCP SDK.
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from "zod";
b. Create server instance
The server handles all communication over the MCP protocol between clients (such as VS Code) and your tools. So you need to create an instance of MCPServer, specifying its name and version.
c. Define the tool
Next, we need to define the functions (or tools) that the AI agent will call.
- Create a tool called “currency-live-rates”. For now, we'll use static data to ensure the basic setup is working as expected.
server.tool(
'currency-live-rates',
'Tool to get the live exchange rate of a base currency (static example)',
{
base: z.string().describe("The base currency code (e.g., USD, EUR, GBP)."),
symbols: z.string().optional().describe("Optional comma-separated list of target currencies (e.g., GBP,JPY).")
},
async ({ base, symbols }) => {
// Static mock data for demonstration
return {
content: [
{
type: "json",
text: JSON.stringify(
{
success: true,
terms: "https://exchangerate.host/terms",
privacy: "https://exchangerate.host/privacy",
timestamp: 1727457600,
source: base,
quotes: {
[`${base}USD`]: 1.0,
[`${base}EUR`]: 0.92,
[`${base}GBP`]: 0.81,
[`${base}JPY`]: 148.56
}
},
null,
2
)
}
]
};
}
);
What we have basically done here is:
- We are registering the tool with the server using server.tool. We gave it a unique ID (
currency-live-rates), a description, a parameter schema, and a callback function. - Using Zod, the parameter properties define and validate the expected input. The tool expects an object with a required string property
base(the base currency code) and an optional string propertysymbols(a comma-separated list of target currencies). - When the tool is called, the server validates the input against the schema. If the input is valid, it calls the callback function.
- The callback receives the validated parameters and then creates a static response with currency exchange rates for the specified base currency. The response includes example rates for USD, EUR, GBP, and JPY.
d. Set up transport and connection
The next step is to define how the server communicates with AI clients.
- In this case, use the StdioServerTransport for communication (reading from standard input and writing to standard output) in your local development.
- Then connect to the server.
const transport = new STDioServerTransport();
server.connect(transport);
Your main.ts file should look like this once that is completed.
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from "zod";
const server = new McpServer({
name: "Currency Live Rates Server",
version: "1.0.0",
});
server.tool(
'currency-live-rates',
'Tool to get the live exchange rate of a base currency (static example)',
{
base: z.string().describe("The base currency code (e.g., USD, EUR, GBP)."),
symbols: z.string().optional().describe("Optional comma-separated list of target currencies (e.g., GBP,JPY).")
},
async ({ base, symbols }) => {
// Static mock data for demonstration
return {
content: [
{
type: "json",
text: JSON.stringify(
{
success: true,
terms: "https://exchangerate.host/terms",
privacy: "https://exchangerate.host/privacy",
timestamp: 1727457600,
source: base,
quotes: {
[`${base}USD`]: 1.0,
[`${base}EUR`]: 0.92,
[`${base}GBP`]: 0.81,
[`${base}JPY`]: 148.56
}
},
null,
2
)
}
]
};
}
);
const transport = new StdioServerTransport();
server.connect(transport);
Step 4: Testing with MCP Inspector
For the next step, we need to confirm that what we have so far works as expected before we can input real exchange rate data.
To do this, we will utilize the MCP Inspector, a web-based tool used for testing and debugging MCP servers.
a. Run the server with inspector
Run the following command in your terminal to open the MCP inspector:
npx -y @modelcontextprotocol/inspector npx -y tsx main.ts
b. Connect and test with the inspector
The output should look like the screenshot below.
- With a localhost URL for the proxy server. Click on the URL that includes the session token (avoids manual entry) to open the Inspector in your browser.
- Click “Connect” in the Inspector UI.
- Navigate to ‘Tools’ and click ‘List Tools’. You should see
currency-live-rates. - Click on ‘
currency-live-rates’ to open the tool caller.
Now, test it out by entering a base currency (e.g., USD) and optionally a list of target currencies (e.g., EUR, GBP, JPY) in the input fields, then click ‘Run Tool’.
You will get an output that shows the live exchange rates in JSON format, like this:
Once you have confirmed that it works as expected, the next step is to use actual data for our server.
Step 5: Fetching Real Weather Data
Now that we have confirmed our code sample works as expected, it's time to input actual data from exchangeratehost, a foreign exchange & crypto rates data solution.
a. How the Exchangeratehost API works
The Exchangeratehost API provides live updates on the exchange rate between different currencies.
- You can specify the base currency (for example, USD) you want to obtain other rates against.
- You can also tell it which other currencies you want to compare it with (for example, EUR, GBP, JPY).
- The API then sends back a response that includes the latest rates.
We will be using the real-time exchange rates API endpoint for our MCP server. Once you have created an account, you will be assigned a personal API access key, which you can attach to our preferred API endpoint URL.
Check the Exchangeratehost API documentation for details.
b. Update main.ts file
Replace the tool example function with the following:
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const server = new McpServer({
name: "Currency Live Rates Server",
version: "1.0.0",
});
server.tool(
"currency-live-rates",
"Get real-time exchange rates for a given base currency",
{
base: z
.string()
.describe("The base currency code (e.g., USD, EUR, GBP). Defaults to EUR if not provided."),
symbols: z
.string()
.optional()
.describe("Comma-separated list of target currencies (e.g., USD,GBP,JPY). Optional."),
},
async ({ base, symbols }) => {
try {
// Build the URL dynamically
let url = `https://api.exchangerate.host/live?access_key=APIKEY`;
if (symbols) {
url += `¤cies=${symbols}`;
}
// Fetch live exchange rates
const response = await fetch(url);
const data = await response.json();
if (!data.success) {
return {
content: [
{
type: "text",
text: `Error: Could not fetch live rates for ${base}. Please check your input.`,
},
],
};
}
// Format output: show base + filtered rates
const rates = Object.entries(data.quotes)
.map(([pair, rate]) => `${pair}: ${rate}`)
.join("\n");
return {
content: [
{
type: "text",
text: `Real-time rates (Base: ${base})\n\n${rates}`,
},
],
};
} catch (error: any) {
return {
content: [
{
type: "text",
text: `Error fetching live exchange rates: ${error.message}`,
},
],
};
}
}
);
const transport = new StdioServerTransport();
server.connect(transport);
c. Test real data on the MCP inspector
- Restart your server by stopping the running process in the terminal
- In the MCP inspector, click on connect again (similar steps to before)
- Run the currency-live-rates tool by entering a base currency (e.g., "USD") and optionally some target currencies (e.g., "EUR, GBP, JPY"). Your tool result should look like this:
Step 6: Setting Up MCP in Continue
Once your MCP server is running, you can connect it to a tool-enabled AI agent, allowing it to utilize your currency exchange rate capability. We are using the Continue VSCode assistant for this example.
a. *Installing and Configuring Continue in VS Code *
If you have not already, install the Continue. Continue is available in VS Code and JetBrains, so whichever IDE you use, you should be able to find it as an extension.
- The Continue extension defaults to the left sidebar upon -installation. drand and drop the icon panel to the right sidebar.
- Next, need to sign up or sign in to the Continue Hub, where you can discover, configure, and manage the models, rules, and MCP tools you need for your AI coding agent.
- Once signed in, navigate this IDE dropdown and select the exact IDE you are working with.
- You will be met with the option to create an organization or to use the community organisation available. I will be using the Continue Community for this example as it comes with predefine agents you need to install.
- You should be redirected back to VSCode. Continue panel should have a dropdown that lists the agents you installed.
b. Create an MCP server
Now that we have set up Continue, lets create a new MCP that will help the AI agent access the real time data we need from the exchange rate API.
- Navigate to the setting on the continue panel, down to the tools icon. You will see a plus button where you can add new servers.
- This should take you back to the Continue hub where their are a variety of available MCP server you choose from. However, since we already created our own MCP server locally. We just need to add a configuration file that will tell Continue to access the content of our local server.
c. Create a new folder in the working directory called Continue
- Create a new file within this folder called currency-mcp.yaml.
- Input the following configurations into the yaml file created.
Name: MCP name
version: 0.0.1
schema: v1
mcpServers:
- name: MCP Name
command: npx
args:
- -y
- "/Users/path/currency-mcp-server/main.ts" // change to the path your mcp code typescript code
- This configuration tells the system to start an MCP server by running the TypeScript file at the given path using npx, with the -y flag to skip prompts.
d. Run the server
For the following command in your terminal to run the server.
npx -y main.ts
- To confirm that everything is working as expected, check the under tools in Continue again, your MCP should be added to the list like this.
The Result?
Now that we have completed our MCP server, let's take a look at the final result.
- Go to your Continue panel and make sure you're in "Agent Mode." This will tell the AI that it's okay to start reasoning and using external tools, not just its internal knowledge.
- When you give continuous AI the prompt “What are the current exchange rates for USD” to test the MCP server, it will examine your question and realize it does not have live data on the currency exchange rate. However, it now has a tool called currency-live-rates that can retrieve it.
- Since our tool interacts with real-time data, Continue will request permission to use your currency-live-rates tool to retrieve the data.
- Instead of JSON format, Continue will now return a refined context that summarizes the list of current exchange rates for USD.
What's Next?
Building a custom MCP server is a great way to unlock the full potential of AI-assisted development in your own environment. If you are new to MCPs and want to explore, your best bet is to start experimenting with internal MCP servers tailored to your needs.
Continuous AI is open source, so you can learn more about this tool, access templates, and contribute to the ecosystem through the Continue GitHub repository. You can also connect with other builders and share ideas in the Continue Discord community
Top comments (0)