Инструкция по установке SourceCraft Code доступна на официальном сайте: https://sourcecraft.dev/portal/code-assistant

Что такое OpenSpec

OpenSpec — это легковесный фреймворк для спецификационно-ориентированной разработки (Spec-Driven Development), который позволяет AI-ассистентам и инструментам для кодинга работать по единому стандарту.

Spec-Driven Development (SDD) — это подход к разработке, в котором спецификация становится центральным элементом процесса, а код генерируется на её основе.

Подробнее на сайте OpenSpec: Fission-AI/OpenSpec: Spec-driven development for AI coding assistants.

Установка и настройка OpenSpec

Для работы с OpenSpec требуется Node.js версии 20.19.0 или выше.​

Установка глобально через npm:

npm install -g @fission-ai/openspec@latest

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

openspec --version

Инициализация в проекте:

# Нужно будет выбрать Roo Code пункт

openspec init

После инициализации OpenSpec создаст в проекте необходимую структуру:

├───.roo
│   └───commands
└───openspec
    ├───changes
    │   └───archive
    └───specs

Настройка OpenSpec для SourceCraft Code Assistant

Для интеграции OpenSpec с SourceCraft Code Assistant необходимо выполнить следующие шаги:

1. Создать конфигурацию Roo Code:

Убедиться, что после openspec initсуществует папка .roo и файлы внутри

2. Переименовать промпты:

Переименуйте созданные файлы промптов из формата .roo в .codeassistant для совместимости с SourceCraft Code Assistant:

mv .roo .codeassistant

Эта конвертация позволяет использовать конфигурацию промптов, совместимую с форматом Roo Code, в SourceCraft Code Assistant

Видим, что можно использовать команды OpenSpec в AI-чате SourceCraft Code.

Заключение

Интеграция SourceCraft Code Assistant с OpenSpec даёт разработчикам в России доступный и легальный инструмент для Spec-Driven Разработки.

Простое переименование конфигурационных файлов из .roo в .codeassistant позволяет применять промпты OpenSpec, не смотря на то, что в изначальной поставки OpenSpec его нет.

Современная разработка приложений с использованием Supabase становится ещё эффективнее благодаря интеграции с ИИ-ассистентами через протокол MCP (Model Context Protocol). Эта технология позволяет подключать ваши Supabase проекты к различным ИИ-инструментам, таким как Cursor IDE, Windsurf (Codium), VS Code (Copilot) и другим.

Это руководство подготовлено на основе официальной англоязычной документации Supabase

Что такое MCP для Supabase?

Model Context Protocol (MCP) - это стандарт для подключения больших языковых моделей (LLM) к платформам, таким как Supabase. Это позволяет вашим ИИ-ассистентам напрямую взаимодействовать с базами данных, выполнять запросы и управлять проектами Supabase от вашего имени.

Преимущества использования MCP с Supabase

• 🔍 Прямой доступ к данным - ИИ-ассистент может читать структуру таблиц и данные
• 🛠️ Управление проектами - создание таблиц, миграций и функций через естественный язык
• 📊 Анализ схемы базы данных - получение рекомендаций по оптимизации структуры
• 🔄 Быстрое прототипирование - ускорение разработки благодаря автоматизации задач

Настройка Supabase MCP

Шаг 1: Создание персонального токена доступа (PAT)

Для начала необходимо создать персональный токен доступа в настройках Supabase:

1. Войдите в свой аккаунт на Supabase
2. Перейдите в раздел настроек вашего профиля
3. Выберите "Access Tokens"
4. Нажмите кнопку "Generate New Token"
5. Дайте токену имя, которое описывает его назначение (например, "Cursor MCP Server")
6. Скопируйте созданный токен - он понадобится для настройки MCP-сервера

⚠️ Важно: Сохраните токен в безопасном месте, так как он предоставляет доступ к вашим проектам Supabase.

Шаг 2: Настройка MCP в ИИ-инструментах

Настройка в Cursor IDE

1. Откройте Cursor IDE и создайте директорию .cursor в корне вашего проекта, если она не существует
2. Создайте файл .cursor/mcp.json, если он не существует, и откройте его
3. Добавьте следующую конфигурацию:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "<personal-access-token>"
      ]
    }
  }
}

Замените <personal-access-token> на ваш персональный токен доступа Supabase.

1. Сохраните конфигурационный файл
2. Откройте Cursor IDE и перейдите в Settings/MCP. После успешного подключения сервера вы увидите зеленый статус активности

Настройка в других инструментах

Для других ИИ-инструментов процедура настройки аналогична:

Windsurf (Codium):

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "<personal-access-token>"
      ]
    }
  }
}

Claude Desktop:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": [
        "-y",
        "@supabase/mcp-server-supabase@latest",
        "--access-token",
        "<personal-access-token>"
      ]
    }
  }
}

MCP для локальных экземпляров Supabase

