Заметки LLM-энтузиаста

0:16

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

369 viewsedited 15:12

GitHub представил Copilot Spaces — новый инструмент для управления знаниями команды 🚀

Команды разработчиков часто сталкиваются с проблемой разрозненной информации: код разбросан по репозиториям, документация спрятана в файлах, а лучшие практики существуют только в головах опытных коллег. Это замедляет работу и усложняет сотрудничество.

GitHub выпустил Copilot Spaces — инструмент, который организует всю информацию в единые "пространства", устраняя разрыв между кодом и контекстом 📚

Как это работает

Copilot Spaces позволяет создавать тематические пространства, включающие:
• Репозитории с кодом
• API документацию
• Рабочие процессы
• Командные соглашения

Каждое пространство может иметь собственные команды для настройки поведения Copilot под конкретные задачи.

Ключевые особенности

🔗 Глубокая интеграция с GitHub — добавляйте код и документы прямо из репозиториев без копирования
⚡️ Автоматическое обновление — при изменении репозитория пространство обновляется автоматически
🎯 Контекстные ответы — Copilot дает рекомендации на основе актуального состояния проекта

Как создать пространство

1️⃣ Перейдите на github.com/copilot/spaces 2️⃣ Нажмите "Create space" 3️⃣ Укажите название и владельца (личный аккаунт или организация) 4️⃣ Добавьте описание (опционально) 5️⃣ Нажмите "Create"

Типы контента в Spaces 📝

1️⃣ Инструкции — описание того, на чем должен фокусироваться Copilot 2️⃣ Ссылки — код из GitHub репозиториев и текстовый контент

Сценарии применения 💡

• Онбординг — быстрое введение новых разработчиков в курс дела
• Системные знания — документирование сложных процессов (аутентификация, CI/CD)
• Стандарты кода — руководства по стилю и чек-листы для ревью
• Разработка фич — организация контекста для конкретных задач

💡 Для получения пользы от Spaces не нужна формальная документация — можно использовать заметки, резюме встреч или простые списки.

Функция находится в публичном превью и доступна всем пользователям с лицензией Copilot 🔧

Источники:
• Анонс
• Документация

#github #copilot #development #knowledge #teamwork

🔥4❤2👍2

251 views08:31

0:15

0:07

Cursor 1.0: обзор ключевых обновлений 🚀

Вышла новая версия популярного AI-редактора кода Cursor 1.0.
Разберем долгожданные нововведения, которые могут быть полезны разработчикам.

BugBot — инструмент для автоматического ревью кода 🔍
Новый инструмент анализирует pull request'ы и находит потенциальные баги. При обнаружении проблем BugBot оставляет комментарии в GitHub с кнопкой "Fix in Cursor" для быстрого перехода к исправлению.

Упрощенная установка MCP серверов ⚡️ (наконец-то!)
• Установка MCP серверов теперь происходит в один клик
• Добавлена поддержка OAuth для аутентификации
• Доступен список официальных серверов в документации
• Разработчики могут создавать кнопки "Add to Cursor" для своих проектов

Background Agent для всех пользователей! 🤖
Фоновый агент для кодирования стал доступен всем пользователям. Запуск через иконку облака в чате или комбинацию Cmd/Ctrl+E (для пользователей без режима приватности).

Поддержка Jupyter Notebooks 📊
Agent теперь может создавать и редактировать ячейки в Jupyter Notebooks. Функция работает с моделями Sonnet и особенно полезна для исследований и data science задач.

Memories Beta — память контекста 🧠
Новая функция позволяет Cursor запоминать факты из разговоров и использовать их в будущем. Воспоминания сохраняются на уровне проекта и управляются через настройки. Похожая функция существует в Windsurf уже давно, я рад, что Cursor тоже ее реализовали.

Улучшенные ответы в чате 📈
• Поддержка диаграмм Mermaid
• Рендеринг Markdown таблиц
• Визуализация данных прямо в разговоре

Обновленный интерфейс ✨
Переработаны страницы настроек и дашборда с детальной аналитикой использования по инструментам и моделям.

