Compared · Frontend & UI
Best MCP servers for Frontend & UI
6 entries in the AgentTask Atlas catalog fit frontend & ui. They are not ranked by a score: the table lists active entries first, then by how many clients document a setup, and each row ends with our one-line verdict on when to pick it. Official sources last checked 2026-10-19.
- No credentials needed: Next.js DevTools MCP, Chrome DevTools MCP, frontend-design, web-artifacts-builder, webapp-testing
- Offers a hosted/remote option: Figma MCP Server
- Most documented clients: Claude Code (6), Cursor (3), VS Code (3), Claude.ai (3), Claude API (3), Gemini CLI (2).
| Name | Type | Credentials | License | Clients | Verdict |
|---|---|---|---|---|---|
| Next.js DevTools MCP Vercel | MCP server | None | MIT (stated in README; GitHub detects no LICENSE file) | 9 | Pick it to let the agent read live errors, routes and logs from a running Next.js 16+ dev server; it needs `npm run dev` running. |
| Figma MCP Server Figma | MCP server | Required | Not stated (guide repository has no LICENSE file) | 4 | Pick it to pull design context into code or (in beta) write back to the Figma canvas; you need a Figma account and a client that supports remote Streamable HTTP. |
| Chrome DevTools MCP Chrome DevTools (Google) | MCP server | None | Apache-2.0 | 3 | Pick it for performance traces, network and console debugging; it exposes browser content to the client. |
| frontend-design Anthropic | Agent Skill | None | not stated | 3 | Pick it for UI work; instructions only, so nothing runs beyond the code the agent writes. |
| web-artifacts-builder Anthropic | Agent Skill | None | not stated | 3 | Pick it for quick React/Tailwind prototypes; it runs local bundling scripts. |
| webapp-testing Anthropic | Agent Skill | None | not stated | 3 | Pick it to have the agent test a local web app with Playwright scripts; runs code on your machine. |
Install notes
- Next.js DevTools MCP
- Run `npx -y next-devtools-mcp@latest` from your client's MCP config, or `npx add-mcp next-devtools-mcp@latest` (see README). official docs ↗Credentials: None · Maintenance: Release v0.4.0 on 2026-06-24; last commit 2026-09-15
- Figma MCP Server
- Connect to https://mcp.figma.com/mcp (Streamable HTTP). Examples: `claude mcp add --transport http figma https://mcp.figma.com/mcp`, or install via `gemini extensions install` from https://github.com/figma/mcp-server-guide (see README). official docs ↗Credentials: Figma account OAuth when connecting the remote server (client-specific auth, e.g. `/mcp auth figma` in Gemini CLI). · Maintenance: Hosted remote server (MCP Registry / server.json version 2.2.157); guide repo last commit 2026-10-19; no GitHub release
- Chrome DevTools MCP
- Add `npx chrome-devtools-mcp@latest` to your client (README lists per-client steps). official docs ↗Credentials: None · Maintenance: Release chrome-devtools-mcp-v1.11.0 on 2026-10-15; last commit 2026-10-16
- frontend-design
- Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills. official docs ↗Credentials: None · Maintenance: No GitHub release; last commit 2026-09-03 (path-scoped)
- web-artifacts-builder
- Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills. official docs ↗Credentials: None · Maintenance: No GitHub release; last commit 2026-04-20 (path-scoped)
- webapp-testing
- Claude Code: `/plugin marketplace add anthropics/skills`, then install example-skills (see repo README). official docs ↗Credentials: None · Maintenance: No GitHub release; last commit 2026-04-20 (path-scoped)
Set up any of these in your client: Claude Code · Cursor · VS Code · Claude Desktop. Filter interactively on the Frontend & UI explorer, or ask the catalog from your agent with the free MCP server.
Other comparisons: Databases & SQL · Infra & deploy · Debugging & observability · Library docs & research · Docs & writing
⚠ No independent security audit: entries summarize official sources only. Review permissions and code before installing.