Transcription
Что происходит, все? Это Брейс из LangChain, и я очень рад показать вам сегодня интерфейс чата агента. Это приложение React и Next.js, которое мы разработали, чтобы позволить любому подключаться к своему графу LangChain или любому развертыванию графа LangChain, будь то локальный или производственный развернутый граф. И пока у него есть ключ сообщений, вы можете взаимодействовать с ним с помощью этого интерфейса через интерфейс, подобный чату. Он также поддерживает отображение вызовов инструментов и Human Loop. Сейчас я покажу, как подключиться к локальному развертыванию.
Сначала я перейду в свой терминал и запущу pnpm agent, чтобы запустить своего локального агента, который затем работает по адресу HTTP localhost:2024. Я установлю идентификатор графа в chat. Затем нажму «Продолжить». Это будет указывать на простой агент чата, который просто отправляет простой вызов LM, OpenAI. Я могу сказать что-нибудь вроде: «Почему небо голубое?» И теперь я нажимаю «Отправить», и мы видим, что он возвращает мне простой текстовый ответ. Поскольку мы используем LangChain, мы получим доступ ко всем замечательным функциям путешествия во времени, форкинга и так далее. Поэтому я могу нажать кнопку обновления, и это пере запустит граф с этой точки в состоянии, и он даст мне новый результат. Затем я могу переключаться между этими двумя форками. Я также могу редактировать это начальное, начальное сообщение и сказать что-нибудь вроде «Привет», и это отредактирует эту точку в состоянии, отправит новое сообщение, и я снова могу переключаться между любыми из этих форков в любой момент времени. Я также могу просмотреть все прошлые чаты и создать новые чаты.
Теперь, когда я закончил с этим, я могу просто очистить программы запросов и установить его на новый граф. Я собираюсь установить его на email agent. Это простая реализация, которую я сделал для того, что вы бы использовали для создания фактического помощника по электронной почте, и он использует Human Loop. Мы используем стандартную схему прерывания человеком, которая экспортируется из библиотеки LangChain, и это способ вызвать функцию прерывания, которая приостанавливает ваш граф, передавая эту конкретную схему. И когда интерфейс чата агента обнаруживает, что вы интерпретировали свой граф с помощью этой схемы, он отобразит интерфейс, который позволяет пользователям редактировать, проверять и отвечать на ваш граф на основе этого прерывания. Я могу сказать что-нибудь вроде: «Напишите мне электронное письмо Брейсу из LangChain о том, насколько мне нравится интерфейс чата агента». Мы видим, что он вызывает инструмент «Написать электронное письмо», генерируя эти поля для темы, тела и получателя, а затем вызывает функцию прерывания с этой конкретной схемой, и интерфейс чата агента смог определить, что схема прерывания человеком была передана, и он отображает этот приятный интерфейс для взаимодействия с этим прерыванием.
Мы видим, что здесь я разрешаю редактирование, принятие, ответ и игнорирование этого элемента прерывания. Я также могу проверить состояние и развернуть его, чтобы увидеть текущее значение состояния моей темы. Я могу посмотреть описание, если оно было определено, в моем случае оно было, где я могу видеть тему, получателя и тело и так далее. А теперь я могу, скажем, хочу ответить на это. Это ваше имя, и я хочу сказать: «Меня зовут Марк», обновить завершение. Затем я нажимаю «Отправить», и он отправит ответ типа «ответ» на прерывание, которое затем перепишет мое электронное письмо, теперь передавая Марка как завершение и прерывание снова, поэтому я могу утвердить его или попросить внести больше изменений. Мне нравится то, что он показывает, там есть Марк, поэтому я нажимаю «Принять», и он отправит тип «принять» прерыванию. Вот как вы будете взаимодействовать с сайтом чата, используя только простые вызовы инструментов чата и результаты инструментов, а также Human Loop.
Теперь давайте поговорим о разных способах доступа к этому сайту. Первый, конечно же, agentchat.reel.app, это развернутый сайт. Вы можете подключаться к любому графу, локальному или развернутому, но мы также открыли исходный код, поэтому вы можете клонировать его в репозитории GitHub интерфейса чата агента. И третий способ — через npx create agent chat app. Сейчас я покажу вам, как вы можете сделать это локально, и это просто импортирует весь код, который отображает это веб-приложение локально на вашем компьютере, чтобы вы могли его редактировать, вносить изменения или просто запускать приложение локально. Я в своем терминале, и я собираюсь запустить npx create agent chat app, нажать Enter. Он спросит меня, хочу ли я установить его, я скажу «да». После установки он предложит мне, как я хочу назвать его, я просто приму значение по умолчанию agent chat app, нажму «Отправить», а затем он клонирует весь этот репозиторий локально. Я запущу pnpm install, чтобы установить зависимости, и пока это происходит, мы можем открыть его в моем IDE, и мы видим, что он успешно импортировал все разные компоненты кода и остальной код, который мне нужен, чтобы отобразить и запустить это приложение локально.
Установка завершена, и теперь я могу запустить pnpm dev, который запустит это приложение локально. Затем я открою его в своем браузере, и после секунды, так как первая загрузка всегда занимает секунду, он загрузит точно такое же приложение, которое мы видели там. Теперь это работает. Я покажу вам, как вы можете подключиться к развернутому графу, а не к локальному. Сначала я перейду к одному из графов, которые я развернул в LangSmith. У меня есть это развертывание сервера инструментов React Agent. Я скопирую его и вставлю в свой URL развертывания. Идентификатор графа — Agent, и у меня установлен мой API-ключ LangSmith, потому что это производственное развертывание. Затем я нажимаю «Продолжить», и я могу написать сообщение, например: «Какая погода в Нью-Йорке?» Я нажимаю «Отправить». Мы видим, что он скажет, что он поможет мне проверить погоду, затем он вызовет функцию get weather с городом Нью-Йорк и получит фактическую погоду. Это результат инструмента, это вызов инструмента. Мы видим, что он суммирует это здесь. Вот как вы подключаетесь к URL развертывания, запускаете его локально, используете команду npx create agent chat app, используете развернутый сайт по адресу agentchat.reel.app, и, конечно же, все ссылки на все, что я упомянул в этом видео, будут в описании. Надеюсь, вам всем понравилось, и увидимся в следующем видео.