
Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Это как v0, но в вашем Cursor / Claude Code / Windsurf: ищите 10 000+ компонентов React/Tailwind, генерируйте новый интерфейс с помощью ИИ и публикуйте свой собственный — прямо из редактора.
Обзор
Magic Component Platform (MCP) — это мощный инструмент на базе искусственного интеллекта, который помогает разработчикам мгновенно создавать красивые, современные UI-компоненты с помощью описаний на естественном языке. Он бесшовно интегрируется с популярными IDE и обеспечивает упрощённый рабочий процесс для разработки интерфейса. - : Создание компонентов интерфейса, описывая их на естественном языке - : - Интеграция Cursor IDE - Поддержка Windsurf - Поддержка VSCode - Интеграция VSCode + Cline (бета-версия) - : Доступ к огромному набору готовых, настраиваемых компонентов, вдохновлённых 21st.
Обзор (машинный перевод)
Magic MCP теперь является 21-м MCP. Сервер Magic MCP (
@21st-dev/magic) был заменён унифицированным 21-м MCP, установленным через 21st CLI — установленный на 21st.dev/mcp. Этот пакет по-прежнему публикуется как тонкий прокси совместимости, поэтому старые конфигурации продолжают работать.
Установить 21-й MCP (рекомендуется)
Или добавьте вручную — это обычный HTTP-MCP-сервер:
Получите API-ключ в 21st.dev/mcp.
Старые ключи API Magic были сброшены. Ключи, выданные старой консолью Magic, больше нигде не работают. Генерируйте новый ключ в 21st.dev/mcp.
Что теперь делает этот пакет (v0.2.0+)
npx -y @21st-dev/magic@latest API_KEY="..." всё ещё работает: начиная с версии 2.2.0, это небольшой stdio-прокси, который пересылает каждое сообщение MCP на 21-й MCP-сервер. Существующие записи mcp.json, ссылающиеся на @21st-dev/magic, продолжают работать — но теперь они общаются с тем же сервером, что и 21-й CLI, с инструментами, доступными для аутентифицированной учетной записи.
Ключ API принимается во всех исторических формах: позиционные API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ... или переменные окружения TWENTY_FIRST_API_KEY / API_KEY_21ST.
Доступ с помощью ИИ
Доступ к компонентам конструктора не включает размещённый 21-й AI.
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
README
Показан фрагмент оригинального README. Открыть оригинал.
Magic MCP → 21st MCP
Magic MCP is now the 21st MCP. The Magic MCP server (
@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.
Install the 21st MCP (recommended)
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
Or add it manually — it is a plain HTTP MCP server:
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
Get an API key at 21st.dev/mcp.
Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.
What this package does now (v0.2.0+)
npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the tools available to the authenticated account.
The API key is accepted in all the historical forms: positional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., or the TWENTY_FIRST_API_KEY / API_KEY_21ST environment variables.
AI access
Builder component access does not enable hosted 21st AI. The server lists
generate and iterate_generation only when AI access is enabled. Check
get_usage.aiGenerationEnabled; this reports access, not the remaining AI
credit balance. With AI off, use search and get_component, then adapt the
code with your own coding agent. Existing drafts remain readable.
A cached or legacy generation call can return ai_subscription_required. Do
not retry until AI is enabled. Refresh the client tool list or reconnect after
enabling AI. The proxy forwards discovery to the server, so existing proxy
versions receive this behavior without an npm update.
server.json mirrors the official dev.21st/mcp registry listing. The registry
version is independent of this compatibility package version.
Old tool names → new tool names
The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names:
| Legacy Magic tool | 21st MCP tool |
|---|---|
21st_magic_component_builder |
generate |
21st_magic_component_inspiration |
get_inspiration |
21st_magic_component_refiner |
generate (new generation from the refinement prompt) |
logo_search |
search_logo (one query per call) |
Установка
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codexКонфигурация
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}