What is Nextjs Mcp Use

nextjs-mcp-use is a headless MCP server and client API designed to facilitate MCP-enabled LLM requests using the Vercel AI SDK. It is implemented in Next.js and serves as a practical example of ‘mcp-use’.

Use cases

Use cases for nextjs-mcp-use include building streaming chat applications, creating non-streaming chat completion services, and testing API endpoints with custom scripts for various messaging scenarios.

How to use

To use nextjs-mcp-use, integrate the Vercel MCP Adapter into your Next.js project. Configure the MCP registry in a JSON file and update the route files with your tools, prompts, and resources as per the MCP TypeScript SDK documentation.

Key features

Key features include a configurable MCP registry for managing multiple MCP servers, GitHub Actions for testing and monitoring API endpoints, robust error handling for timeouts and connection failures, and support for environment variables for each MCP server.

Where to use

nextjs-mcp-use can be utilized in various fields such as AI development, chatbot applications, and any scenario where integration with multiple MCP servers is required for enhanced LLM interactions.

Headless MCP-use (from Registry) with Next.js

Uses @vercel/mcp-adapter with a configurable MCP registry

Deployed URL

This application is deployed at: https://nextjs-mcp-use.vercel.app

Features

• MCP Registry: Configure multiple MCP servers in a single JSON file
• GitHub Actions: Test and monitor your API endpoints with scheduled and manual workflows
• Error Handling: Graceful handling of timeouts and connection failures
• Environment Variables: Configure environment variables for each MCP server

MCP Registry

The MCP registry is a JSON configuration file that stores information about all available MCP servers. Each server can be enabled or disabled, and can have its own environment variables.

The registry is located at config/mcp-registry.json and has the following structure:

{
  "server-name": {
    "url": "http://localhost:3002/sse",
    "enabled": true,
    "env": {
      "API_KEY": "your-api-key"
    }
  },
  "another-server": {
    "url": "https://example.com/sse",
    "enabled": false
  }
}

Usage

This sample app uses the Vercel MCP Adapter that allows you to drop in an MCP server on a group of routes in any Next.js project.

Update app/[transport]/route.ts with your tools, prompts, and resources following the MCP TypeScript SDK documentation.

API Endpoints

• Chat API: /api/chat - Streaming chat endpoint
• Completions API: /api/completions - Non-streaming chat completions endpoint

Testing the API

You can test the API endpoints using the provided test script:

# Test the chat endpoint
npm run test:chat -- --message "Your message here"

# Test the completions endpoint
npm run test:completions -- --message "Your message here"

# Test with a custom URL
npm run test:chat -- --url http://localhost:3000/api/chat --message "Your message here"

GitHub Actions

This project includes GitHub Actions workflows for testing and monitoring the API endpoints. See the .github/workflows/README.md file for more information.

Notes for running on Vercel

• To use the SSE transport, requires a Redis attached to the project under process.env.REDIS_URL
• Make sure you have Fluid compute enabled for efficient execution
• After enabling Fluid compute, open app/route.ts and adjust maxDuration to 800 if you using a Vercel Pro or Enterprise account
• Deploy the Next.js MCP template

Sample Client

• scripts/test-client.mjs contains a sample client to try invocations.

node scripts/test-client.mjs https://nextjs-mcp-use.vercel.app