MCP Servers

next-design-overlay

MCP server for Next.js design overlay, enabling AI agents to query visual UI tasks, fetch annotated snapshots, and mark tasks as resolved.

README

Next.js Design Overlay for AI Coding Agents 🎨

An interactive Next.js Design Overlay & MCP server that lets you visually annotate UI tasks and instantly sync them with AI coding agents like Cursor, Claude or Gemini.

<div align="center"> <video src="demo.mp4" autoplay loop muted playsinline width="800"></video> </div>

A standalone mini-application and MCP (Model Context Protocol) server designed to bridge the gap between human designers/developers and AI coding agents. It provides an interactive UI inside your Next.js application to visually annotate, layout, and document design tasks, which are instantly synchronized with your AI agent.

Features

Visual Annotations: Draw bounding boxes, arrows, and drop pin markers directly over your local UI.
Grid Systems: Overlay customizable horizontal/vertical 8pt grid systems to verify alignment.
Component Inspector: Hover over any UI element to automatically capture its React component name, source file location (e.g. src/components/Button.tsx:L42), computed CSS styles, and Tailwind classes.
Task Management: Create structured tasks linked to visual areas. Tasks are stored in a .design-spec/annotations.json file and compiled to a UI_SPEC.md for agents to read.
MCP Server: Exposes tools for AI agents to query active design tasks, fetch visual snapshots, and mark tasks as resolved.

🚀 Quickstart

Run the following command in the root of your Next.js App Router project:

npx next-design-overlay init

Takes less than a minute! The installer will ask you a few questions and automatically copy the necessary components, API routes, and MCP scripts into your project. It will also install html-to-image as a dependency.

Prerequisites

Next.js 13+ (App Router)
Tailwind CSS (The UI is styled using standard Tailwind utility classes)
React 18+

Setup & Usage

1. Mount the Component

After installation, import and mount the <DesignOverlay /> component in your global layout file (e.g., src/app/layout.tsx):

import { DesignOverlay } from '@/components/design-overlay/DesignOverlay';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <DesignOverlay />
      </body>
    </html>
  );
}

Note: The component will automatically hide itself in production environments (process.env.NODE_ENV !== 'development').

2. Connect the MCP Server

To allow your AI Coding Agent to read the visual tasks you create, add the MCP server to your agent's configuration.

For example, in Cursor, go to Cursor Settings > MCP and add a new stdio server:

Name: Design Overlay
Command: node scripts/design-overlay-mcp.js

3. Using the UI

Start your Next.js dev server (npm run dev). You will see a small palette icon (🎨) in the bottom-left corner of your screen.

Click the icon to activate Design Mode.
Inspect: Hover over elements to see their source code location and CSS.
Draw: Use the Bounding Box (🔲), Arrow (↘️), or Pin (📍) tools to highlight issues on the screen.
Create Task: Click the element or finish your drawing to open the Annotation Modal. Write instructions for your AI agent (e.g., "Fix alignment of this button").
Agent Handoff: The AI agent will automatically detect the new task via the MCP server or the generated UI_SPEC.md file, locate the exact file/line number, see a screenshot of your annotation, and write the code to fix it!

Architecture

When you save a task:

The API Route (app/api/design-overlay/route.ts) receives the payload.
Screenshots (clean, marked-up, composite) are generated and saved to .design-spec/snapshots/.
The task metadata is written to .design-spec/annotations.json.
A human/agent-readable markdown file UI_SPEC.md is compiled at your project root.
The MCP Server serves these files directly to the LLM context when requested.

License

MIT

Recommended Servers

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official

Featured

TypeScript

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official

Featured

Local

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official

Featured

TypeScript

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official

Featured

Python

E2B

Using MCP to run code via e2b.

Official

Featured

Neon Database

MCP server for interacting with Neon Management API and databases

Official

Featured

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official

Featured

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official

Featured