xmcp <> MCP-UI

This project was bootstrapped with Next.js and xmcp.

You can create your own by running:

terminal
$ npx create-next-app@latest my-app
$ cd my-app
$ npx init-xmcp@latest
$ npm run dev

🚀 Your MCP server runs at:

http://localhost:3000/mcp

Copy the appropriate config for your IDE and start building!

Browse Views

Kanban Board

Manage tasks with drag & drop

Interactive task management with drag-and-drop functionality, priority levels, and status tracking.

Open Kanban Board →

Analytics Dashboard

View statistics & insights

Comprehensive analytics with charts, completion rates, and task distribution insights.

View Dashboard →

Available MCP Tools

Data Tools

  • •
    get_tasks_status

    Get textual representation of kanban board task status

UI Resource Tools

  • •
    get_kanban_board

    Returns UI resource to render the kanban board page

  • •
    get_task_status_chart

    Returns UI resource to render the task status chart

  • •
    get_task_priority_chart

    Returns UI resource to render the task priority chart

Project Details

This demo showcases the integration between three key technologies:

xmcp

The TypeScript framework for building and shipping MCP servers

MCP-UI

Build rich, dynamic user interfaces for your MCP applications with SDKs that bring UI to AI interactions.

Model Context Protocol

An open standard for connecting AI assistants with external data sources and tools.