Чат-бот, що знає, що читає: як уникнути “вигадок” штучного інтелекту
Коли ви звертаєтеся до свого розумного помічника, очікуючи швидкої та точної відповіді, це вражає, чи не так? Але чи завжди ви задумуєтесь, звідки береться інформація? Чи не видає він її за власною ініціативою? Дослідник чи аналітик завжди може продемонструвати джерела, а як щодо ШІ?
Велика проблема систем Retrieval Augmented Generation (RAG) полягає в тому, що ми часто не знаємо, звідки ваш ШІ-агент черпає інформацію. Чи не “галюцинує” він? Чи не бере він нісенітниці з нерелевантних документів? І перелік цитат – теж не ідеальний варіант, адже агенти вміють їх вигадувати.
Нещодавно мій друг, розробник, показав мені те, що змусило мене відкласти каву: рішення цієї проблеми. Він створив RAG-агента з функцією “людина в циклі” для перевірки джерел. Тобто, користувачі бачать інформацію, яку дає база знань, можуть схвалювати її або відхиляти, і тільки потім агент синтезує відповідь. Це як мати власного цензора для ШІ! Повний контроль та нагляд, і це дійсно потужно.
Я реалізував такого агента за допомогою Copilot Kit і Pydantic AI. Зараз я покажу, як це виглядає зсередини. Але спочатку, давайте я швидко продемонструю, як він працює.
Знайомство з “розумним” агентом
Він має доступ до бази знань з інформацією про різні компанії, що займаються штучним інтелектом. Зараз я перезавантажу розмову та задам питання. Запитання таке: “Яке останнє фінансування OpenAI?”
Я надсилаю запит. Перш ніж буде відповідь, з’являться блоки інформації. Агент розпізнає: “Окей, вибери джерела, які ти хочеш використати для відповіді, а потім попроси мене продовжити”. Я можу вибрати шматки інформації, які потрібні. Або навіть натиснути на них, щоб переглянути, що саме було взято з бази знань. Ось така прозорість, якої не вистачало! Навіть використання цього як інструменту для налагодження та вдосконалення ваших RAG-агентів – це надздібність.
Я обираю кілька блоків і можу запитати: “Які саме джерела я обрав?” І ви побачите синхронізацію між агентом на бекенді та нашим фронтендом. Він знає про три обрані джерела. Інші поки що залишаються “відхиленими”.
Тепер я кажу: “Так, дай відповідь”. І ми отримаємо фінальну відповідь, але вона базуватиметься виключно на тому, що ми обрали. Це інший рівень контролю. І, зізнаюся, не найпростіший в реалізації. Ця синхронізація між діями на фронтенді та тим, що робить агент на бекенді, – вражає.
Коли знаєш, звідки “росте” відповідь ШІ
Уявіть, що ви розслідуєте справу і вам потрібно мати всі докази. А ваш слідчий каже: “Я знаю, хто це зробив!” Але на питання: “Звідки ти це взяв?” – він лише знизує плечима. Ненадійно, чи не так?
Саме цю проблему ми вирішуємо. Цей агент дає змогу бачити “сліди” – шматки інформації, які він знайшов. І ми, як досвідчені детективи, можемо вибрати, які з цих слідів варті уваги, а які – випадковий шум.
Цікаво знати: Чому це називається “людина в циклі” (human in the loop)? Тому що саме людина, тобто ви або я, приймаємо остаточне рішення, які дані використовуватиме штучний інтелект для формування відповіді. Це як давати рецепт шеф-кухарю, але спочатку показати йому всі інгредієнти з базару та дати можливість обрати лише найсвіжіші.
Як це працює? Технічні деталі
Для цього нам знадобилися дві основні складові: Copilot Kit для фронтенду і Pydantic AI для агента на бекенді.
Copilot Kit дає змогу створювати “агентський досвід”. Можна також назвати це “генеративним інтерфейсом” (generative UI). Він дозволяє вашому ШІ-агенту не просто показувати відповіді, а й взаємодіяти з інтерфейсом користувача. І навпаки, ми можемо змінювати стан агента з інтерфейсу. Це означає, що агент глибоко інтегрований у ваш додаток. І я вірю, що це майбутнє веб-розробки, включно з SaaS-платформами.
Команда Copilot Kit також створила протокол AGUI. Він дозволяє з’єднати будь-який додаток з будь-яким ШІ-агентом. У нашому випадку, додаток Copilot Kit з’єднаний з агентом Pydantic AI. І тут найцікавіше: майже будь-який фреймворк для агента (LangGraph, CrewAI, MetaGPT, AutoGen) підтримує AGUI. В їхній документації є інструкції, як це зробити.
Наприклад, Pydantic AI має сторінку, де показано, як легко взяти будь-якого агента Pydantic AI і зробити його доступним як API, сумісний з AGUI. А потім під’єднати його до вашого додатку Copilot Kit.
Збираємо все докупи: хук useAgent
Ось ми переходимо до найцікавішого: як це об’єднується? Це заслуга хука useAgent, який випустила команда Copilot Kit. Саме він – зірка нашого шоу!
Що він робить? Він дає нам об’єкт агента. Ми маємо прямий доступ до агента на фронтенді, але агент безпечно працює як API на бекенді. Тепер ми можемо керувати станом агента, отримувати оновлення в реальному часі, керувати історією розмов – усе прямо з фронтенду. І оскільки він використовує AGUI, ми можемо під’єднатися до будь-якого агента, незалежно від того, як він був створений і яким фреймворком користувалися.
Як вони самі це називають: “Ми можемо отримувати доступ і взаємодіяти з прямими LLM-агентами безпосередньо з React-компонентів”. І це те, чого мені завжди бракувало! Ми могли б побудувати такі рішення для синхронізації вручну, але це складна задача. І ви це зрозумієте, коли ми заглибимося в RAG-агента. Проблема, яку ми вирішуємо, непроста, але наше рішення доволі просте завдяки хуку useAgent.
Він дає прямий доступ до інформації про нашого агента, навіть якщо він зараз працює чи ні. Ми можемо мати оновлення в реальному часі, коли чекаємо на відповідь. Можемо переглядати історію розмов і керувати нею на фронтенді. Працювати з внутрішнім станом, який він використовує для викликів інструментів, навіть змінювати цей стан, щоб наступного разу, коли він викличе інструмент, стан вже був змінений. Така глибока інтеграція робить наш додаток чутливішим та швидшим, бо ми постійно отримуємо відгук.
Наш RAG-агент: як це працює “в полі”
Тепер, коли ми знаємо про всі компоненти, давайте заглибимося в наш RAG-агент і як він працює. Звісно, це повністю відкритий репозиторій на GitHub [посилання]. Я залишу його в описі, якщо ви захочете спробувати цього агента самі. Усе безкоштовно, окрім великої мовної моделі, яку вам потрібно буде підключити на бекенді.
Давайте ще раз перезапустимо розмову і поставимо нове запитання: “Розкажи про інвестиції Amazon в Anthropic”.
Я хочу швидко показати вам можливості, а потім розібратися, як усе це працює разом з хуком useAgent та нашим агентом Pydantic AI.
Перш за все, ми можемо вибирати різні джерела. Можемо зняти вибір або вибрати все. Коли я роблю зміни, вони синхронізуються з нашим агентом на бекенді в реальному часу. Наприклад, я виберу лише один шматок. Запитаю: “Яке джерело я обрав?” Ось, він каже: “Chunk one, Cloud AI Wars”. Чудово. Він одразу знає, що я роблю на фронтенді.
Тепер я кажу: “Гаразд, чудово. Дай мені резюме, яке базується тільки на цьому”. Я надсилаю запит, і, якщо подивитися на бекенд-логи API, ми побачимо, що для схвалених ID шматків є лише один – номер один, з документу під назвою “Cloud AI Wars”. І ось тут: “AWS зробив значну інвестицію в розмірі 8 мільярдів доларів у Anthropic”. Я б теж хотів, щоб в мене інвестували 8 мільярдів, але ось така відповідь. Це наша відповідь, яка базується виключно на цій частині інформації. Ми навіть можемо клікнути, щоб побачити, звідки саме ми це взяли. Так, 8 мільярдів доларів інвестицій від Amazon Web Services в Anthropic.
Якби ми обрали шматок, який не містить цієї інформації, він би прямо сказав нам про це, бо він використовує тільки те, що ми схвалили для генерації відповіді. Уявіть собі: це як наші рекомендації, а ми вже вирішуємо, що саме він буде використовувати.
Діаграма: Розкладаємо все по поличках
І, звісно, для кращого розуміння, у мене є чудова діаграма Excalidraw, яка пояснює, як усе це працює на високому рівні. А потім я трохи заглиблюся в код. Але зараз я хочу залишитися на відносно загальному рівні, говорячи про те, як усе це взаємодіє.
Отже, спочатку у нас є наш бекенд-агент. Це інструмент Pydantic AI для пошуку в нашій базі знань. Якщо ви працювали з Pydantic AI, ви знаєте, як працюють залежності. Це залежності, які ми “впорскуємо” в нашого агента для всіх викликів інструментів та станів. Саме це ми синхронізуємо в реальному часі з нашим фронтендом за допомогою AGUI. Це доступно як ще одна з залежностей нашого агента.
Ми надсилаємо перший запит, щоб попросити агента пошукати в базі знань. Він виконує цей інструмент, і інструмент повертає подію “state snapshot event”. Це подія, яка транслюється на фронтенд. Тож фронтенд знає, які саме шматки показати користувачеві для отримання схвалення.
Тепер, на нашому фронтенді, наш хук useAgent – зірка шоу. Він під’єднаний до нашого RAG-агента за допомогою Copilot Kit, вказуючи на API-ендпоінт для Pydantic AI агента. І коли ми викликаємо цей RAG-інструмент, він повертає нам той самий state snapshot event. Ми отримуємо оновлений стан для витягнутих шматків, щоб показати їх у React-компоненті.
Коли користувач схвалює джерела в інтерфейсі, ми викликаємо setState на агента і оновлюємо approved_chunk_ids. Це миттєво стає доступним у стані агента на бекенді. На цьому етапі агент ще не дав фінальну відповідь, але ми блокуємо його, поки користувач не підтвердить, і не надішле наступне повідомлення.
Коли користувач це робить, ми повертаємося на бекенд. Там є ще один інструмент, який агент має для синтезу відповіді. Ми дивимося на стан. Це те, що було оновлено з нашого фронтенду. Ми отримуємо список схвалених ID шматків. І будуємо контекст, щоб передати його далі. Тепер агент використовуватиме цю інформацію для надання нам фінальної відповіді.
Зазираємо під капот: Код – не страшно
І, щоб завершити картину, подивіться, як легко взяти нашого агента Pydantic AI та зробити його сумісним з AGUI. Потрібно лише викликати цю функцію, і вона дасть нам екземпляр додатку, який ми можемо імпортувати в наш main.py, де налаштовуємо API-ендпоінт Fast API.
І ось, наш Pydantic AI агент стає доступним на порті 8000 завдяки AGUI. А тепер я покажу, як ми налаштовуємо підключення на фронтенді.
У нашому макеті ми обгортаємо весь наш React-додаток за допомогою Copilot Kit runtime. Це означає, що коли ми спілкуємося з нашим агентом на фронтенді, запит автоматично буде спрямований на цей API. Тут ми створюємо Copilot Kit runtime, щоб зробити це підключення до localhost:8000 – там, де працює наш Pydantic AI агент.
Тепер у page.tsx, що основна частина нашого React-додатку, не так багато коду. Подумайте, скільки API-викликів вам довелося б зробити для кожного маленького оновлення стану та викликів до агента. Але нам не доводиться цього робити завдяки хуку useAgent. Буквально все, що нам потрібно зробити, це викликати useAgent. Ми вказуємо ID агента, з яким хочемо з’єднатися, і це дає нам екземпляр агента, з яким ми можемо взаємодіяти в будь-якому React-компоненті.
Ми можемо читати стан і працювати з ним будь-де. Ми можемо встановлювати стан, і це миттєво відображається на бекенді. Ось наша функція для обробки того, коли користувач ставить галочку, схвалюючи шматок.
Ми також маємо деякі конфігурації, які я ще не показував, але ми можемо змінювати різні атрибути того, як агент виконує RAG “під капотом”, наприклад, семантичний чи гібридний пошук. Можемо скинути розмову, вибрати або зняти вибір з усіх джерел. Усе це вимагало б API-викликів для синхронізації стану або взаємодії з агентом. Але тепер нам не потрібно цього робити. Все це зроблено за нас завдяки хуку useAgent. Ось така потужність у нас є.
Якби в мене не було хука useAgent, це були б сотні рядків коду, що взаємодіють з різними ендпоінтами для обробки оновлень стану агента. Я не хочу займатися такою інженерією. Тому я дуже вдячний, що Copilot Kit та AGUI роблять це можливим.
Майбутнє вже тут: CopilotKit v1.50 та Google A2UI
Як я вже згадував, Copilot Kit нещодавно випустили великий реліз версії 1.0, яка включає хук useAgent. Це найважливіше нововведення, але є й багато інших неймовірних речей. Тож обов’язково зазирніть, якщо вас цікавить створення “агентських” додатків, де агент глибоко інтегрований з фронтендом. Я сам постійно займаюся подібними речами. Я дуже люблю Copilot Kit, маю прямий зв’язок з командою, бо надзвичайно ціную їхню платформу. І я працював з ними над цим відео, отримуючи їхній відгук.
І ще одна річ, на яку хотілося б швидко звернути увагу в релізі 1.50 – це підтримка A2UI від Google – специфікація генеративного інтерфейсу. Вона дає агентам або LLM можливість динамічно генерувати фронтенд-компоненти. Сподіваюся, зрозуміло, чому це так важливо для CopilotKit та AGUI. Це означає, що ви буквально можете дозволити вашим агентам генерувати динамічні інтерфейси користувача на основі розмови. І це захопливо.
Що далі? Твій хід, архітекторе ШІ!
Наостанок, дайте знати в коментарях, які ще сценарії ви хотіли б, щоб я реалізував за допомогою Copilot Kit та Pydantic AI, створюючи більше “агентських” рішень, або, можливо, ще більше розвинувши цього RAG-агента. Я справді хочу перетворити його на тестовий майданчик для RAG, думаю, це може бути потужним open-source проєктом. Цікаво, що ви думаєте.
Якщо вам сподобалося це відео і ви з нетерпінням чекаєте на більше матеріалів про створення ШІ-агентів, я був би дуже вдячний за лайк і підписку.
Підсумовуючи: ми розробили рішення, яке ставить людину в центр процесу роботи зі штучним інтелектом, надаючи повний контроль над джерелами інформації. Це не просто зручно, це запорука надійності та точності. Коли ви знаєте, що ваш помічник не вигадує, а спирається на перевірені факти, ви можете йому довіряти. Це крок до більш відповідального та прозорого майбутнього, де ми будуємо партнерство з ШІ.
Тому, наступного разу, коли ви ставитимете питання своєму ШІ-помічнику, пам’ятайте: розумний помічник – той, хто знає, звідки він отримав свої знання. І тепер ви знаєте, як це реалізувати!
Дякую за увагу, і побачимось у наступному відео!
