Mastering Kilo Code: A Guide to MCP Server Integration

In this article, I will show you how to configure and use MCP servers in Kilo Code. MCPs are additional tools and resources that you can add to Kilo Code, enabling it to complete tasks that would otherwise be impossible. For instance, an MCP allows Kilo Code to connect to databases, search the internet, or even control a web browser.

If you're not familiar with MCPs, it's recommended to get a basic understanding of what they are before proceeding.

Accessing the MCP Marketplace

To install MCP tools in Kilo Code, navigate to the Settings menu and select the MCP Server option. This action opens the MCP Marketplace, where you can discover and install a variety of popular MCPs.

Manual MCP Installation

If a specific MCP isn't listed in the marketplace, you can add it manually. Go to the Install tab and choose either Edit Global MCP or Project MCP. This will open a JSON configuration file. Simply paste the MCP server's JSON configuration into this file.

• Global MCP: Makes the tool available across all your projects.
• Project MCP: Restricts the tool's use to the current project.

You can also access the configuration file directly via the server icon located at the top of the Kilo Code window.

Prerequisites: Node.js

Before we dive in, it's important to note that most MCPs are compiled as Node.js packages. Therefore, you must have Node.js installed on your system to activate and run MCP servers. If you don't have it, you can download and install it from the official Node.js website (nodejs.org).

Example 1: Installing the Exa Search MCP

The first MCP we'll install is the Exa Search MCP. This tool is powered by Exa.ai, a search engine designed specifically for AI applications. It functions similarly to traditional search engines, allowing you to query the internet for information. For example, a search for 'what is kilo code' would retrieve relevant data from across the web.

By integrating the Exa search engine into Kilo Code, you empower it to access up-to-the-minute information from the web. To do this, you'll need an API key.

Steps to get an Exa API Key: 1. Navigate to the Exa.ai homepage. 2. Click the Try API for free button. 3. Sign up using a Google account or email address. 4. Once logged in, locate your API key and copy it.

With your API key copied, return to Kilo Code.

1. Open the Settings menu and go to the MCP Marketplace.
2. Search for Exa Search.
3. Click the Install button.
4. In the setup window, choose to install for the Project or Globally.
5. Leave the installation method as npx.
6. Paste your copied Exa API key into the designated field.
7. Click Install.

The Exa Search MCP is now installed and ready for use. To test it, you can switch Kilo Code's mode to Ask and make a request that requires web access, such as 'search the web for an overview of prompt engineering.'

Kilo Code will then request permission to use the Exa Search tool, showing the parameters it intends to send. After you approve the request, Kilo Code will use Exa to retrieve the information and then summarize it to answer your question, often including source links for further reading. This process demonstrates the core functionality of MCPs: providing Kilo Code with additional tools to complete specific tasks.

Example 2: Installing the Puppeteer MCP for Browser Automation

Next, we'll install the Puppeteer MCP, a powerful tool for browser automation. Integrating Puppeteer with Kilo Code allows you to issue commands to control a web browser, enabling actions like taking screenshots, filling out forms, and navigating to websites.

The installation process is straightforward:

1. Open the MCP Marketplace in Kilo Code.
2. Search for Puppeteer MCP.
3. Click the Install button.

Note: Unlike the Exa MCP, Puppeteer does not require an API key. Simply click Install, and the MCP will be online and ready.

To test the integration, you can ask Kilo Code to perform a browser-based task. For example, you could use the following prompt:

open the hacker news website and then save the top 10 news as a markdown file. use puppeteer

Kilo Code will then request a series of permissions to complete the task:

1. Permission to open a browser and navigate to the Hacker News website.
2. Permission to take a screenshot of the page.
3. Permission to run JavaScript code to scrape data like titles, links, and points.

After you approve these actions, the AI will process the scraped data and generate a markdown file containing the top 10 news stories from Hacker News.

Example 3: Manually Installing the Magic UI MCP

Finally, let's explore how to install an MCP server manually. We'll use the Magic UI MCP, which is not listed in the Kilo Code marketplace. Magic UI is a collection of modern UI components for web projects. One such component is the Marquee, which features horizontally scrolling items that pause on mouse hover. We will integrate this component into a project using its MCP server.

Since this MCP is not in the marketplace, manual installation is required. This involves adding its JSON configuration directly into Kilo Code's MCP JSON file. The configuration for Magic UI is as follows:

{
  "name": "Magic UI",
  "description": "Magic UI MCP Server",
  "url": "npx -p @magic-ui/mcp magic-ui-mcp",
  "author": "Magic UI",
  "tools": ["magic-ui"]
}

This MCP does not require an API key. Copy this configuration and paste it into your MCP JSON file (for example, below the Puppeteer MCP entry). After saving the file, the Magic UI MCP will be loaded and ready.

To use it, you can ask Kilo Code to generate a component from the library. For instance: 'create a marquee component that will show the top 10 hacker news stories.'

Kilo Code will request permission to use a tool from the Magic UI MCP. Once you approve, it will generate an HTML file that includes the Marquee component, populated with the top 10 stories from Hacker News. The resulting component will be fully functional, with the marquee scrolling horizontally and pausing when you hover over an element, just like the official Magic UI demo. This demonstrates how you can use the Magic UI MCP to quickly add sophisticated UI components to your projects.

Summary: Key Takeaways

Here's a recap of how to use MCP servers in Kilo Code:

• Installation: You can install MCPs from the built-in MCP Marketplace or add them manually by editing the MCP.json file.
• Usage: Kilo Code will automatically use an installed MCP when it determines a tool is needed for a task, or you can explicitly request to use a specific tool in your prompt.
• Configuration: You can add numerous MCPs to your setup. While many are plug-and-play, some, like the Exa Search MCP, require additional configuration such as an API key. Always refer to the specific MCP's documentation for setup instructions.

By setting up MCP servers, you can significantly expand Kilo Code's capabilities, providing it with a wider range of tools and resources to help you accomplish your development tasks more efficiently.