Если вы используете локальный экземпляр Supabase, вы можете подключиться к нему с помощью Postgres MCP-сервера. Этот MCP-сервер выполняет все запросы как транзакции только для чтения.

Шаг 1: Найдите строку подключения к базе данных

Для подключения к локальному экземпляру Supabase вам необходимо получить строку подключения для вашей локальной базы данных. Вы можете найти её, выполнив команду:

supabase status

или если вы используете npx:

npx supabase status

Это выведет список сведений о вашем локальном экземпляре Supabase. Скопируйте поле DB URL из вывода.

Шаг 2: Настройте MCP-сервер

Настройте вашего клиента следующим образом:

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
    }
  }
}

Замените <connection-string> на вашу строку подключения.

Примеры использования

После успешной настройки MCP-сервера вы можете начать взаимодействовать с вашими проектами Supabase через ИИ-ассистента. Вот несколько примеров того, что вы можете делать:

Просмотр таблиц

Use Supabase

Покажи мне все таблицы в схеме public моего проекта Supabase и их структуру.

Просмотр данных

Use Supabase

Выведи по 3 записи данных в каждой существующей таблицы в public

Заключение

Интеграция Supabase с ИИ-инструментами через MCP значительно упрощает разработку и управление базами данных. Вы можете использовать естественный язык для взаимодействия с вашими проектами, что ускоряет процесс разработки и делает его более интуитивным.

MCP-сервер для Supabase открывает новые возможности для автоматизации задач, анализа данных и быстрого прототипирования, что делает разработку более эффективной и продуктивной.

Cовременной разработке веб-приложений значительную часть времени занимает тестирование пользовательского интерфейса и автоматизация повторяющихся задач. С появлением ИИ-ассистентов открываются новые возможности для оптимизации этих процессов.

Один из таких инструментов - Browser MCP, который позволяет ИИ-приложениям взаимодействовать с вашим браузером для автоматизации тестирования и выполнения различных задач.

Что такое Browser MCP?

Browser MCP - это сервер MCP (Model Context Protocol), который соединяет ИИ-приложения, такие как Cursor IDE, с вашим браузером. Это позволяет ИИ-ассистентам автоматизировать действия в браузере: заполнять формы, тестировать веб-приложения, собирать данные и выполнять другие повторяющиеся задачи.

Сценарии использования

Автоматизированное тестирование 🧪

Позволяет вашему ИИ-редактору автоматически тестировать ваш код end-to-end. Проверка пользовательских потоков, валидация элементов UI и обеспечение корректной работы приложения в различных сценариях.

Автоматизация задач ⚙️

Автоматизация повторяющихся веб-задач. От сбора данных и заполнения форм до автоматизации рабочих процессов - экономьте время и уменьшайте количество ошибок в повседневных операциях.

Доступные инструменты

Browser MCP предоставляет широкий набор инструментов для автоматизации браузера:

⚠️ Важное замечание: Некоторые веб-сайты могут иметь защиту от автоматизации или использовать сложные JavaScript-фреймворки, что может затруднить или сделать невозможным взаимодействие Browser MCP с элементами страницы. В таких случаях автоматизация может работать нестабильно или не работать вовсе.

• 🌐 Навигация - переход по URL
• ⬅️ Назад - возврат на предыдущую страницу
• ➡️ Вперед - переход на следующую страницу
• ⏱️ Ожидание - пауза на указанное время в секундах
• ⌨️ Нажатие клавиш - нажатие клавиш на клавиатуре
• 📸 Снимок - захват снимка доступности текущей страницы
• 👆 Клик - выполнение клика на веб-странице
• 👋 Наведение - наведение курсора на элемент страницы
• 🔤 Ввод текста - ввод текста в редактируемый элемент
• 🖥️ Логи консоли - получение логов консоли браузера
• 🖼️ Скриншот - создание скриншота текущей страницы

Настройка Browser MCP для Cursor IDE

Для использования Browser MCP в Cursor IDE необходимо выполнить несколько шагов:

1. Установка MCP-сервера

Добавьте конфигурацию MCP-сервера в настройки Cursor:

1. Откройте полные настройки Cursor
2. Перейдите на вкладку "MCP"
3. Нажмите "Add new global MCP server"
4. Добавьте следующую конфигурацию:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }
}

1. Нажмите кнопку обновления рядом с сервером "browsermcp", чтобы перезагрузить конфигурацию

Пример конфигурации MCP-серверов в Cursor

2. Установка расширения для браузера

Для работы Browser MCP требуется установить расширение для вашего браузера:

1. Перейдите на официальный сайт Browser MCP или установите расширение напрямую из Chrome Web Store
2. Нажмите "Add to Chrome" или установите расширение для вашего браузера
3. После установки закрепите расширение на панели инструментов для удобного доступа

1. Откройте расширение Browser MCP, нажав на значок в панели инструментов
2. Нажмите кнопку "Connect", чтобы подключить текущую вкладку к MCP-серверу

