Transcription
Привет, я Брэндон из Copilot Kit. Сегодня я хотел бы показать вам наш шаблон для создания мощных AGUI-холстов с использованием Langraph и Python.
Стартовый шаблон AGUI-холста Copilot Kit Langraph демонстрирует, как создавать готовые к производству AI-приложения, которые поддерживают согласованное состояние между пользовательским интерфейсом и AI-агентом. Это решает распространенные проблемы, такие как AI-галлюцинации между состоянием пользовательского интерфейса, состояния гонки между пользовательскими правками и обновлениями AI, сложные многошаговые операции с отслеживанием прогресса и поддержание истинности в распределенных системах.
Метафора холста, которую мы используем в этом шаблоне, идеально подходит для демонстрации крауд-операций, синхронизации в реальном времени и сложного управления состоянием. Это шаблон, который может быть адаптирован для управления проектами, CRM-систем, инструментов создания контента и многого другого.
Этот шаблон обеспечивает первоклассную двустороннюю синхронизацию состояния между AI и пользовательским интерфейсом, показывает, как создать холст-приложение с поддержкой AI и обновлениями в реальном времени, демонстрирует многошаговое планирование и визуальное отслеживание прогресса, а также решает проблему истинности в AI-приложениях.
Чтобы начать, нажмите кнопку "Использовать этот шаблон" в правом верхнем углу репозитория и нажмите "Создать новый репозиторий". Здесь вы можете настроить параметры для вашего нового репозитория, который вы собираетесь создать. Вы начинаете с этого шаблона, который мы только что выбрали. Вы можете выбрать, включать ли какие-либо другие ветки, кроме основной ветки. Вы можете выбрать, под каким владельцем будет находиться репозиторий, либо ваш пользователь, либо организация, частью которой вы являетесь, имя для этого репозитория, необязательное описание, хотите ли вы, чтобы он был публичным или приватным, и необязательно вы всегда можете предоставить подсказку для GitHub Copilot.
Для нашего примера я просто назову это AGUI Canvas и создам репозиторий.
Теперь, когда мы успешно сгенерировали новый репозиторий, используя наш шаблон, мы можем прокрутить вниз до раздела "Начало работы" этого репозитория и следовать инструкциям.
Во-первых, мы хотим установить все наши зависимости, используя PNPM install или любой другой установочный скрипт для вашего предпочтительного менеджера пакетов. Это установит все модули узлов, а также зависимости Python, используя наш скрипт post install, который управляет Python-частью наряду с нашими обычными установками модулей узлов.
После завершения этого вы хотите добавить свой ключ API OpenAI в ваш файл ENV в каталоге agent, что вы можете сделать, следуя этому скрипту здесь.
И, наконец, вы захотите запустить ваш локальный сервер разработки. Вы можете сделать это просто, используя скрипт dev, но вы также можете разделить пользовательский интерфейс от агента, если хотите, запустив dev: ui и dev: agent.
После того, как вы запустили ваш локальный сервер разработки, вы можете посетить демо по адресу localhost:3000 и немедленно начать отправлять запросы.
Для этого примера я буду использовать подсказку, которая требует от агента выполнения нескольких шагов, чтобы я мог продемонстрировать, как агент может создавать шаги. Таким образом, для этого процесса он попытается создать карточку проекта, карточку сущности, карточку заметки и карточку диаграммы, а затем добавить детали к каждой из них.
Таким образом, мы видим, что карточка проекта завершена, карточка сущности завершена, и она переходит к карточке заметки и карточке диаграммы. Иногда это занимает секунду, поэтому я ускорю это.
Хорошо. Итак, теперь мы можем видеть, что агент выполнил шаги, которые мы запросили. Он создал все четыре эти карточки. И эти карточки существуют не только здесь, в пользовательском интерфейсе, но мы также можем видеть активное состояние пользовательского интерфейса здесь в формате JSON.
Таким образом, когда агент или пользователь изменяет эти данные, например, если я изменю это на "Project Beta", я активно увижу, что это отражено здесь. И агент держит то же состояние. Каково теперь название нашей карточки проекта? Project Beta обновлено из-за обновления пользователя.
Некоторые дизайнерские философии, которые мы преследовали здесь, были "состояние прежде всего". Таким образом, агент всегда использует общее состояние как источник истины, который никогда не кэшируется. Строгое обоснование для предотвращения галлюцинаций о содержимом холста. Управление циклом для предотвращения бесконечных операций и "человек в цикле" для запроса, когда операции неоднозначны.
Итак, если бы я попросил агента создать новый элемент. Теперь агент распознает, что элемент может быть одного из четырех типов. Проект, сущность, заметка или диаграмма, и просит меня указать. Итак, если я скажу "диаграмма" сейчас, мы увидим новый элемент диаграммы, добавленный к нашим данным прямо здесь, внизу. Элемент 00005, который мы также увидим отраженным в пользовательском интерфейсе.
Теперь давайте вернемся к репозиторию и глубже рассмотрим, что происходит "под капотом".
Если мы посмотрим на файл README, мы увидим краткий обзор архитектуры того, как это приложение фактически построено и организовано. У нас есть фронтенд, обрабатываемый Nex.js, где у нас есть файл page.tsx, который управляет большей частью состояния и извлекает различные компоненты, а затем мы передаем это через среду выполнения Copilot нашему агенту Langraph, который находится в файле agent.py, который управляет его инструментами, состоянием агента и состоянием Copilot Kit и использует GPT40 в качестве своей модели. Мы также можем увидеть краткий обзор того, как происходит поток данных.
Теперь давайте посмотрим на код. Вы можете увидеть в исходном коде нашего проекта, что у нас есть каталог source app, который содержит большую часть исходного кода нашего клиентского приложения, ориентированного на пользователя, и каталог agent, который обрабатывает код агента для нашей Python-реализации Langraph.
Итак, если я посмотрю на agent.py, вы увидите здесь все, что касается наших инструментов для планирования, наших шагов обоснования, как мы интерпретируем информацию от клиента и передаем ее нашему агенту. И здесь много говорится об обосновании и о том, как мы определяем, что является источником истины. Большую часть этого вы можете просто просмотреть и увидеть, как это настроено.
И мы перейдем к файлу page.tsx. Теперь, сразу же, вы увидите, что мы используем несколько хуков из Copilot Kit. Мы используем use-co-agent для настройки состояния нашего агента. Мы используем use-copilot-action для настройки наших клиентских инструментов. Мы используем use-co-agent-state-render для рендеринга нашего процесса, нашего плана между этими шагами, когда мы работаем над планом. Дополнительные инструкции для добавления дополнительного обоснования агенту и использования langraph-interrupt для запроса информации у пользователя перед продолжением в случае неоднозначности, как мы видели в демо.
В дополнение к этим хукам, мы также используем несколько компонентов из Copilot Kit. Мы используем C-pilot chat и copilot popup реактивно для переключения между опытом боковой панели чата, используя copilot chat в настольных приложениях, и всплывающим окном copilot для всплывающего опыта на мобильных устройствах, когда места не так много.
Мы используем несколько UI-компонентов из shadcn UI, а также некоторые из наших собственных компонентов для управления различными частями этого приложения.
В дополнение к UI-специфическим компонентам, мы также управляем нашим состоянием в различных частях нашего холста в каталоге lib/canvas/state. Итак, если мы посмотрим на это, мы увидим файл state.ts, где мы управляем тем, как выглядит состояние и различными параметрами.
И переходя к нашим типам. Это TypeScript-типы, которые мы используем во всем нашем проекте в нашем файле страницы, а также в других TypeScript-файлах для таких вещей, как элементы списка дел, элементы ссылок, данные проекта, данные сущности, данные заметки, метрики диаграмм, данные диаграмм, данные элементов и т. д. Это все различные типы, которые мы используем для наших типов элементов, для подтипов элементов и всего остального, что мы бы использовали, связанного с холстом.
В частности, наш файл updates.ts предоставляет основные функции как для функций, вызываемых пользователем в пользовательском интерфейсе приложения, так и для действий, которые мы создаем для агента. Таким образом, оба используют один и тот же источник истины, одни и те же функции для внесения изменений в это приложение, для создания и обеспечения согласованности между действиями агента и действиями пользователя.
Теперь очень важно, когда вы впервые настраиваете этот репозиторий, убедитесь, что вы создали файл env.local. Итак, это берет тот же файл env.local.example и дублирует его без суффикса .example и заполняет его вашим общедоступным ключом API Copilot Cloud, если вам нужен доступ к Copilot Cloud.
И аналогично, вы также хотите убедиться, что вы заполнили свой файл .env в каталоге agent. Итак, здесь вы добавите свой ключ API OpenAI, свой ключ Langchain и URL-адрес разработки Langraph. Все это будет очень важно при развертывании этого приложения.
Мы надеемся, что этот шаблон послужит прочной основой для ваших AGUI-холст-приложений. Если у вас есть идеи по улучшению или вы столкнулись с какими-либо проблемами при использовании шаблона, пожалуйста, не стесняйтесь открыть проблему или запрос на вытягивание в исходном репозитории. Мы не можем дождаться, чтобы увидеть, что вы