Заметки LLM-энтузиаста
468 subscribers
131 photos
16 videos
1 file
161 links
Дмитрий Жечков @djdim
архитектор в Yandex Cloud,
ex. VMware NSX specialist, ex. Cisco SE

Здесь пишу свои заметки по LLM (большим языковым моделям) и LLM-разработке.

Это личное мнение и не отражает официальную позицию компании, в которой я работаю.
Download Telegram
Интеграция v0 с Cursor: новые возможности для разработки

Теперь можно использовать v0 напрямую в редакторе Cursor. Это позволяет превратить базовый UI-код в более профессиональный frontend.

Настройка интеграции 🔧

1️⃣ Откройте настройки Cursor:
⌘+Shift+P на macOS
Ctrl+Shift+P на Windows/Linux

2️⃣ Перейдите во вкладку 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
👍43🔥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
👍6❤‍🔥3