Transcription
В этом видео я покажу, как создать полнофункциональное AI-приложение, используя Co-agents из Copilot Kit, а также Python-архитектуру, построенную в LangChain. К концу видео у вас будет приложение Next.js с помощником для исследований. Вы сможете задавать исследовательские вопросы и задавать уточняющие вопросы в панели Copilot справа, и оно будет генерировать черновик. Можно использовать модели от OpenAI, Anthropic или Google. В примере я задал вопрос: «Как новый квантовый чип Google Willow повлияет на безопасность Bitcoin?». Это не столько о самом вопросе, сколько о демонстрации того, как создать собственный инструмент для генерации исследовательских черновиков.
В техническом плане вы сможете добавлять собственные ресурсы. Если вы не добавите ресурсы, приложение будет использовать данные из Tav — нашего поискового API. Tav — это то, как мы разбиваем запрос и получаем актуальную информацию для ответа и самого приложения. В этом примере я покажу, как настроить это с помощью ключа API OpenAI.
Несколько организационных моментов: этот пример использует Python версии 3.12 или выше для бэкенд-архитектуры LangChain. Для UI-слоя (Next.js) убедитесь, что у вас установлена последняя версия Node.js. Ссылка на репозиторий будет в описании. Вся необходимая информация для начала работы находится в файле README.md.
Приложение состоит из UI-слоя (Next.js) и агентной архитектуры. Они работают независимо. UI можно развернуть везде, где работает Next.js. Агентную архитектуру можно развернуть там, где работает Python, или в LangChain Studio (бета-версия, доступна при оплаченной подписке LangSmith).
Сначала в UI-слое добавим ключ OpenAI в переменные окружения (.env): `OPENAI_API_KEY`. Для агентной архитектуры также создадим .env файл с ключами: `TAV_API_KEY` и `OPENAI_API_KEY`.
В UI части приложения (Next.js) выполните `npm install`. Зависимости включают Copilot Kit, библиотеки стилей, OpenAI и другие (Tailwind CSS). Создадим маршрут `/api/copilot-kit` и файл `route.ts`.
В `route.ts` импортируем зависимости из Copilot Kit и OpenAI, инициализируем OpenAI, настраиваем адаптеры и ключ API LangSmith (для трассировки). Эндпоинт будет обрабатывать POST-запросы с параметрами поиска и URL развёртывания LangChain агента. LangSmith используется для трассировки и отладки. Здесь мы настраиваем агентов, например, Research Agent. Переменная окружения `REMOTE_ACTION_URL` указывает на URL развёртывания Python-агента. Эти части могут быть развёрнуты независимо (например, Next.js на Vercel, а Python-агент на Render). Инициализируем Copilot Kit runtime, обрабатываем запросы и отправляем ответы в UI.
В `page.tsx` создадим клиентский компонент, импортируем зависимости из Copilot Kit и другие компоненты. Это одностраничное приложение. Layout Next.js мы не изменяем. Загружаем зависимости, включая Copilot Kit, и компоненты, которые будут показаны далее. Здесь будет компонент выбора модели и компонент `Home`.
`Home` компонент — основной, содержащий дочерние компоненты. Он использует `useSelectorContext` для доступа к состоянию агента. Состояние агента передаётся как пропсы в компоненты Copilot Kit.
В `main.tsx` импортируем `ResearchCanvas` и другие зависимости из Copilot Kit, получаем типы для состояния агента и контекст выбора модели. Инициализируем начальное состояние приложения: логи, отчеты, исследовательский вопрос и т.д. Можно задать начальные значения для этих переменных. Зададим примерный начальный чат-подсказку (про продолжительность жизни пингвинов). Рендерим заголовок, `ResearchCanvas`, стили и чат Copilot (правая панель).
Компоненты Shadcn UI мы рассматривать не будем. Рассмотрим основные: `ResearchCanvas`, `Progress`, `ModelSelector`, `AddResourceDialog`, `EditResourceDialog` и `Resources`.
В `ResearchCanvas` используем `useClient`, получаем контекст, инициализируем состояние co-agent и создаём вспомогательные функции для отображения состояния UI (например, индикатор загрузки, если нет данных в логах). `useCopilotAction` обрабатывает подтверждение удаления ресурса. Tav-ответы могут передаваться потоком или вручную. Функции для добавления и удаления ресурсов. Обработчик клика на карточке и функция обновления ресурса. Рендерим исследовательский вопрос, поле ввода, список ресурсов, диалоговые окна редактирования и добавления ресурсов, и черновик исследования (текстовое поле с markdown-ответом от агента).
`Progress.tsx` отображает промежуточное состояние на основе логов, визуализируя шаги запроса (поиск веб-страниц).
`ModelSelector` позволяет выбирать модель (OpenAI, Anthropic, Google).
`AddResourceDialog` — диалоговое окно для добавления ресурса (URL, заголовок, описание).
`EditResourceDialog` — диалоговое окно для редактирования ресурса.
`Resources.tsx` — компонент для отображения списка ресурсов (карточки с заголовками).
Утилиты: функция обрезки URL, файл типов (состояния агента), `ModelSelectorProvider`.
Для запуска приложения: `npm run dev`. Скрипты сборки и запуска находятся в `package.json`.
Перейдём к агентной архитектуре (LangChain). Можно импортировать пример в LangChain Studio (нужны LangChain Studio и Docker). Можно развернуть на LangChain Cloud (бета). Конфигурационный файл для развёртывания находится в репозитории. Создадим .env файл с ключами OpenAI и Tav API. Выполните `poetry install` и `poetry run demo`. Для запуска всего приложения: `pnpm dev && poetry demo`.
Главный файл агента содержит импорт библиотек и компонентов LangChain. Инициализируем граф `Workflow`. В LangChain мы создаём узлы и связи между ними. Мы импортируем логику из отдельных файлов (например, `chat.py`).
Функция получает состояние сообщений (пользователя и AI), определяет наличие вызова инструмента (search, delete или chat). Инициализируем `Memory` для checkpointing. Определяем связи между узлами (download, chat, search, delete). Компилируем граф.
Файл `server.py` — FastAPI сервер, который общается с Next.js сервером. Он находится поверх LangChain архитектуры. Здесь настраиваются research agents, маршруты и эндпоинты (включая health check). Сервер запускается на 8000 порту.
`state.py` содержит определение состояния (ресурсы, логи, состояние агента).
`model.py` содержит выбор и настройку модели (OpenAI, Anthropic, Google). Нужно указать соответствующие ключи API в переменных окружения.
`chat.py` — главный узел. Определяет инструменты для research agent, настраивает конфигурацию и промежуточные состояния, инициализирует переменные состояния, обрабатывает ресурсы, выбирает модель и вызывает её. Функции вызова инструментов (function calling) позволяют использовать инструменты в зависимости от запроса. Определяет системное сообщение с инструкциями, отправляет контекст (вопрос, отчет, ресурсы) в модель, обрабатывает ответы и вызовы инструментов.
`delete.py` удаляет ресурсы из состояния агента.
`download.py` скачивает и обрабатывает веб-страницы, используя Tav API. Извлекает текст из HTML, обрабатывает ресурсы, ведёт лог.
`search.py` использует Tav API для поиска ресурсов, делает несколько запросов, извлекает 3-5 наиболее релевантных результатов, обрабатывает их и обновляет состояние.
В заключение, я надеюсь, что вы поняли, как работают LangChain, Copilot Kit и как создавать новые приложения с их помощью. Больше не просто вход/выход текста, а взаимодействие с контекстом приложения на естественном языке.