Build a RAG AI Agent with REAL-TIME Source Validation (CopilotKit + Pydantic AI)

RAG Agent with Human-in-the-Loop Source Validation

Key Concepts:

• RAG (Retrieval-Augmented Generation): A technique to improve LLM responses by grounding them in external knowledge sources.
• Copilot Kit: A framework for building agentic experiences and generative UIs.
• Pideantic AI: An agent framework used for the backend logic of the RAG agent.
• AGUI (Agentic Generative UI Protocol): A protocol enabling seamless connection between applications and AI agents.
• Use Agent Hook: A Copilot Kit feature providing direct access to agent state and functionality within a React frontend.
• Human-in-the-Loop: A process where human intervention is used to validate and refine AI outputs.
• State Snapshot Event: An event streamed from the backend to the frontend containing the current state of the agent, specifically the retrieved chunks.

I. Problem Statement & Solution Overview

Traditional RAG systems suffer from a lack of transparency regarding source material. The presenter highlights the issues of potential hallucinations and reliance on irrelevant documents, noting that simple “citation” isn’t sufficient as agents can fabricate citations. The core problem is verifying which sources the AI agent actually used to formulate its response.

The solution presented is a RAG agent with human-in-the-loop source validation. This agent displays the chunks retrieved from the knowledge base to the user, allowing them to approve or reject specific sources before the agent synthesizes a final answer. This provides full control and visibility into the agent’s reasoning process. The agent, demonstrated with a knowledge base of AI company information, asks the user to “select the sources you want me to use for the summary” before generating a response to a query like “What is OpenAI’s latest funding?”.

II. Use Cases & Applications

The primary use case demonstrated is a “RAG agent harness” – a frontend for testing and debugging other RAG agents. By plugging different RAG agents into this interface, developers can observe the sources selected and ensure the agent is retrieving relevant knowledge.

Another potential application is an internal RAG agent where team members can curate the sources used for responses, ensuring accuracy and alignment with internal knowledge. This transforms the chunk retrieval process into a recommendation system, allowing users to refine the agent’s knowledge base.

III. Technical Architecture & Components

The agent is built using a two-component tech stack:

• Copilot Kit (Frontend): Enables “agentic experiences” (also called generative UI) by allowing the AI agent to manipulate the user interface and vice versa. It’s described as the future of SaaS and web development. Copilot Kit utilizes the AGUI protocol.
• Pideantic AI (Backend): Handles the agent logic, including knowledge base search and response synthesis.

AGUI Protocol: This protocol is the “secret sauce” connecting applications to AI agents. It’s supported by various agent frameworks including LangGraph, CrewAI, LlamaIndex, and AGNO. Pideantic AI provides a dedicated page detailing AGUI integration.

Use Agent Hook: Released by Copilot Kit this month, this hook is central to the solution. It provides direct access to the agent object within the frontend, while the agent itself runs securely on a backend API. This enables real-time state management, conversation history access, and updating agent state from the UI. As stated by the presenter, “This is something I always wish that I had.”

IV. Workflow & Process – How it Works

1. Initial Query: The user submits a query to the agent.
2. Knowledge Base Search: The agent uses a Pideantic AI tool to search the knowledge base.
3. State Snapshot & Chunk Display: The tool returns a “state snapshot event” containing the retrieved chunks. This event is streamed to the frontend, displaying the chunks to the user.
4. User Approval/Rejection: The user reviews the chunks and selects/deselects those they want the agent to use. This action is synced in real-time to the backend agent via AGUI.
5. Approved Chunk IDs Update: The frontend updates the agent’s state with the approved chunk IDs.
6. Response Synthesis: Upon user confirmation, the agent synthesizes a response based only on the approved chunks.
7. Final Answer: The agent returns the final answer, grounded in the user-validated sources.

This process is visualized with an Excal diagram (not detailed in the transcript).

V. Code Implementation Highlights

The code leverages the seamless integration provided by Copilot Kit and AGUI. Key points:

• State Synchronization: The types defined in the backend (Python) are identical to those in the frontend (React), ensuring consistent state management.
• Pideantic AI Dependencies: The AGUI integration makes the agent’s dependencies (including approved chunk IDs) accessible within Pideantic AI tools.
• Simplified Frontend Logic: The useAgent hook drastically reduces the amount of code needed to interact with the agent, eliminating the need for numerous API calls for state synchronization.
• AGUI Compatibility: Pideantic AI agents can be made AGUI compatible with a single function call.

VI. Data & Statistics

While no specific quantitative data is presented, the presenter emphasizes the significant reduction in engineering effort achieved through the use of Copilot Kit and AGUI. The implication is that building this level of real-time synchronization manually would require substantially more code and complexity. The example of Amazon’s $8 billion investment in Anthropic is used as a concrete example of information retrieved and synthesized based on approved sources.

VII. Notable Quotes

• “This is not the kind of thing that I've shown on my channel before. And also, this is not the kind of thing that is easy to engineer.” – Emphasizing the complexity of the problem and the value of the solution.
• “This is something I always wish that I had.” – Highlighting the utility of the useAgent hook.
• “We are blocking the agent from giving the final response until the user does the approval.” – Illustrating the core principle of human-in-the-loop validation.

VIII. Copilot Kit 1.50 Release

Beyond the useAgent hook, the Copilot Kit 1.50 release introduces support for A2UI (Google’s generative UI spec), enabling agents to dynamically generate user interface components. This further expands the possibilities for building highly interactive and adaptive agentic experiences.

Conclusion:

This RAG agent with human-in-the-loop source validation represents a significant step towards building more reliable and transparent AI systems. By empowering users to curate the sources used for response generation, it mitigates the risks of hallucinations and irrelevant information. The combination of Copilot Kit, Pideantic AI, and AGUI provides a powerful and streamlined development experience, making this level of control and visibility accessible to a wider range of developers. The open-source nature of the project encourages further experimentation and adaptation to various use cases.