Magic Component Platform (MCP)
21st.dev Magic AI 에이전트

Magic Component Platform(MCP)은 개발자가 자연어 설명을 통해 아름답고 현대적인 UI 컴포넌트를 즉시 제작할 수 있도록 지원하는 강력한 AI 기반 도구입니다. 널리 사용되는 IDE와 완벽하게 통합되며 UI 개발을 위한 간소화된 워크플로를 제공합니다.
🌟 특징
AI 기반 UI 생성 : 자연어로 설명하여 UI 구성 요소를 생성합니다.
다중 IDE 지원 :
커서 IDE 통합
윈드서핑 지원
VSCode 지원
VSCode + Cline 통합(베타)
최신 구성 요소 라이브러리 : 21st.dev 에서 영감을 받아 미리 구축되고 사용자 정의가 가능한 광범위한 구성 요소 컬렉션에 액세스
실시간 미리보기 : 구성 요소를 만들 때 즉시 구성 요소를 볼 수 있습니다.
TypeScript 지원 : 유형 안전 개발을 위한 전체 TypeScript 지원
SVGL 통합 : 광범위한 전문 브랜드 자산 및 로고 컬렉션에 액세스
구성 요소 향상 : 고급 기능 및 애니메이션으로 기존 구성 요소를 개선합니다(곧 출시)
Related MCP server: 21st.dev Magic AI Agent
🎯 작동 원리
에이전트에게 필요한 것을 알려주세요
AI 에이전트의 채팅에서
/ui입력하고 찾고 있는 구성 요소를 설명하세요.예:
/ui create a modern navigation bar with responsive design
마법이 그것을 창조하게 하세요
IDE에서 Magic을 사용하라는 메시지가 표시됩니다.
Magic은 세련된 UI 구성 요소를 즉시 구축합니다.
구성 요소는 21st.dev의 라이브러리에서 영감을 받았습니다.
원활한 통합
구성 요소는 프로젝트에 자동으로 추가됩니다.
새로운 UI 구성요소를 바로 사용해 보세요
모든 구성 요소는 완전히 사용자 정의 가능합니다.
🚀 시작하기
필수 조건
Node.js(최신 LTS 버전 권장)
지원되는 IDE 중 하나:
커서
윈드서핑
VSCode(Cline 확장 포함)
설치
API 키 생성
21st.dev Magic Console을 방문하세요
새로운 API 키 생성
설치 방법 선택
방법 1: CLI 설치(권장)
IDE에 MCP를 설치하고 구성하는 명령은 다음과 같습니다.
지엑스피1
지원 클라이언트: 커서, 윈드서핑, 클라인, 클로드
방법 2: 수동 구성
수동 설정을 선호하는 경우 IDE의 MCP 구성 파일에 다음을 추가하세요.
{
"mcpServers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
}
}
}구성 파일 위치:
커서:
~/.cursor/mcp.json윈드서핑:
~/.codeium/windsurf/mcp_config.json클라인:
~/.cline/mcp_config.json클로드:
~/.claude/mcp_config.json
방법 3: VS 코드 설치
한 번의 클릭으로 설치하려면 아래 설치 버튼 중 하나를 클릭하세요.
수동 VS 코드 설정
먼저, 원클릭 설치를 위해 위의 설치 버튼을 확인하세요. 수동 설치의 경우:
VS Code의 사용자 설정(JSON) 파일에 다음 JSON 블록을 추가합니다. Ctrl + Shift + P 를 누르고 Preferences: Open User Settings (JSON) 입력하면 됩니다.
{
"mcp": {
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}
}선택적으로 작업 공간의 .vscode/mcp.json 이라는 파일에 추가할 수 있습니다.
{
"inputs": [
{
"type": "promptString",
"id": "apiKey",
"description": "21st.dev Magic API Key",
"password": true
}
],
"servers": {
"@21st-dev/magic": {
"command": "npx",
"args": ["-y", "@21st-dev/magic@latest"],
"env": {
"API_KEY": "${input:apiKey}"
}
}
}
}❓ 자주 묻는 질문
Magic AI Agent는 내 코드베이스를 어떻게 처리하나요?
Magic AI Agent는 생성하는 구성 요소와 관련된 파일만 작성하거나 수정합니다. 프로젝트의 코드 스타일과 구조를 따르며, 애플리케이션의 다른 부분에 영향을 주지 않고 기존 코드베이스와 완벽하게 통합됩니다.
생성된 구성요소를 사용자 정의할 수 있나요?
네! 생성된 모든 컴포넌트는 완벽하게 편집 가능하며 잘 구성된 코드를 포함합니다. 코드베이스의 다른 React 컴포넌트와 마찬가지로 스타일, 기능 및 동작을 수정할 수 있습니다.
세대가 다 떨어지면 어떻게 되나요?
월별 생성 한도를 초과하면 플랜을 업그레이드하라는 메시지가 표시됩니다. 언제든지 업그레이드하여 구성 요소를 계속 생성할 수 있습니다. 기존 구성 요소는 그대로 작동합니다.
21st.dev 라이브러리에 새로운 구성 요소가 추가되는 데 얼마나 걸립니까?
작성자는 언제든지 21st.dev에 컴포넌트를 게시할 수 있으며, Magic Agent는 해당 컴포넌트에 즉시 접근할 수 있습니다. 즉, 커뮤니티의 최신 컴포넌트와 디자인 패턴을 항상 이용할 수 있습니다.
구성 요소의 복잡성에는 한계가 있습니까?
Magic AI Agent는 간단한 버튼부터 복잡한 인터랙티브 양식까지 다양한 복잡성의 구성 요소를 처리할 수 있습니다. 하지만 최상의 결과를 얻으려면 매우 복잡한 UI를 작고 관리하기 쉬운 구성 요소로 나누는 것이 좋습니다.
🛠️ 개발
프로젝트 구조
mcp/
├── app/
│ └── components/ # Core UI components
├── types/ # TypeScript type definitions
├── lib/ # Utility functions
└── public/ # Static assets주요 구성 요소
IdeInstructions: 다양한 IDE에 대한 설정 지침ApiKeySection: API 키 관리 인터페이스WelcomeOnboarding: 신규 사용자를 위한 온보딩 흐름
🤝 기여하기
여러분의 참여를 환영합니다! Discord 커뮤니티 에 가입하시고 Magic Agent 개선에 도움이 되는 피드백을 남겨주세요. 소스 코드는 GitHub 에서 확인하실 수 있습니다.
👥 커뮤니티 및 지원
Discord 커뮤니티 - 활발한 커뮤니티에 참여하세요
Twitter - 최신 소식을 받아보려면 팔로우하세요
⚠️ 베타 공지
Magic Agent는 현재 베타 버전입니다. 이 기간 동안 모든 기능은 무료로 이용하실 수 있습니다. 플랫폼을 지속적으로 개선해 나가는 동안 여러분의 소중한 의견과 양해 부탁드립니다.
📝 라이센스
MIT 라이센스
🙏 감사의 말
베타 테스터와 커뮤니티 멤버들에게 감사드립니다.
Cursor, Windsurf 및 Cline 팀의 협력에 특별히 감사드립니다.
21st.dev 와의 통합을 통해 구성 요소에 대한 영감을 얻다
로고 및 브랜드 자산 통합을 위한 SVGL
자세한 내용을 알아보려면 Discord 커뮤니티 에 가입하거나 21st.dev/magic을 방문하세요.
Available Tools
4 tools21st_magic_component_builderA
"Use this tool when the user requests a new UI component—e.g., mentions /ui, /21 /21st, or asks for a button, input, dialog, table, form, banner, card, or other React component. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Generate a search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase | |
| absolutePathToCurrentFile | Yes | Absolute path to the current file to which we want to apply changes | |
| absolutePathToProjectDirectory | Yes | Absolute path to the project root directory | |
| standaloneRequestQuery | Yes | You need to formulate what component user wants to create, based on his message, possbile chat histroy and a place where he makes the request.Extract additional context about what should be done to create a ui component/page based on the user's message, search query, and conversation history, files. Don't halucinate and be on point. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden and does useful work: it discloses that the tool ONLY returns a text snippet and requires the agent to edit or add files afterward. This is important behavioral context beyond the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences: trigger, output scope, and follow-up action. Each sentence earns its place and the most decision-relevant information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple builder with no output schema or annotations, it explains what the tool returns and the required integration step. It lacks explicit sibling exclusions and return-shape detail, but the schema covers parameters and the trigger guidance is sufficient for selection.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all five parameters. The description does not repeat parameter details but also does not add meaning beyond the schema, which is the expected baseline.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a clear verb+resource: building new UI components, with concrete examples such as button, input, dialog, and form. It is clear about what the tool does but does not explicitly differentiate it from sibling tools like 21st_magic_component_inspiration or 21st_magic_component_refiner.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives an explicit 'use this tool when' trigger and lists example request patterns. It does not spell out when to prefer the inspiration or refiner siblings, so it stops short of full when/when-not guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
21st_magic_component_inspirationA
"Use this tool when the user wants to see component, get inspiration, or /21st fetch data and previews from 21st.dev. This tool returns the JSON data of matching components without generating new code. This tool ONLY returns the text snippet for that UI component. After calling this tool, you must edit or add files to integrate the snippet into the codebase."
| Name | Required | Description | Default |
|---|---|---|---|
| message | Yes | Full users message | |
| searchQuery | Yes | Search query for 21st.dev (library for searching UI components) to find a UI component that matches the user's message. Must be a two-four words max or phrase |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the behavioral disclosure burden. It states that no code is generated, that only the text snippet is returned, and that the agent must edit or add files afterward. It does not cover authentication, limits, or exact return shape, but the key behavioral constraints are disclosed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is short and front-loaded with the trigger conditions. There is some redundancy between 'returns the JSON data' and 'ONLY returns the text snippet', but the overall structure is efficient and the post-call instruction earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a two-parameter fetch-like tool with a rich schema and no output schema, this description provides sufficient context: when to use it, what it returns, what it does not do, and what the agent must do afterward. It could be slightly richer on output formatting, but it is largely complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already documents both required parameters with 100% coverage, so the description adds limited semantic value beyond the schema. The description clarifies that searchQuery is for finding a matching UI component, but this is also reflected in the schema's parameter description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly identifies the action as fetching component data and previews from 21st.dev, and it contrasts itself with code generation by stating it does not generate new code. It does not explicitly distinguish itself from the refiner sibling, so it stops short of full differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description opens with explicit trigger conditions: 'when the user wants to see component, get inspiration, or /21st'. It does not provide when-not guidance or name alternative tools, but the usage context is clear enough for an agent to select this tool appropriately.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
21st_magic_component_refinerA
"Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."
| Name | Required | Description | Default |
|---|---|---|---|
| userMessage | Yes | Full user's message about UI refinement | |
| absolutePathToRefiningFile | Yes | Absolute path to the file that needs to be refined | |
| context | Yes | Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full disclosure burden. It does state the core outcome—'returns redesigned version of the component and instructions on how to implement it'—which implies a read/return behavior rather than a direct write. However, it never says whether the file at absolutePathToRefiningFile is modified, what happens on failure, or any prerequisites, leaving the side-effect profile unclear for a mutating-looking tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two compact sentences with the trigger condition front-loaded in the opening clause ('Use this tool when...'). There is minor redundancy—'improves UI' appears in both sentences—but no filler or irrelevant content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The definition covers what the tool does, when to use it, and the outcome, and the schema fully documents parameters. But with no output schema and no annotations, the concrete return format of the 'redesigned version and instructions' is unspecified, and side effects on the target file are unstated, leaving the full invocation contract incomplete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the schema already documents all three parameters in detail—'context' even includes extraction rules and the 'return an empty string' fallback. The description text adds no parameter-level meaning beyond the schema, so the baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states specific verbs ('re-design/refine/improve') and a clear resource ('current UI component', 'React component or molecule'), and scopes the tool by excluding big pages. The outcome is also specified: it 'returns redesigned version of the component and instructions on how to implement it.' It does not explicitly distinguish itself from sibling tools (inspiration, builder), so differentiation is inferable rather than stated.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicit trigger conditions are given ('when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule') plus a clear exclusion ('NOT for big pages'). It stops short of naming alternatives—an agent is not told to use builder for new components or inspiration for ideas—so the when-not guidance is partial.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
logo_searchA
Search and return logos in specified format (JSX, TSX, SVG). Supports single and multiple logo searches with category filtering. Can return logos in different themes (light/dark) if available.
When to use this tool:
When user types "/logo" command (e.g., "/logo GitHub")
When user asks to add a company logo that's not in the local project
Example queries:
Single company: ["discord"]
Multiple companies: ["discord", "github", "slack"]
Specific brand: ["microsoft office"]
Command style: "/logo GitHub" -> ["github"]
Request style: "Add Discord logo to the project" -> ["discord"]
Format options:
TSX: Returns TypeScript React component
JSX: Returns JavaScript React component
SVG: Returns raw SVG markup
Each result includes:
Component name (e.g., DiscordIcon)
Component code
Import instructions
| Name | Required | Description | Default |
|---|---|---|---|
| queries | Yes | List of company names to search for logos | |
| format | Yes | Output format |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations to lean on, the description carries the behavioral burden and does well by detailing supported formats, theme variations ('if available'), and the exact structure of results (component name, code, import instructions). It does not cover failure modes or no-result behavior, but the disclosed behavior is sufficient for the agent to anticipate what will happen.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-organized with clear sections for purpose, usage, examples, formats, and output structure. It is slightly longer than strictly necessary because example queries partially repeat the usage triggers, but each section earns its place and the key info is front-loaded in the first sentence.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given there is no output schema and no annotations, the description does a good job of explaining what the tool returns, including output format options and result fields. However, it mentions 'category filtering' even though the input schema has no category parameter, and it does not explain what happens when a logo is not found, leaving minor but real gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already describes both parameters (format and queries), so the baseline is 3; the description adds significant value by defining what each format returns (TSX/JSX/SVG), providing concrete example query arrays, and showing how command-style inputs map to the queries parameter. This goes beyond the schema's minimal descriptions.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a precise verb and resource: 'Search and return logos in specified format (JSX, TSX, SVG).' It clearly distinguishes itself from sibling tools (which concern component inspiration, refining, and building) by focusing on logo lookup and output formats. The example queries and command styles reinforce exactly what the tool does.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The 'When to use this tool' section explicitly lists two concrete trigger conditions: user types '/logo' command or asks to add a company logo not in the local project. The phrase 'that's not in the local project' provides a clear when-not-to-use condition, effectively excluding cases where the logo is already available locally.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
4 tool updates
v1.0.0- Added
21st_magic_component_builder - Added
21st_magic_component_inspiration - Added
21st_magic_component_refiner - Added
logo_search
TDQS
Scored across 4 tools
The first three tools (builder, inspiration, refiner) have overlapping purposes focused on UI components, with unclear boundaries between generating new components and refining existing ones, which could cause misselection. The logo_search tool is distinct but adds to the confusion as it operates in a different domain (logos vs. general UI components), making the set feel disjointed rather than cohesive.
Naming is inconsistent: the first three tools use a verbose '21st_magic_component_' prefix with descriptive suffixes (builder, inspiration, refiner), while logo_search is a simple, unrelated snake_case name. This mixed pattern lacks a predictable convention, making the tool set harder to navigate and remember for agents.
With 4 tools, the count is reasonable and well-scoped for a platform focused on UI components and logos, avoiding bloat. However, the inclusion of logo_search alongside the component tools feels slightly mismatched, as it targets a specific niche (logos) rather than general UI components, slightly reducing appropriateness.
For UI components, there are notable gaps: the tools cover building, inspiration, and refining, but lack operations for updating, deleting, or managing component lifecycles (e.g., no update or delete tools). Logo_search is complete for its domain, but overall, the surface is incomplete for a comprehensive UI component platform, potentially causing agent workarounds.
Maintenance
Related MCP Connectors
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Build and manage your design system with AI: tokens, themes, components, icons, Figma and code.
- MaketaOAuthpro.maketa
Build and edit app screen mockups and clickable prototypes from your AI assistant.
Related MCP Servers
- FlicenseBqualityDmaintenanceAI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.32-
- -licenseAqualityNot gradedmaintenanceA powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.417,665 npm-
- AlicenseBqualityDmaintenanceEnables developers to generate beautiful, modern UI components through natural language descriptions. Integrates with popular IDEs to instantly create and customize React components inspired by 21st.dev's component library.45 npmISC
- AlicenseAqualityCmaintenanceEnables AI-powered UI component generation from natural language descriptions, integrating with IDEs like Cursor, Windsurf, and VS Code.417,665 npmISC