article

README

NextChat with MCP Server Builder

This is a customized version of NextChat that adds the ability to create and deploy MCP (Model Context Protocol) servers through chat interactions, using OpenRouter for LLM models.

Features

Chat-based MCP Server Creation: Create MCP servers by simply chatting with the AI
Tool Extraction: Automatically extract tools from your description
One-click Deployment: Deploy your MCP server with a single click
Integration Guides: Get integration instructions for various AI systems
OpenRouter Integration: Use a wide range of LLM models through OpenRouter

Getting Started

Prerequisites

Node.js 18.0.0 or later
npm or yarn
An OpenRouter API key

Installation

Clone the repository:

git clone https://github.com/vredrick2/NextChat.git
cd NextChat

Install dependencies:

npm install
# or
yarn

Create a .env.local file with the following content:

# Enable MCP functionality
ENABLE_MCP=true

# OpenRouter API key
OPENAI_API_KEY=your_openrouter_api_key

# Set OpenRouter as the base URL
BASE_URL=https://openrouter.ai/api/v1

# Default model (can be changed to any OpenRouter model)
DEFAULT_MODEL=openrouter/anthropic/claude-3-opus

# Hide user API key input since we'll be using OpenRouter
HIDE_USER_API_KEY=1

# Enable custom models
CUSTOM_MODELS=+openrouter/anthropic/claude-3-opus,+openrouter/anthropic/claude-3-sonnet,+openrouter/google/gemini-pro

Start the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

Creating an MCP Server

Start a new chat
Type "Create an MCP server" or similar phrase
Follow the prompts to name your server and describe its functionality
The system will extract tools from your description and deploy the server
You'll receive integration instructions for using your MCP server with various AI systems

Implementation Details

MCP Server Creation Interface

The MCP server creation interface is implemented as a React component that guides users through the process of creating and deploying an MCP server. The interface includes:

Name input
Description input
Tool extraction
Deployment
Integration guide generation

Tool Extraction

Tools are extracted from user descriptions using pattern matching. The system looks for keywords that indicate specific tool types, such as:

Calculator tools
Conversion tools
Weather tools
Search tools
Translation tools

Deployment

The current implementation simulates deployment with mock URLs. In a production environment, this would be connected to a real deployment service.

Integration

The system generates integration guides for various AI systems:

Cursor
Claude Desktop
Windsurf
Direct API access

Project Structure

/app/utils/mcp/types.ts: TypeScript interfaces for MCP servers and tools
/app/utils/mcp/storage.ts: Storage utilities for managing MCP servers
/app/utils/mcp/extraction.ts: Tool extraction functionality
/app/utils/mcp/deployment.ts: Deployment utilities
/app/utils/mcp/chat-integration.ts: Chat integration utilities
/app/api/mcp/create/route.ts: API endpoint for creating MCP servers
/app/components/mcp/server-creation.tsx: MCP server creation component
/app/components/mcp/server-list.tsx: MCP server list component

Future Enhancements

Enhanced tool extraction using OpenRouter AI models
Real deployment to serverless functions
Tool testing interface
Analytics for deployed servers
Version control for MCP servers

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

Based on NextChat
Inspired by mcpify.ai
Uses OpenRouter for LLM models
Implements the Model Context Protocol

NextChat-MCP