@magicuidesign/mcp

Created By
magicuidesigna year ago
Official Magic UI MCP server.
Overview

What is MCP?

MCP (Model Context Protocol) is an official server for Magic UI that facilitates the integration of various UI components and animations into applications.

How to use MCP?

To use MCP, install it via the command line using the provided npm command, and configure it in your IDE's MCP settings. Once set up, you can interact with the server to request UI components and animations.

Key features of MCP?

  • Provides a comprehensive list of Magic UI components.
  • Supports various client integrations.
  • Allows for the retrieval of implementation details for UI components, animations, and special effects.

Use cases of MCP?

  1. Quickly adding UI components to web applications.
  2. Implementing animations and special effects in user interfaces.
  3. Streamlining the development process for UI designers and developers.

FAQ from MCP?

  • What clients are supported by MCP?

MCP supports clients like cursor, windsurf, claude, and more.

  • Is there a limit on the number of tools that can be called?

Yes, some clients have limitations on the number of tools they can call, which is why tools are grouped into categories.

  • How can I get help with using MCP?

You can refer to the official documentation on the Magic UI website for detailed guidance.

Project Info
Created At
a year ago
Updated At
a year ago
Author Name
magicuidesign
Star
55
Language
JavaScript
License
MIT license
Tags

Recommend Servers

View All
Bring your real authenticated browser session to AI coding agents. Local-first MCP server + Chrome MV3 extension. No cloud. No telemetry.
@Cubenest

peek records the user's actual logged-in browser (DOM via rrweb, console events, network metadata, optional response bodies via opt-in Deep capture) through a Chrome MV3 extension. The extension ships events through a native-messaging stdio bridge to a local MCP server (peek-mcp), which persists them to a SQLite database at ~/.peek/sessions.db. AI coding agents (Claude Code, Cursor, Cline, Windsurf) read sessions from the database via 10 MCP tools: Tool What it does list_recent_sessions List recently recorded sessions (id, origin, ts, event count). get_session_summary LLM-readable narrative summary of a session. get_session_console_errors Console errors recorded in a session. get_session_network_errors Failed/notable network requests in a session. get_user_action_before_error Last N user actions before a console error. generate_playwright_repro Generate a runnable Playwright test from a session. get_dom_snapshot Reconstruct the DOM at a given timestamp. query_dom_history Timeline of attribute/text changes for a selector. request_authorization Side-panel consent for write actions (Level 3). execute_action Dispatch a UI action (gated by permission level + destructive blocklist). Why local-first matters Every other "browser session for AI" tool ships to a vendor cloud. peek's SQLite + extension live on the user's machine — no remote endpoints, no telemetry. The privacy policy (docs/peek/PRIVACY_POLICY.md) is the source of truth. Install # 1. Add the MCP server to Claude Code claude mcp add peek -- npx -y @peekdev/mcp # 2. Install the Chrome extension from the Chrome Web Store # (link added once the CWS listing is approved)

a day ago