21st.dev Magic AI Agent
Создаёт современные UI-компоненты с помощью ИИ по описанию на естественном языке в IDE как Cursor и Windsurf.
Описание
Magic AI Agent — мощный инструмент на базе ИИ для генерации UI-компонентов через естественный язык. Интегрируется с IDE: Cursor, Windsurf, VSCode + Cline. Ключевые особенности: поддержка TypeScript, реал-тайм превью, библиотека компонентов от 21st.dev, интеграция SVGL для брендов. Идеален для быстрого создания и кастомизации фронтенда, прототипирования и улучшения существующих UI без ручного кодирования.
Возможности
Генерация UI с ИИ
Создание компонентов по описанию на естественном языке, вдохновлённым библиотекой 21st.dev.
Поддержка IDE
Интеграция с Cursor, Windsurf, VSCode + Cline для seamless workflow.
Библиотека компонентов
Доступ к предустановленным, кастомизируемым UI-элементам.
Реал-тайм превью
Мгновенный просмотр генерируемых компонентов.
TypeScript и SVGL
Полная типизация и интеграция с брендовыми активами/логотипами.
Установка
Предварительные требования: Node.js (LTS), IDE (Cursor, Windsurf, VSCode с Cline).
- Получите API-ключ на https://21st.dev/magic/console.
Метод 1 (CLI):
npx @21st-dev/cli@latest install
Метод 2 (Ручной, в mcp.json): { “mcpServers”: { “@21st-dev/magic”: { “command”: “npx”, “args”: ["-y", “@21st-dev/magic@latest”, “API_KEY="your-api-key"”] } } } (Файлы: ~/.cursor/mcp.json и т.д.).
Метод 3 (VSCode): Используйте кнопки установки или добавьте в settings.json: { “mcp”: { “inputs”: […], “servers”: { “@21st-dev/magic”: { “command”: “npx”, “args”: ["-y", “@21st-dev/magic@latest”], “env”: {“API_KEY”: “${input:apiKey}”} } } } }