MCP Security Copilot (Next.js Demo)

This is a Next.js demo app that connects to a Model Context Protocol (MCP) server and lets you ask questions about container assets and vulnerabilities. It supports both REST and GraphQL MCP backends and uses shadcn/ui for the UI.

Getting Started

Install dependencies:

npm install

Start the Next.js dev server:

npm run dev

Then open http://localhost:3000 in your browser.

MCP Client & SDK

Install the MCP client SDKs used by the app:

npm install @ai-sdk/mcp @modelcontextprotocol/sdk

The Next.js API routes use these packages to talk to the MCP server over HTTP.

shadcn/ui and Theming Setup

Initialize shadcn if you haven’t already:

npx shadcn@latest init

Add the UI components used in this app:

npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add button
npx shadcn@latest add scroll-area
npx shadcn@latest add separator
npx shadcn@latest add badge
npx shadcn@latest add dropdown-menu

Install theme support:

npm install next-themes

The app uses next-themes together with shadcn’s Tailwind tokens to support light/dark mode.

Setup OPENAI_API_KEY

setup the key in .env.local

OPENAI_API_KEY=your_openapi_key

Running With GraphQL MCP Backend

To route the app through your GraphQL-based MCP server, set:

export MCP_HTTP_URL=http://127.0.0.1:8000/mcp
export MCP_BACKEND=graph

Then (re)start the Next.js dev server:

npm run dev

Running With REST MCP Backend

To route the app through your REST-based MCP server, set:

export MCP_HTTP_URL=http://127.0.0.1:8001/mcp
export MCP_BACKEND=rest

Then (re)start the Next.js dev server:

npm run dev

The app will read MCP_HTTP_URL to know where the MCP server is listening and MCP_BACKEND to decide how to prompt the LLM (REST-style vs GraphQL-style routing).