Плагин для Claude Code

Плагин FlutterFlow для Claude Code упаковывает работу с FlutterFlow в плагин и работает и в терминале Claude Code, и в десктопном приложении. После установки он:

• сам ставит FlutterFlow CLI при запуске сеанса, а если нет Dart SDK — показывает, откуда его взять, вместо того чтобы падать;
• безопасно сохраняет ключ API, читая его из буфера обмена один раз, — ключ не попадает в переписку;
• добавляет навык сборки (/flutterflow:build), который разворачивает рабочее пространство и на каждое изменение проходит цикл «разобраться → проверить → применить».

Под капотом это тот же FlutterFlow CLI, что описан в разделе про работу с ИИ-агентами. Если вы пользуетесь другим агентом — Gemini CLI, Codex — или предпочитаете настроить CLI и сервер MCP сами, идите туда: результат тот же.

Терминал или десктоп

Плагин ведёт себя одинаково в обоих случаях; отличаются только установка и запуск сеанса. Настройки у них общие, поэтому достаточно установить плагин один раз.

Терминал

1. Установите плагин двумя командами внутри сеанса Claude Code:

   /plugin marketplace add FlutterFlow/flutterflow-claude
   /plugin install flutterflow@flutterflow

   Или то же самое из оболочки:

   claude plugin marketplace add FlutterFlow/flutterflow-claude
   claude plugin install flutterflow@flutterflow

2. Начните новый сеанс из папки, где собираетесь работать. Это может быть готовое рабочее пространство FlutterFlow AI или папка, в которой оно будет создано:

   cd /path/to/your/projects
   claude

3. Опишите, что нужно сделать.

Если Claude Code уже был запущен во время установки плагина, начните новый сеанс — иначе навык сборки и автоматическая настройка не загрузятся.

Десктопное приложение

Здесь всё делается в самом приложении, без команд.

1. Откройте меню аккаунта в левом нижнем углу и выберите Settings.

   

2. В разделе Customize выберите Plugins.

   

3. Нажмите Add, затем Add marketplace.

   

4. В поле URL введите https://github.com/FlutterFlow/flutterflow-claude и выберите появившийся вариант.

   

5. В каталоге плагинов выберите Code, найдите в маркетплейсе flutterflow плагин FlutterFlow и нажмите + на его карточке.

   

6. Дождитесь сообщения FlutterFlow is installed and ready to use.

   

7. Закройте настройки, откройте вкладку Code и начните новый сеанс. Выберите окружение Local, укажите рабочую папку и опишите задачу.

Ключ API

Плагин авторизуется вашим ключом API FlutterFlow. Пока ключ не задан, при старте сеанса появляется напоминание:

[flutterflow] No FlutterFlow API key configured.
[flutterflow]   1) Copy an API key from https://app.flutterflow.io/account
[flutterflow]   2) Come back and tell Claude: "I copied my FlutterFlow API key"

Не вставляйте ключ в переписку — она сохраняется. Передайте его через буфер обмена:

1. Откройте страницу аккаунта FlutterFlow и скопируйте ключ. Если его нет, см. создание токена.
2. Вернитесь в Claude Code и скажите: «I copied my FlutterFlow API key».

Claude запустит вложенный в плагин скрипт: он один раз прочитает буфер обмена, проверит ключ, сохранит его в ~/.config/flutterflow/claude-env.sh с правами только для владельца и очистит буфер. В переписку ключ не попадает. Если проверка не прошла — например, вы успели скопировать что-то ещё, — Claude попросит повторить.

При работе по SSH или без графической оболочки передача через буфер недоступна: Claude предложит однострочную команду, которая спросит ключ со скрытым вводом. Второй вариант — выполнить flutterflow ai в своём терминале и ответить на вопрос мастера.

Сборка

Начните новый сеанс в рабочей папке: claude в терминале или сеанс Local в приложении. В первый раз плагин сам поставит FlutterFlow CLI и сообщит об этом:

[flutterflow] Installing the FlutterFlow CLI…

Дальше опишите задачу. Навык сборки включается сам на задачах, связанных с FlutterFlow, либо вызывается явно командой /flutterflow:build:

> Create a FlutterFlow app for tracking daily habits
> Add a profile page with an avatar, display name, and a settings list
> Change the primary color to teal and update the home page title

Внутри навык действует по строгой схеме:

1. Рабочее пространство. Убеждается, что оно есть (flutterflow ai init) и привязано к новому или существующему проекту. Если вы правите существующий, но не помните его идентификатор, Claude покажет список проектов аккаунта.
2. Разобраться. Читает проект до внесения изменений — командами status, inspect, resources, search.
3. Написать, проверить, применить. Описывает изменения декларативными файлами Dart, прогоняет flutterflow ai validate и только потом выполняет flutterflow ai run.

Каждое применённое изменение становится коммитом в истории проекта FlutterFlow.

Управление ключом

Смена ключа. Создайте новый ключ на странице аккаунта, скопируйте его и снова скажите Claude «I copied my FlutterFlow API key» — сохранённый ключ заменится.

Полное удаление. Удалите файл с ключом и сбросьте сохранённые учётные данные CLI:

rm -f ~/.config/flutterflow/claude-env.sh
flutterflow ai logout --all

Если ключ всё же попал в переписку, считайте его скомпрометированным: удалите его на странице аккаунта и создайте новый.

Обновление плагина

Установленный плагин следует за последней версией маркетплейса FlutterFlow. Для обновления выполните команду ниже (или /plugin marketplace update flutterflow внутри сеанса) и начните новый сеанс. Обновление действует и для терминала, и для приложения:

claude plugin marketplace update flutterflow

Решение проблем

echo 'export PATH="$HOME/.pub-cache/bin:$PATH"' >> ~/.zshrc