Важно: все действия по автоматизации будут выполняться только в подключенной вкладке.

3. Начало автоматизации

После настройки MCP-сервера и установки расширения вы можете начать использовать Browser MCP для автоматизации задач в браузере прямо из Cursor IDE.

Для этого в диалоге с ИИ-ассистентом просто опишите, что вы хотите автоматизировать, и ассистент сможет использовать Browser MCP для выполнения нужных действий.

Примеры использования

Автоматическое тестирование формы регистрации

Пожалуйста, протестируй форму регистрации на моем сайте:
1. Открой страницу регистрации
2. Заполни все поля формы
3. Нажми кнопку отправки
4. Проверь, что регистрация прошла успешно

Сбор данных с веб-страницы

Пожалуйста, собери заголовки всех статей с главной страницы новостного сайта example.com и составь список с краткими описаниями

Заключение

Browser MCP открывает новые возможности для автоматизации браузера с помощью ИИ-ассистентов. Этот инструмент значительно упрощает тестирование веб-приложений, автоматизацию повторяющихся задач и сбор данных из веб-источников.

Интеграция Browser MCP с Cursor IDE позволяет разработчикам использовать мощь искусственного интеллекта для более эффективной и продуктивной работы с веб-приложениями.

Особенно это удобно при разработке в Cursor IDE, где в диалоге с ИИ можно использовать внешний контекст - например, подключиться к базе данных и получать оттуда нужную информацию прямо во время общения. Это помогает быстрее находить ответы, писать код с учётом реальных данных и лучше понимать, что именно нужно разработчику.

Что такое MCP?

MCP (Model Context Protocol) - это открытый стандартный протокол, запущенный компанией Anthropic, который предоставляет разработчикам мощный инструмент для установления безопасных двусторонних соединений между источниками данных и инструментами, основанными на ИИ.

Чтобы лучше понять MCP, можно использовать простую аналогию: если ИИ подобен компьютеру, то MCP похож на USB-протокол, а серверы MCP - на различные USB-устройства (например, камеры, микрофоны и т. д.). Реализуя серверы MCP, мы можем легко подключать ИИ к различным источникам данных, существенно расширяя его функциональные возможности.

Настройка MCP-сервера

Cursor, редактор кода на базе искусственного интеллекта, теперь поддерживает MCP в качестве клиента. Это означает, что ИИ-ассистент Cursor'а может подключаться к внешним инструментам и источникам данных для расширения своих возможностей. Вы можете подключить сразу несколько серверов MCP, предоставив Cursor доступ к широкому спектру внешних инструментов.

По кнопке Add new global MCP Server мы можем редактировать конфигурацию MCP-серверов:

В объекте mcpServers мы делаем добавление описания MCP-серверов, как правило, в различных репозиториях есть инструкция, что требуется прописать для подключения.

Не всегда обязательно настраивать MCP-сервер глобально, можно так же добавлять их в рамках проекта в .cursor/mcp.json.

Настройка MySQL и MCP-сервера

Если в у вас не развернута СУБД, то вы можете для теста развернуть с помощью Docker.

Для Ubuntu, Debian, WSL, т.д. (с Mock-данными):

echo "
CREATE DATABASE IF NOT EXISTS mydatabase;
USE mydatabase;
CREATE TABLE IF NOT EXISTS users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);
INSERT INTO users (name, email) VALUES
  ('Alice', 'alice@example.com'),
  ('Bob', 'bob@example.com');
" > init.sql

docker run --name some-mysql \
 -e MYSQL_ROOT_PASSWORD=my-secret-pw \
 -v $(pwd)/init.sql:/docker-entrypoint-initdb.d/init.sql \
 -d -p 3306:3306 mysql:8.0

Необходимо будет установить Node.js, чтобы развернуть данную MCP. Настраиваем MCP-конфиг (вы можете указать в env ваши необходимые данные для доступа):

{
  "mcpServers": {
    "mysql": {
      "command": "npx",
      "args": [
        "-y",
        "@kevinwatt/mysql-mcp"
      ],
      "env": {
        "MYSQL_HOST": "127.0.0.1",
        "MYSQL_PORT": "3306",
        "MYSQL_USER": "root",
        "MYSQL_PASS": "my-secret-pw",
        "MYSQL_DB": "mydatabase"
      }
    }
  }
}

Проверяем, что загорелся положительный статус у MCP-сервера (В Output можно проверять логи MCP-серверов):

Используя в начале Use Mysql, мы делаем запрос в диалоговом окне и получаем необходимую информацию из Mysql базы данных:

Заключение

MCP открывает прямой доступ ИИ-ассистентов к MySQL и другим источникам данных. Cursor IDE поддерживает интеграцию через MCP-серверы.

С помощью Node.js и npm-пакетов можно быстро подключить MySQL, после чего ИИ будет выполнять запросы и работать с реальными данными. Это повышает точность, упрощает анализ и делает разработку более эффективной.

Тестовая статья :)