MCP is all the rage. But you can only use them inside the Claude Desktop app, Cursor, Windsurf, etc. However, you can build your MCP client chatbot and add any MCP servers (via SSE and Stdio) at will, entirely locally.
If this sounds interesting, stick with the blog. We’ll build a super cool MCP-powered AI chatbot with multi-tool calling support, similar to Claude and Windsurf.
Let’s jump right in!
What’s Covered?
In this easy-to-follow tutorial, you’ll learn how to build your own chat AI-powered MCP client with Next.js that can connect to both remote and locally hosted MCP servers.
What you will learn:
What is MCP?
How to build a Next.js chat MCP client application
How to connect the MCP client with Composio-hosted MCP servers
How to connect the MCP client with local MCP servers
MCP Overview
Before we start building things with MCP, let me give you a rough idea of what MCP is all about.
MCP stands for Model Context Protocol. Think of it as a bridge between AI models and external tools, which can provide them with data and the ability to take action on it.
This could be a bouncer for some of you, so let me share the issue it solves so you can better visualise it.
Generative AI models aren’t instrumental in real-world scenarios. They only provide information based on the data they were trained on.
This information isn’t real-time and is mostly outdated. Plus, they can’t take any action on the data themselves. MCP solves both of these issues—this is the whole idea of MCP.
Here are some things you can do with your AI models once you add MCP support:
✅ Send emails through Gmail/Outlook.
✅ Send messages in Slack.
✅ Create issues, PRs, commits, and more.
✅ Schedule or create meetings in Google Calendar.
The possibilities are endless. (All this is done by sending natural language prompts to the AI models.)
There are five core components to MCP:
MCP Hosts: Programs like Claude Desktop, IDEs, or AI tools that get data through MCP.
MCP Clients: Protocol clients that maintain one-on-one connections with servers
MCP Servers: Lightweight programs that provide specific features using the standardised Model Context Protocol. For more, check this blog on the MCP Server.
Local Data Sources: Your computer’s files, databases, and services that MCP servers can safely access
Remote Services: External systems you can find online (like through APIs) that MCP servers can hook up to
Now that you’ve got the basics of MCP and enough understanding of what we’ll be building, let’s start with the project.
Project Setup 🛠️
In this section, we’ll complete all the prerequisites for building the project.
Or clone the GitHub repository here: ChatMCP Client
Initialise a Next.js Application
Initialise a new Next.js application with the following command:
You can use any package manager of your choice. For this project, I will use npm.
Next, navigate into the newly created Next.js project:
Install Dependencies
We’ll need some dependencies. Run the following command to install all the dependencies:
Composio Setup
NOTE: If you plan to run the application with local MCP servers, you don’t need to set up Composio. If you want to test some cool hosted MCP servers, which I’ll do in this blog, make sure to set it up. (Recommended)
First, before moving forward, we need to get access to a Composio API key.
Go ahead, create an account on Composio, obtain an API key, and paste it in the .env file in the root of the project:
Now, you need to add toolkits (integrations) to your project. Head over to your project and under the Auth Configs tab, add all the integrations you'd like.
You can create Auth Configs for apps programmatically. For simplicity, we will set up the manual dashboard.
Now, we’re almost there. For the demo, I plan to use Gmail and Linear.
💡 NOTE: If you want to test some different integrations, feel free to do so. You can always follow along, the steps are going to be the same.
That's all the steps we require on the Composio setup for now.
Shadcn UI Setup
We’ll use shadcn/ui to collect ready-to-use UI components. Initialise it with the default settings by running:
We won’t be using a lot of UI components, just four of them. Install it with the following command:
This should create four new files in the components/ui directory calledbutton.tsx, tooltip.tsx, accordion.tsx and card.tsx.
Code Setup
In this section, we’ll cover all the coding necessary to create a simple chat interface and connect it to the Composio MCP server for testing.
Initial Setup
In app/layout.tsx, change the following lines of code: (Optional, if you don’t want to add Tooltips)
All we are doing here is wrapping the children components with the <TooltipProvider /> so we can use tooltips in our application.
Now, edit the app/page.tsx with the following lines of code:
We don’t have a <Chat /> component yet, so first, let’s create it.
Build Chat Component
The <Chat /> component is responsible for the overall Chat interface so we can talk with the LLMs and connects the chat route to the application.
Inside the components directory, create a new file called chat.tsx and add the following lines of code:
The component is pretty straightforward itself; all we are doing is keeping note of all the messages in a state variable, and each time a user submits the form, we request the api/chat endpoint and show the response back in the UI. That’s it!
If you realize, we have another component <AutoResizeTextarea /> which is not added yet, and this is just a textarea, but why not use a plain <textarea />?
Simply because a plain textarea looks terrible and unsuitable for an input textbox.
Inside the components directory, create a new file called autoresize-textarea.tsx and add the following lines of code:
This <AutoResizeTextarea /> already looks better out of the box and expands based on the size of the message, and that’s the ideal way to handle it.
The api/chat endpoint is not yet implemented, which we’ll do in a moment.
API Route Setup with Composio
This is the section where we’ll create the api/chat endpoint and connect it with the Composio-hosted MCP server(s). Check the latest docs for any possible changes.
Create the app/api/chat directory and add a route.ts file with the following lines of code:
Here, I’ve used OAuth 2.0 for authentication, but other methods are also available, such as Bearer Token and API Key. You can review the documentation for each tool to determine which one best suits your needs. The complete list of tools is available here.
On your first run, you'll see an authentication URL in the console. Follow the link and complete the authentication.
Here’s a complete workflow where I used the Gmail and Linear MCP servers from Composio: 👇
Custom MCP Server Use
Above, we set up our chat application to use Composio-hosted MCP, but guess what if you want to test it with your own locally hosted MCP server? This is possible as well.
Local MCP Server Setup
We won’t be coding this together; many local MCP servers are available everywhere. Here, we’ll be using a Filesystem MCP server that I’ve placed in the other branch where the final code is stored.
First, ensure you are out of the Next.js client application one level up. Then, run the following command:
Now, you should have a folder structure as shown below:
All you need to do here is build the application and pass the path to it to the chat route in our Next.js MCP client.
Run the following command:
This should build the application and place an index.js file in the build directory. Take note of the path of the index.js file as we’ll need it in another step.
You can get the path to the file using the realpath command:
Local Server Utility Functions
Previously, we connected to the Composio server with their package available, but for connecting to the local MCP servers, we need to initialize the connection manually.
Create a lib/mcp-client/index.ts directory and add an index.ts file with the following lines of code:
The initMCP As the name suggests, this function starts a connection to the MCP server with the specified path and fetches all the available tools.
The executeToolCall function takes a tool call object, parses the arguments, executes the tool, and returns the result with the call metadata.
The processQuery function handles all the chat interactions with OpenAI. If the AI decides to run tools, it runs them via MCP and sends follow-up messages with the tool results.
Edit Chat Route to use the Local MCP Server.
Now, we’re almost there. All that’s left is to edit the chat route app/api/chat/route.ts file with the following lines of code:
No other changes are required. You’re all good. Now, to test this in action, run the following command inside the MCP client directory:
You don’t need to run the server separately, as the client already launches it in a separate process.
Now, you’re all set and can use all the tools that are available in the MCP server. 🚀
Conclusion
Whoa! We covered a lot, from building a chat MCP client with Next.js that supports Composio-hosted MCP servers to using our own locally hosted MCP servers.