Power Up Your AI App with Next.js 15 MCP Chat Client and Composio
......
Loading...
Similar articles
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Want to create a cutting-edge AI chatbot in Next.js 15? Build an MCP-powered chat client that connects to remote and local servers, rivaling tools like Claude or Windsurf. This 2025 tutorial guides you step-by-step to craft a chatbot that sends emails, creates GitHub issues, or schedules meetings—all with natural language prompts.
You'll get clear code snippets, setup tips, and a checklist to launch your chatbot fast. Ideal for developers aiming to automate workflows or enhance user experiences, this guide has you covered. Let's dive in!
For Beginners: MCP (Model Context Protocol) links AI models to tools like Gmail or Slack for real-time actions. A tool call is when the AI triggers an action, like posting a Slack message.
Standard AI chatbots are limited by static data, making them less useful for real-world tasks. MCP (Model Context Protocol) transforms your chatbot by connecting it to external tools for real-time data and actions. A developer on X shared, "MCP turned my Next.js chatbot into a true assistant—automation is a game-changer!"
This tutorial covers:
MCP bridges AI models with tools, addressing two key limitations:
Real-World Uses:
MCP Components:
Let's set up the Next.js project and required dependencies.
Prerequisite: Install Node.js 18+ and npm before starting.
Create a new Next.js app:
npx create-next-app@latest chat-nextjs-mcp-client --typescript --tailwind --eslint --app --src-dir --use-npm
cd chat-nextjs-mcp-clientAdd necessary packages:
npm install composio-core openai dotenv @modelcontextprotocol/sdkFor Composio-hosted MCP servers (recommended for testing):
COMPOSIO_API_KEY=<your_composio_api_key>
OPENAI_API_KEY=<your_openai_api_key>npm i -g composio-core
composio login
composio whoamicomposio add linear
composio add gmailVerify:
composio integrationsTip: Use Composio's sandbox to test integrations safely.
Build the chat UI in components/chat.tsx:
'use client';
import { useState } from 'react';
import { ArrowUpIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { AutoResizeTextarea } from '@/components/autoresize-textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
type Message = {
role: 'user' | 'assistant';
content: string | object;
toolResponses?: any[];
};
export function Chat() {
const [messages, setMessages] = useState<Message[]>([]);
const [input, setInput] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const userMessage: Message = { role: 'user', content: input };
setMessages((prev) => [...prev, userMessage]);
setInput('');
setLoading(true);
// Temporary loading message
setMessages((prev) => [...prev, { role: 'assistant', content: 'Processing...' }]);
try {
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ messages: [...messages, userMessage] }),
});
const data = await res.json();
const content = typeof data?.content === 'string' ? data.content : 'No server response';
const toolResponses = Array.isArray(data?.toolResponses) ? data.toolResponses : [];
setMessages((prev) => [
...prev.slice(0, -1),
{ role: 'assistant', content, toolResponses },
]);
} catch (err) {
setMessages((prev) => [
...prev.slice(0, -1),
{ role: 'assistant', content: 'Error: Something went wrong.' },
]);
} finally {
setLoading(false);
}
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSubmit(e as unknown as React.FormEvent<HTMLFormElement>);
}
};
return (
<main className="mx-auto flex h-screen w-full max-w-[35rem] flex-col">
<div className="flex-1 overflow-y-auto px-6 py-6">
{messages.length === 0 ? (
<header className="m-auto max-w-96 text-center">
<h1 className="text-2xl font-semibold">MCP-Powered AI Chatbot</h1>
<p className="text-sm text-gray-500">Built with Next.js and MCP</p>
</header>
) : (
<div className="my-4 flex flex-col gap-4">
{messages.map((message, index) => (
<div key={index} className="flex flex-col gap-2">
{message.role === 'assistant' && message.toolResponses?.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Tool Responses</CardTitle>
</CardHeader>
<CardContent>
<Accordion type="multiple">
{message.toolResponses.map((toolRes, i) => (
<AccordionItem key={i} value={`item-${i}`}>
<AccordionTrigger>Tool Call #{i + 1}</AccordionTrigger>
<AccordionContent>
<pre className="text-sm">{JSON.stringify(toolRes, null, 2)}</pre>
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</CardContent>
</Card>
)}
<div
className={`max-w-[80%] rounded-xl px-3 py-2 text-sm ${message.role === 'user' ? 'self-end bg-blue-500 text-white' : 'self-start bg-gray-100'}`}
>
{typeof message.content === 'string' ? message.content : JSON.stringify(message.content, null, 2)}
</div>
</div>
))}
</div>
)}
</div>
<form
onSubmit={handleSubmit}
className="mx-6 mb-6 flex items-center rounded-[16px] border px-3 py-1.5"
>
<AutoResizeTextarea
onKeyDown={handleKeyDown}
onChange={(e) => setInput(e.target.value)}
value={input}
placeholder="Enter a message"
className="flex-1 bg-transparent outline-none"
/>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className="absolute right-1"
disabled={!input.trim() || loading}
>
<ArrowUpIcon size={16} />
</Button>
</TooltipTrigger>
<TooltipContent>Send Message</TooltipContent>
</Tooltip>
</form>
</main>
);
}In components/autoresize-textarea.tsx:
'use client';
import { cn } from '@/lib/utils';
import { useRef, useEffect } from 'react';
interface AutoResizeTextareaProps {
value: string;
onChange: (value: string) => void;
className?: string;
placeholder?: string;
}
export function AutoResizeTextarea({ value, onChange, className, placeholder }: AutoResizeTextareaProps) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const resizeTextarea = () => {
const textarea = textareaRef.current;
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
}
};
useEffect(() => {
resizeTextarea();
}, [value]);
return (
<textarea
value={value}
ref={textareaRef}
rows={1}
onChange={(e) => {
onChange(e.target.value);
resizeTextarea();
}}
placeholder={placeholder}
className={cn('resize-none min-h-4 max-h-80', className)}
/>
);
}Set up the API route in app/api/chat/route.ts:
import { NextRequest, NextResponse } from 'next/server';
import { OpenAI } from 'openai';
import { OpenAIToolSet } from 'composio-core';
const toolset = new OpenAIToolSet();
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
export async function POST(req: NextRequest) {
const { messages } = await req.json();
const userQuery = messages[messages.length - 1]?.content;
if (!userQuery) {
return NextResponse.json({ error: 'No user query found' }, { status: 400 });
}
try {
const tools = await toolset.getTools({ apps: ['gmail', 'linear'] });
const fullMessages = [
{ role: 'system', content: 'You are a helpful assistant with tool access.' },
...messages,
];
const response = await client.chat.completions.create({
model: 'gpt-4o-mini',
messages: fullMessages,
tools,
});
const aiMessage = response.choices[0].message;
const toolCalls = aiMessage.tool_calls || [];
if (toolCalls.length > 0) {
const toolResponses = [];
for (const toolCall of toolCalls) {
const res = await toolset.executeToolCall(toolCall);
toolResponses.push(res);
}
return NextResponse.json({
role: 'assistant',
content: 'Tool calls executed successfully 🎉',
toolResponses,
});
}
return NextResponse.json({
role: 'assistant',
content: aiMessage.content || 'No server response',
});
} catch (err) {
return NextResponse.json({ error: 'Something went wrong' }, { status: 500 });
}
}For custom tools, set up a local MCP server:
git clone --depth 1 --branch custom-fs-mcp-server https://github.com/shricodev/chat-nextjs-mcp-client.git chat-mcp-servercd chat-mcp-server && npm run build
realpath chat-mcp-server/custom-fs-mcp-server/build/index.jsnpm run devimport { OpenAI } from 'openai';
import { Client } from '@modelcontextprotocol/sdk/client';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio';
import dotenv from 'dotenv';
dotenv.config();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const mcp = new Client({ name: 'nextjs-mcp-client', version: '1.0.0' });
let tools: any[] = [];
let connected = false;
export async function initMCP(serverScriptPath: string) {
if (connected) return;
const command = serverScriptPath.endsWith('.py') ? 'python3' : process.execPath;
const transport = new StdioClientTransport({ command, args: [serverScriptPath, '/home/user'] });
mcp.connect(transport);
const toolsResult = await mcp.listTools();
tools = toolsResult.tools.map((tool) => ({
type: 'function',
function: { name: tool.name, description: tool.description, parameters: tool.inputSchema },
}));
connected = true;
}
export async function executeToolCall(toolCall: any) {
const toolName = toolCall.function.name;
const toolArgs = JSON.parse(toolCall.function.arguments || '{}');
const result = await mcp.callTool({ name: toolName, arguments: toolArgs });
return { id: toolCall.id, name: toolName, arguments: toolArgs, result: result.content };
}
export async function processQuery(messages: any[]) {
const fullMessages = [{ role: 'system', content: 'You are a helpful assistant.' }, ...messages];
const response = await openai.chat.completions.create({ model: 'gpt-4o-mini', messages, tools });
const replyMessage = response.choices[0].message;
const toolCalls = replyMessage.tool_calls || [];
if (toolCalls.length > 0) {
const toolResponses = [];
for (const toolCall of toolCalls) {
const toolResponse = await executeToolCall(toolCall);
toolResponses.push(toolResponse);
fullMessages.push({ role: 'assistant', content: null, tool_calls: [toolCall] });
fullMessages.push({ role: 'tool', content: toolResponse.result as string, tool_call_id: toolCall.id });
}
const followUp = await openai.chat.completions.create({ model: 'gpt-4o-mini', messages: fullMessages });
return { reply: followUp.choices[0].message.content || '', toolCalls, toolResponses };
}
return { reply: replyMessage.content || '', toolCalls: [], toolResponses: [] };
}import { NextRequest, NextResponse } from 'next/server';
import { initMCP, processQuery } from '@/lib/mcp-client';
const SERVER_PATH = '<path_to_index.js>';
export async function POST(req: NextRequest) {
const { messages } = await req.json();
const userQuery = messages[messages.length - 1]?.content;
if (!userQuery) {
return NextResponse.json({ error: 'No query provided' }, { status: 400 });
}
try {
await initMCP(SERVER_PATH);
const { reply, toolResponses } = await processQuery(messages);
return NextResponse.json({ role: 'assistant', content: reply, toolResponses });
} catch (err) {
return NextResponse.json({ error: 'Something went wrong' }, { status: 500 });
}
}You can test your chatbot by running:
npm run devAnd then opening http://localhost:3000 in your browser. Test with prompts like "Send a Gmail" or "Create a Linear issue." The chatbot should display tool call results. Case Study: A startup saved 10 hours weekly by automating Slack notifications with this MCP client.
Next.js 15's server components streamline MCP integration. Emerging trends include:
Advanced Tip: Cache tool responses server-side to minimize API calls.
What is MCP in Next.js? MCP connects AI models to tools for real-time actions.
Should I use Composio or a local MCP server? Composio is faster to set up; local servers offer custom control.
Ready to power up your Next.js 15 app? Build this MCP chat client to automate tasks and delight users. From emails to GitHub PRs, your chatbot will shine. Share your results in the comments or join our developer community (#)! Download our Next.js AI Chatbot Guide (#).