#tools #rag #opensource
🤖 RAG для ленивых разработчиков
Привет, друзья! Наткнулся тут на интересную штуку для тех, кто делает AI-проекты и не хочет изобретать велосипед (полагаю, что таких среди нас много 😅).
Ребята из Upstash запилили React-компонент для быстрой сборки чат-ассистентов с RAG (это та самая штука, которая помогает AI не нести чушь и опираться на реальные данные).
Что там внутри:
- Стриминг ответов (потому что кто в 2025 не стримит, тот не хипстер 😉)
- Серверная часть из коробки
- Хранение истории чатов
- Кастомизация UI (можно сделать и минимализм, и буйство красок – на ваш вкус)
В общем, если надо быстро прикрутить умный чат к своему Next.js проекту и не париться – может пригодиться.
Исходники лежат тут
Что еще ?
- При желании работу с YandexGPT (или Llama 3.1/3.3 из Yandex Foundation Models) можно настроить через Openai Adapter
- Через Cursor Agent Composer можно переписать компонент и настроить его на работу с любым Vector Store и потом использовать как готовый модуль в других проектах.
#разработка #ai #react #nextjs
🤖 RAG для ленивых разработчиков
Привет, друзья! Наткнулся тут на интересную штуку для тех, кто делает AI-проекты и не хочет изобретать велосипед (полагаю, что таких среди нас много 😅).
Ребята из Upstash запилили React-компонент для быстрой сборки чат-ассистентов с RAG (это та самая штука, которая помогает AI не нести чушь и опираться на реальные данные).
Что там внутри:
- Стриминг ответов (потому что кто в 2025 не стримит, тот не хипстер 😉)
- Серверная часть из коробки
- Хранение истории чатов
- Кастомизация UI (можно сделать и минимализм, и буйство красок – на ваш вкус)
В общем, если надо быстро прикрутить умный чат к своему Next.js проекту и не париться – может пригодиться.
Исходники лежат тут
Что еще ?
- При желании работу с YandexGPT (или Llama 3.1/3.3 из Yandex Foundation Models) можно настроить через Openai Adapter
- Через Cursor Agent Composer можно переписать компонент и настроить его на работу с любым Vector Store и потом использовать как готовый модуль в других проектах.
#разработка #ai #react #nextjs
GitHub
GitHub - upstash/rag-chat-component: React component for RAG-enabled AI Assistant
React component for RAG-enabled AI Assistant. Contribute to upstash/rag-chat-component development by creating an account on GitHub.
Создание AI-тьютора испанского языка за час: разбор live-кодинга с Lovable 🤖
Команда Lovable вчера провела интересный онлайн-эксперимент — создание полноценного AI-тьютора для изучения испанского языка в прямом эфире. Разбираем, что получилось и какие технологии использовались.
Что такое Lovable? 🛠
Про Lovable уже писал много раз (пост 1, пост 2, пост 3, пост 4), но на всякий случай напомню.
Lovable — платформа для создания full-stack приложений с помощью естественного языка. Вместо написания кода разработчики общаются с AI, описывая нужную функциональность.
Основные возможности:
• Создание React-приложений через текстовые команды
• Интеграция с Supabase для backend-функций
• Автоматическое развертывание и управление базой данных
• Поддержка аутентификации и внешних API
Техническая архитектура проекта ⚙️
Стек технологий: 1️⃣ Frontend: React (единственный поддерживаемый фреймворк) 2️⃣ Backend: Supabase (база данных + Edge Functions) 3️⃣ AI: OpenAI API для обработки текста и голоса 4️⃣ Аутентификация: встроенная система Supabase
Структура приложения:
• Глобальная боковая панель навигации
• Страница дашборда (по умолчанию)
• Чат-интерфейс для общения с AI
• Панель настроек справа
Реализованная функциональность 📱
Основные возможности:
• Текстовый чат с AI-тьютором на испанском
• Голосовой ввод с преобразованием речи в текст
• Воспроизведение ответов AI в аудиоформате
• Перевод сообщений AI на английский
• Настройка скорости воспроизведения аудио
Система кредитов:
• Ограничение бесплатного использования
• Списание кредитов за AI-операции
• Отображение баланса в интерфейсе
• Модальное окно при исчерпании лимита
Практические советы по работе с Lovable 💡
Эффективные промпты:
• Разбивайте сложные задачи на мелкие шаги
• Будьте максимально конкретны в описаниях
• Указывайте технические детали (например, "используй OpenAI")
• Добавляйте требования к UI/UX сразу
Работа с ошибками:
• Не нажимайте "Try to fix" больше 2-3 раз
• Используйте функцию отката к предыдущим версиям
• Переформулируйте запрос, если AI "застрял"
• Применяйте Chat Mode для планирования сложных изменений
Интеграция с внешними сервисами 🔗
Supabase:
• Автоматическое создание таблиц для профилей пользователей
• Безопасное хранение API-ключей в секретах
• Edge Functions для серверной логики
• Миграции базы данных "на лету"
OpenAI API:
• Отдельные Edge Functions для каждой AI-задачи
• Обработка текста, речи и переводов
• Настраиваемые системные промпты
• Автоматическое развертывание при изменениях
Ограничения и особенности ⚠️
Текущие ограничения:
• Только React в качестве frontend-фреймворка
• Производительность снижается в пиковые часы
• Необходимость детального планирования промптов
• Ограниченная поддержка кастомных доменов
Рекомендации:
• Используйте Custom Knowledge для хранения требований проекта
• Применяйте гибридный подход: Lovable + ручное редактирование кода
• Интегрируйтесь с GitHub для версионирования
• Тестируйте функциональность после каждого изменения
Планы развития проекта 🚀
Следующие этапы: 1️⃣ Улучшение дизайна и UX 2️⃣ Добавление геймификации (рейтинг достижений) 3️⃣ Админ-панель для управления пользователями 4️⃣ Интеграция Stripe для монетизации 5️⃣ Запуск на Product Hunt
Эксперимент показал, что современные AI-инструменты позволяют создавать функциональные приложения без глубоких знаний программирования. Однако успех зависит от умения правильно формулировать задачи и понимания архитектуры веб-приложений.
Очень рекомендую посмотреть этот эксперимент в записи (1 час), или прочитать транскрипт. Я подготовил 2 версии транскрипта: • детальную • краткую
P.S. На этой неделе курса по AI-программированию и ИИ-агентам у нас была очень близкая тема - мы делали синхронный переводчик для зума, и также в одном из вариантов использовали lovable, в следующей заметке напишу чуть подробнее что и как мы делали и дам ссылки на веб-приложения, которые у нас получились.
#ai_development #nocode #lovable #supabase #react
Команда Lovable вчера провела интересный онлайн-эксперимент — создание полноценного AI-тьютора для изучения испанского языка в прямом эфире. Разбираем, что получилось и какие технологии использовались.
Что такое Lovable? 🛠
Про Lovable уже писал много раз (пост 1, пост 2, пост 3, пост 4), но на всякий случай напомню.
Lovable — платформа для создания full-stack приложений с помощью естественного языка. Вместо написания кода разработчики общаются с AI, описывая нужную функциональность.
Основные возможности:
• Создание React-приложений через текстовые команды
• Интеграция с Supabase для backend-функций
• Автоматическое развертывание и управление базой данных
• Поддержка аутентификации и внешних API
Техническая архитектура проекта ⚙️
Стек технологий: 1️⃣ Frontend: React (единственный поддерживаемый фреймворк) 2️⃣ Backend: Supabase (база данных + Edge Functions) 3️⃣ AI: OpenAI API для обработки текста и голоса 4️⃣ Аутентификация: встроенная система Supabase
Структура приложения:
• Глобальная боковая панель навигации
• Страница дашборда (по умолчанию)
• Чат-интерфейс для общения с AI
• Панель настроек справа
Реализованная функциональность 📱
Основные возможности:
• Текстовый чат с AI-тьютором на испанском
• Голосовой ввод с преобразованием речи в текст
• Воспроизведение ответов AI в аудиоформате
• Перевод сообщений AI на английский
• Настройка скорости воспроизведения аудио
Система кредитов:
• Ограничение бесплатного использования
• Списание кредитов за AI-операции
• Отображение баланса в интерфейсе
• Модальное окно при исчерпании лимита
Практические советы по работе с Lovable 💡
Эффективные промпты:
• Разбивайте сложные задачи на мелкие шаги
• Будьте максимально конкретны в описаниях
• Указывайте технические детали (например, "используй OpenAI")
• Добавляйте требования к UI/UX сразу
Работа с ошибками:
• Не нажимайте "Try to fix" больше 2-3 раз
• Используйте функцию отката к предыдущим версиям
• Переформулируйте запрос, если AI "застрял"
• Применяйте Chat Mode для планирования сложных изменений
Интеграция с внешними сервисами 🔗
Supabase:
• Автоматическое создание таблиц для профилей пользователей
• Безопасное хранение API-ключей в секретах
• Edge Functions для серверной логики
• Миграции базы данных "на лету"
OpenAI API:
• Отдельные Edge Functions для каждой AI-задачи
• Обработка текста, речи и переводов
• Настраиваемые системные промпты
• Автоматическое развертывание при изменениях
Ограничения и особенности ⚠️
Текущие ограничения:
• Только React в качестве frontend-фреймворка
• Производительность снижается в пиковые часы
• Необходимость детального планирования промптов
• Ограниченная поддержка кастомных доменов
Рекомендации:
• Используйте Custom Knowledge для хранения требований проекта
• Применяйте гибридный подход: Lovable + ручное редактирование кода
• Интегрируйтесь с GitHub для версионирования
• Тестируйте функциональность после каждого изменения
Планы развития проекта 🚀
Следующие этапы: 1️⃣ Улучшение дизайна и UX 2️⃣ Добавление геймификации (рейтинг достижений) 3️⃣ Админ-панель для управления пользователями 4️⃣ Интеграция Stripe для монетизации 5️⃣ Запуск на Product Hunt
Эксперимент показал, что современные AI-инструменты позволяют создавать функциональные приложения без глубоких знаний программирования. Однако успех зависит от умения правильно формулировать задачи и понимания архитектуры веб-приложений.
Очень рекомендую посмотреть этот эксперимент в записи (1 час), или прочитать транскрипт. Я подготовил 2 версии транскрипта: • детальную • краткую
P.S. На этой неделе курса по AI-программированию и ИИ-агентам у нас была очень близкая тема - мы делали синхронный переводчик для зума, и также в одном из вариантов использовали lovable, в следующей заметке напишу чуть подробнее что и как мы делали и дам ссылки на веб-приложения, которые у нас получились.
#ai_development #nocode #lovable #supabase #react
YouTube
Can We Build an AI Tutor in an Hour? Live Coding Challenge!
🚀 Can we build a fully functional AI-powered Spanish tutor in under an hour? Welcome to Session 1 of our Zero to Launch series, where we take an AI app from concept to reality in five live sessions!
💡 This session is packed with real-time coding, problem…
💡 This session is packed with real-time coding, problem…