Подробнее здесь

#cursor #ai #coding #development #tools

❤3👍1

340 views08:41

Как отслеживать расходы на Claude Code 💰

Если вы пользователь Claude Max или Pro и задаетесь вопросом, стоит ли Claude Code своих денег — просто посмотрите на статистику расходов.

Без детального анализа сложно оценить эффективность затрат. Некоторые задачи могут обходиться в $5 за каждый запуск, что серьезно бьет по бюджету 💸

Есть два полезных инструмента для отслеживания использования Claude Code:

1️⃣ ccusage
• CLI-инструмент для анализа использования токенов Claude Code
• Помогает легко выявить ресурсозатратные задачи
• Работает с локальными JSONL файлами

2️⃣ claude-code-costs
• Предоставляет визуальную разбивку стоимости сессий Claude
• Показывает расходы в динамике по времени
• Полезен для контроля бюджета

Основные возможности:
🔹 Расчет общих затрат по всем диалогам
🔹 Ежедневная разбивка расходов за последние 30 дней
🔹 Топ-20 самых дорогих диалогов
🔹 Фильтрация по проектам
🔹 Интерактивные HTML-отчеты с графиками

Установка и использование:

npx ccusage@latest
npx claude-code-costs

Оба инструмента анализируют данные из ~/.claude/projects/ и не требуют дополнительной настройки 🛠

Определенно стоит попробовать, если регулярно используете Claude Code для работы.

@llm_notes

#claude #cost #budget #development #vibecoding

❤3🔥2👍1

400 viewsedited 09:11

🚀 Cursor Agents теперь доступны в браузере и на мобильных устройствах

Разработчики Cursor расширили возможности своих AI-агентов — теперь они работают не только на десктопе, но и в веб-браузере, и на мобильных устройствах.

Что нового:

🌐 Кодинг откуда угодно — запускайте агентов из любого браузера или мобильного устройства для работы со своими задачами по написанию кода

⚙️ Фоновое выполнение задач — агенты вносят изменения в кодовую базу, создают pull request'ы и выполняют задачи без постоянного контроля (см. background agents)

🔄 Бесшовная передача на десктоп — продолжайте работу с того места, где остановились веб-агенты, прямо в Cursor IDE для проверки и доработки

🤖 Параллельное тестирование агентов — запускайте одну и ту же задачу на разных AI-моделях одновременно для сравнения результатов

Теперь можно задать задачу Cursor-агенту с телефона в кафе, а когда вернетесь к рабочему месту — просмотреть готовые изменения в редакторе. Агенты работают с реальной кодовой базой (нужно интегрировать cursor с github), что делает процесс разработки более гибким и продуктивным 📱💻

Подробности в официальном блоге Cursor тут

@llm_notes

#cursor #vibecoding #development #productivity #mobile

❤4👍4🔥4👎1

493 views14:29

1:59

Media is too big

Claudia: долгожданный GUI для Claude Code — обзор возможностей 🖥

Никто, наверное, сейчас не будет спорить, что Claude Code от Anthropic с момента своего выхода в свет показал себя, как мощнейший AI-инструмент для разработки, но работа через командную строку подходит не всем, да и добавлять скрины интерфейса приложения в него в процессе траблшутинга не так удобно как в том же Cursor.
Claudia решает эту проблему, предоставляя графический интерфейс и дополнительные возможности.

Что такое Claudia? 🤔

Claudia — это open-source десктопное приложение, построенное на Tauri 2, которое превращает Claude Code в полноценную IDE-подобную среду. Работает на Windows, macOS и Linux.

Основные возможности 🛠

(очень советую посмотреть "крышесносную" 2х минутную демку)

Управление проектами:
• Визуальный браузер всех Claude Code проектов
• Возобновление прошлых сессий с полным контекстом
• Умный поиск по проектам и сессиям

Кастомные агенты:
• Создание специализированных AI-агентов
• Настройка системных промптов для конкретных задач
• Изолированная среда выполнения с детальными разрешениями

