Интеграция v0 с Cursor: новые возможности для разработки
Теперь можно использовать v0 напрямую в редакторе Cursor. Это позволяет превратить базовый UI-код в более профессиональный frontend.
Настройка интеграции 🔧
1️⃣ Откройте настройки Cursor:
•
•
2️⃣ Перейдите во вкладку
3️⃣ Найдите поле
4️⃣ Нажмите
5️⃣ Введите эндпоинт v0:
6️⃣ Сохраните настройки и проверьте соединение
Использование `v0-1.0-md` в Agent Mode 🤖
• Откройте новый чат
• Режим:
• Модель: любая с пометкой OpenAI (
• Cursor автоматически будет использовать
Для проверки можете спросить: "
Обратите внимание, что на данный момент есть небольшой баг, связанный с тем, что если вы включили использование модели
Возможности модели
• Поддержка текста и изображений
• Совместимость с OpenAI Chat Completions API
• Быстрые потоковые ответы
• Оптимизация для современных стеков (Next.js, Vercel)
• Автоматическое исправление ошибок кода
Ограничения использования ⚠️
• Максимум 200 сообщений в день
• Контекстное окно: 128,000 токенов
• Максимальный вывод: 32,000 токенов
• Требуется Premium или Team план с оплатой по использованию
API находится в бета-версии. Для получения API ключа нужно зайти на v0.dev в настройки.
Пример использования
• Создаем в существующем next-js проекте Cursor главную страницу при помощи
результат см. на скриншоте
• Переключаемся на
Похожего эффекта красивого фронтенда можно добиться, используя magic-ui MCP и постоянно к нему обращаясь в процессе написания кода для UI.
Источники:
• https://vercel.com/docs/v0/cursor
• https://vercel.com/docs/v0/api
#cursor #v0 #frontend #development #ai
Теперь можно использовать v0 напрямую в редакторе Cursor. Это позволяет превратить базовый UI-код в более профессиональный frontend.
Настройка интеграции 🔧
1️⃣ Откройте настройки Cursor:
•
⌘+Shift+P
на macOS •
Ctrl+Shift+P
на Windows/Linux2️⃣ Перейдите во вкладку
Models
3️⃣ Найдите поле
OpenAI API Key
и вставьте ваш v0 API ключ4️⃣ Нажмите
Override OpenAI Base URL
5️⃣ Введите эндпоинт v0:
https://api.v0.dev/v1
6️⃣ Сохраните настройки и проверьте соединение
Использование `v0-1.0-md` в Agent Mode 🤖
• Откройте новый чат
• Режим:
Agent
• Модель: любая с пометкой OpenAI (
gpt-4o
, gpt-4-turbo
и т.д.) • Cursor автоматически будет использовать
v0-1.0-md
Для проверки можете спросить: "
кто ты?
" (см. скриншот)Обратите внимание, что на данный момент есть небольшой баг, связанный с тем, что если вы включили использование модели
v0-1.0-md
и в чате обращаетесь к какой-то другой модели (например, claude-3.5-sonnet
), то будете получать ошибку (см. скриншот), поэтому если модель v0-1.0-md
не нужна на данном этапе, то ее лучше просто отключить в настройках.Возможности модели
v0-1.0-md
📋• Поддержка текста и изображений
• Совместимость с OpenAI Chat Completions API
• Быстрые потоковые ответы
• Оптимизация для современных стеков (Next.js, Vercel)
• Автоматическое исправление ошибок кода
Ограничения использования ⚠️
• Максимум 200 сообщений в день
• Контекстное окно: 128,000 токенов
• Максимальный вывод: 32,000 токенов
• Требуется Premium или Team план с оплатой по использованию
API находится в бета-версии. Для получения API ключа нужно зайти на v0.dev в настройки.
Пример использования
• Создаем в существующем next-js проекте Cursor главную страницу при помощи
v0-1.0-md
моделиСделай красивое и стильное приложение календарь на базе моего уже настроенного проекта на Next.js.
Cначала создай главную страницу.
результат см. на скриншоте
• Переключаемся на
claude-3.5-sonnet
(или 4.0), продолжаем дизайнить фронтенд приложения этой моделью, и все остальные страницы будут сохранять стиль, который был задан на первой странице моделью v0-1.0-md
Похожего эффекта красивого фронтенда можно добиться, используя magic-ui MCP и постоянно к нему обращаясь в процессе написания кода для UI.
Источники:
• https://vercel.com/docs/v0/cursor
• https://vercel.com/docs/v0/api
#cursor #v0 #frontend #development #ai
👍4❤3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Stagewise: инструмент для точной настройки UI с помощью ИИ 🎯
Stagewise — это браузерная панель инструментов, которая соединяет веб-интерфейс с ИИ-агентами в редакторах кода. Основная идея: выбираете элементы на странице, оставляете комментарий и позволяете ИИ внести нужные изменения.
Как это работает:
🔸 Устанавливаете расширение в VS Code/Cursor
🔸 Добавляете компонент в веб-приложение
🔸 Выбираете элементы прямо в браузере
🔸 Описываете желаемые изменения
🔸 ИИ получает контекст и вносит правки в код
Основные возможности:
🔸 Работает с React, Next.js, Vue
🔸 Передает DOM-элементы, скриншоты и метаданные
🔸 Поддерживает выбор нескольких элементов
🔸 Настраивается через конфигурационный файл
Поддерживаемые ИИ-агенты:
1️⃣ Cursor ✅
2️⃣ Windsurf ✅
3️⃣ GitHub Copilot 🚧 (в разработке)
4️⃣ Остальные пока не поддерживаются
Архитектура системы:
🔸 Браузерная панель инструментов
🔸 Расширение для VS Code
🔸 Типобезопасная RPC-система для связи
🔸 MCP-сервер для интеграции с ИИ
Инструмент решает проблему точной настройки UI, когда ИИ делает 80% работы правильно, но остальные 20% требуют детальных правок. Вместо описания изменений текстом, предоствляя скриншот, вы просто показываете конкретные элементы. Такая функциональность обычно встроена во все AI веб-кодеры (lovable, bolt.new, replit и т.д.), а stagewise дает возможность получить ее в IDE-кодерах на своем ПК или mac'e.
Проект с открытым исходным кодом, активно развивается.
Монорепозиторий включает компоненты для разных фреймворков и систему сборки на базе pnpm и Turborepo.
Deepwiki документация со схемами по нему здесь.
#ai #frontend #cursor #ui #development
Stagewise — это браузерная панель инструментов, которая соединяет веб-интерфейс с ИИ-агентами в редакторах кода. Основная идея: выбираете элементы на странице, оставляете комментарий и позволяете ИИ внести нужные изменения.
Как это работает:
🔸 Устанавливаете расширение в VS Code/Cursor
🔸 Добавляете компонент в веб-приложение
🔸 Выбираете элементы прямо в браузере
🔸 Описываете желаемые изменения
🔸 ИИ получает контекст и вносит правки в код
Основные возможности:
🔸 Работает с React, Next.js, Vue
🔸 Передает DOM-элементы, скриншоты и метаданные
🔸 Поддерживает выбор нескольких элементов
🔸 Настраивается через конфигурационный файл
Поддерживаемые ИИ-агенты:
1️⃣ Cursor ✅
2️⃣ Windsurf ✅
3️⃣ GitHub Copilot 🚧 (в разработке)
4️⃣ Остальные пока не поддерживаются
Архитектура системы:
🔸 Браузерная панель инструментов
🔸 Расширение для VS Code
🔸 Типобезопасная RPC-система для связи
🔸 MCP-сервер для интеграции с ИИ
Инструмент решает проблему точной настройки UI, когда ИИ делает 80% работы правильно, но остальные 20% требуют детальных правок. Вместо описания изменений текстом, предоствляя скриншот, вы просто показываете конкретные элементы. Такая функциональность обычно встроена во все AI веб-кодеры (lovable, bolt.new, replit и т.д.), а stagewise дает возможность получить ее в IDE-кодерах на своем ПК или mac'e.
Проект с открытым исходным кодом, активно развивается.
Монорепозиторий включает компоненты для разных фреймворков и систему сборки на базе pnpm и Turborepo.
Deepwiki документация со схемами по нему здесь.
#ai #frontend #cursor #ui #development
👍6❤🔥3