CopilotKit v1.50 Brings AG-UI Agents Directly Into Your App With the New useAgent Hook

Agent frameworks are actually good at reasoning and instruments, however most groups nonetheless write customized code to show agent graphs into strong consumer interfaces with shared state, streaming output and interrupts. CopilotKit targets this final mile. It is an open supply framework for constructing AI copilots and in-app brokers immediately in your app, with actual time context and UI management. ( Check out the CopilotKit GitHub)

The launch of of CopilotKit’s v1.50 rebuilds the venture on the Agent User Interaction Protocol (AG-UI) natively.The key concept is straightforward; Let AG-UI outline all visitors between brokers and UIs as a typed occasion stream to any app by means of a single hook, useAgent.

useAgent, one React hook per AG-UI agent

AG-UI defines how an agent backend and a frontend trade a single ordered sequence of JSON encoded occasions. These occasions embrace messages, device calls, state updates and lifecycle alerts, and so they can stream any transport like HTTP, Web Sockets, and even WebRTC.

CopilotKit v1.50 makes use of this protocol as the native transport layer. Instead of separate adapters for every framework, every little thing now communicates through AG-UI immediately. This is all made simply accessible by the new useAgent – a React hook that supplies programmatic management of any AG-UI agent. It subscribes to the occasion stream, retains a neighborhood mannequin of messages and shared state, and exposes a small API for sending consumer enter and UI intents.

At a excessive degree, a React element does three issues:

Call useAgent with connection particulars for the backend agent.
Read present state, similar to message listing, streaming deltas and agent standing flags.
Call useAgent strategies from the hook to ship consumer messages, set off instruments or replace shared state.

Because the hook solely is dependent upon AG-UI, the identical UI code can work with completely different agent frameworks, so long as they expose an AG-UI endpoint.

Context messaging and shared state

AG-UI assumes that agentic apps are stateful. The protocol standardizes how context strikes between UI and agent.

On the frontend, CopilotKit already lets builders register app knowledge as context, for instance with hooks that make components of React state readable to the agent. In the AG-UI mannequin this turns into express. State snapshots and state patch occasions preserve the backend and the UI in sync. The agent sees a constant view of the software, and the UI can render the identical state with out customized synchronization logic.

For an early degree engineer this removes a standard sample. You now not push props into prompts manually on each name. The state is then up to date, and the AG-UI shopper encodes these updates as occasions, and the backend agent consumes the identical state by means of its AG-UI library.

AG-UI, protocol layer between brokers and customers

AG-UI is outlined as an open, light-weight protocol that standardizes how brokers hook up with consumer going through functions.It focuses on occasion semantics fairly than transport. Core SDKs present strongly typed occasion fashions and purchasers in TypeScript, Python and different languages.

The JavaScript bundle @ag-ui/core implements the streaming occasion primarily based structure on the shopper aspect. It exposes message and state fashions, run enter sorts and occasion utilities, and presently data about 178,751 weekly downloads on npm for model 0.0.41. On the Python aspect, the ag-ui-protocol bundle supplies the canonical occasion fashions, with round 619,035 downloads in the final week and about 2,172,180 in the final month.

CopilotKit v1.50 builds immediately on these parts. Frontend code makes use of CopilotKit React primitives, however beneath the hood the connection to the backend is an AG-UI shopper that sends and receives customary occasions.

First occasion integrations throughout the 3 hyperscalers

The AG-UI overview lists Microsoft Agent Framework, Google Agent Development Kit, ADK, and AWS Strands Agents as supported frameworks, every with devoted documentation and demos. These are first occasion integrations maintained by the protocol and framework house owners.

Microsoft printed a tutorial that exhibits the right way to construct each server and shopper functions utilizing AG-UI with Agent Framework in .NET or Python. Google documents AG-UI beneath the Agentic UI part of the ADK docs, and CopilotKit supplies a full information on constructing an ADK together with AG-UI and CopilotKit stack. AWS Strands exposes AG-UI integration by means of official tutorials and a CopilotKit quickstart, which wires a Strands agent backend to a React shopper in a single scaffolded venture.

For a React workforce which means useAgent can connect to brokers outlined in any of those frameworks, so long as the backend exposes an AG-UI endpoint. The frontend code stays the identical, whereas the agent logic and internet hosting setting can change.

Ecosystem development round CopilotKit and AG-UI

CopilotKit presents itself as the agentic framework for in-app copilots, with greater than 20,000 GitHub stars and being trusted by over 100,000 builders.

AG-UI itself has moved from a protocol proposal to a shared layer throughout a number of frameworks. The partnerships or integrations embrace with LangGraph, CrewAI, Mastra, Pydantic AI, Agno, LlamaIndex and others, plus SDKs in Kotlin, Go, Java, Rust and extra.This cross framework adoption is what makes a generic hook like useAgent viable, as a result of it will possibly depend on a constant occasion mannequin.

Key Takeaways

CopilotKit v1.50 standardizes its frontend layer on AG-UI, so all agent to UI communication is a single occasion stream as an alternative of customized hyperlinks per backend.
The new useAgent React hook lets a element hook up with any AG-UI suitable agent, and exposes messages, streaming tokens, instruments and shared state by means of a typed interface.
AG-UI formalizes context messaging and shared state as replicated shops with occasion sourced deltas, so each agent and UI share a constant software view with out guide immediate wiring.
AG-UI has first occasion integrations with Microsoft Agent Framework, Google Agent Development Kit and AWS Strands Agents, which suggests the identical CopilotKit UI code can goal brokers throughout all 3 main clouds.
CopilotKit and AG-UI present robust ecosystem traction, with excessive GitHub adoption and vital weekly downloads for @ag-ui/core on npm and ag-ui-protocol on PyPI, which alerts that the protocol is turning into a standard layer for agentic functions.

If you’re taken with utilizing CopilotKit in a manufacturing product or enterprise, you may schedule time with the workforce right here: Scheduling link