Аналитика и мониторинг:
📊 Dashboard с метриками использования 📈 Отслеживание расходов API в реальном времени 📋 Детальная разбивка по моделям, проектам и времени

Ключевые преимущества 💡

1️⃣ Полный контекст
В отличие от Cursor, Claude Code предоставляет доступ к полному контекстному окну модели (200K токенов), что значительно повышает качество работы.

2️⃣ Система чекпоинтов
• Создание точек сохранения в любой момент
• Визуальная временная шкала сессий
• Возможность отката изменений одним кликом
• Встроенный diff-viewer для сравнения версий

3️⃣ Удобство работы с изображениями Прямая вставка изображений в интерфейс без необходимости указывать пути к файлам.

4️⃣ MCP серверы
• Графическое управление Model Context Protocol серверами
• Импорт конфигураций из JSON
• Тестирование соединений через UI

Установка ⚙️

Требования:
• Node.js 18+
• Rust 1.70+
• Bun
• Git
• Claude Code CLI

Процесс установки:

git clone https://github.com/getAsterisk/claudia.git
cd claudia
bun install
bun run tauri build

У меня вся процедура заняла около 5 минут

Практическое применение 🎯

Примеры использования:
• Создание веб-приложений (например, клон Notion)
• Разработка мобильных прототипов
• Автоматизация рефакторинга кода
• Написание unit-тестов

Типы агентов которые можно создать:
• Web Search Agent — для поиска документации
• Security Scanner — проверка уязвимостей (просто 🔥)
• Code Quality Checker — анализ качества кода
• Bug Fixer — автоматическое исправление ошибок

Ограничения ⚠️

• Сборка только из исходного кода (пока нет готовых релизов)
• Лицензия AGPL (важно для коммерческого использования)
• Некоторые функции еще в разработке
• Claude Code недоступен на Windows (только через WSL)

Заключение 📝

Claudia превращает мощный, но сложный в использовании Claude Code в доступный инструмент с богатым функционалом. Особенно полезна Claudia будет для разработчиков, которые предпочитают графические интерфейсы командной строке.

Проект активно развивается и уже сейчас предлагает функциональность, сопоставимую с коммерческими решениями.

@llm_notes

#claudecode #vibecoding #claudia #development #opensource

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8❤3🔥2🦄1

516 viewsedited 20:20

Claude Code получил функцию Hooks для интеграции в рабочий процесс 🔧

В Claude Code появилась новая возможность — Hooks, которая позволяет выполнять пользовательские shell-команды до или после использования инструментов. Это позволяет пользователю интегрировать в пайплайн разработки с использованием Claude Code свои собственные скрипты.

Доступные типы хуков:

1️⃣ PreToolUse — выполняется перед использованием инструмента, подходит для блокировки потенциально опасных операций

2️⃣ PostToolUse — запускается после использования инструмента, полезен для автоформатирования или логирования

3️⃣ Notification — срабатывает когда Claude требует внимания или задает вопрос

4️⃣ Stop — выполняется перед завершением ответа, подходит для очистки или генерации сводок

5️⃣ SubagentStop — запускается когда субагент Claude Code (вызов инструмента Task) завершает свою работу

Настройка и использование ⚙️

• Настройка через интерфейс /hooks (см. скриншот)
• Возможность фильтрации по названию инструмента
• Команды могут выполняться параллельно

Практические примеры:

• Notification хук для macOS со звуковым уведомлением (если его настроить на хук Stop или SubagentStop, то будет аналог того, что есть в Cursor Settings в разделе Settings -> Chat -> Completion Sound)
• Можно настроить отправку уведомлений в Slack или WhatsApp при завершении задач 📱

Безопасность 🔒

Claude контролирует безопасность вызовов — всегда запрашивает подтверждение перед внесением изменений, что предотвращает выполнение потенциально вредоносных скриптов.

Что круто: функция совместима и может работать с MCP инструментами

Подробности настройки в официальной документации

@llm_notes

#claude #hooks #vibecoding #development #automation

🔥5👍2💯2

422 views09:02

1:11