Compose Hot Reload

Добавление Compose Hot Reload в проект

Compose Hot Reload можно добавить двумя способами:

• создать проект с нуля в IntelliJ IDEA или Android Studio

• добавить плагин Gradle в существующий проект

Использование Compose Hot Reload

1. В исходном наборе desktopApp откройте файл main.kt и обновите функцию main():

   fun main() = application {
       Window(
           onCloseRequest = ::exitApplication,
           alwaysOnTop = true,
           title = "composedemo",
       ) {
           App()
       }
   }
   

   Если присвоить переменной alwaysOnTop значение true, созданное настольное приложение будет располагаться поверх всех окон, что упростит редактирование кода и просмотр изменений в реальном времени.

2. Откройте файл App.kt и обновите компонуемый элемент Button:

   Button(onClick = { showContent = !showContent }) {
       Column {
           Text(Greeting().greet())
       }
   }
   

   Теперь текст кнопки задается функцией greet().

3. Откройте файл Greeting.kt и обновите функцию greet():

    fun greet(): String {
        return "Hello!"
    }
   

4. Откройте файл main.kt и нажмите значок Запуск на поле слева от кода. Выберите Запустить 'desktopApp' с Compose Hot Reload.

   

   

5. Измените строку, возвращаемую функцией greet(), а затем сохраните все файлы (⌘ S/Ctrl+S), чтобы увидеть, как настольное приложение обновится автоматически.

   

   Также можно запустить перезагрузку вручную, нажав назначенную клавишу быстрого доступа или кнопку Перезагрузить интерфейс. Изменить поведение запуска можно на странице Настройки | Инструменты | Compose Hot Reload.

Поздравляем! Вы увидели Compose Hot Reload в действии. Теперь можно экспериментировать с изменением текста, изображений, форматирования, структуры интерфейса и многого другого, не перезапуская конфигурацию запуска настольного приложения после каждого изменения.

Сервер MCP для ИИ-агентов

Начиная с Compose Multiplatform 1.12.0, Compose Hot Reload включает встроенный сервер Model Context Protocol (MCP). Сервер MCP позволяет ИИ-агентам для программирования взаимодействовать с работающим приложением Compose: запускать Compose Hot Reload, просматривать отрисованный интерфейс, изучать семантическую структуру, имитировать пользовательский ввод и читать журналы выполнения. Если приложение открывает несколько окон, агент может вывести их список и выбрать любое из них.

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

{
  "mcpServers": {
    "compose-hot-reload": {
      "command": "./gradlew",
      "args": [
        "--no-daemon",
        "--quiet",
        "--console=plain",
        "hotMcpServer"
      ]
    }
  }
}

Получение помощи

Если у вас возникли проблемы при использовании Compose Hot Reload, сообщите нам о них, создав задачу на GitHub.