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
