Building a Full-stack Agentic App

​If you're a student or AI Researcher, this is for you

Now you can get $50 worth of GPU credits for just $9.99/month.

LightningAI has released this plan specifically for students and researchers who need world-class compute at an affordable price.

​Get Your Research-Grade GPU Access →

Thanks to Lightning for partnering today!

---

Building a Full-stack Agentic App

Backends like CrewAI, LangGraph, Mastra, etc., can do a lot.

But the hardest part is embedding them into interactive user-facing software products, like Cursor.

AG-UI (Agent-User Interaction Protocol) is an open-source protocol designed to address this and build front-end-powered Agents.

Today, let’s do a hands-on demo of this and learn how you can use the AG-UI protocol to build user-facing AI apps (you can find the full code here).

First, for more context...

AG-UI is an event-based protocol that enables communication between agents and frontends. It does this using events like:

• RUN_STARTED/RUN_FINISHED: Lifecycle event

• TEXT_MESSAGE_: Streaming response

• TOOL_CALL_: Tool execution

You can directly embed these events into your UI and get reactive agents.

Here's the workflow of our app

• User submits a portfolio request

• The agent runs the steps: fetch prices → allocate cash → create insights

• AG-UI streams the agent’s progress step by step

• CopilotKit updates the UI in real time

1️⃣ Import events

To begin, we import the key events that our Agent will use to communicate with the frontend of our app.

The description for each of these event classes is also shown in the snippet below:

Essentially, the point of these events is that the frontend can use these to display info on the UI when the backend (Agent) sends some info.

For instance, events RUN_STARTED and RUN_FINISHED mark the start or end of an agent’s task execution. As soon as the Agent begins the task, it will emit this event, which can be captured by the UI.

2️⃣ Define State

First, we define the Agent’s Flow state to track:

• Available cash

• Portfolio

• Tool call logs, etc.

This state inherits from CopilotKitState, which extends LangGraph's MessagesState and will be updated based on the app's emitted events.

3️⃣ Define Flow

Next, we define a 5-step workflow using CrewAI Flows:

• start(): Initialize with portfolio data

• chat(): Extract investment parameters

• simulation(): Download stock data

• allocation(): Calculate performance

• insights(): Generate analysis

4️⃣ Create FastAPI Endpoint

This is our endpoint that wraps the Flow to handle incoming requests and stream events to the frontend.

Here, the event generator:

• Emits lifecycle events

• Streams state updates

• Handles tool calls

• Manages text responses

5️⃣ Human-in-the-Loop (HITL)

In Agentic apps, it is always desired to have HITL functionalities.

In our case, the Agent can request human approval before rendering charts and updating the portfolio.

This is added in the allocation step of our Flow, and the rationale is that as soon as the Agent has decided on an allocation, it can get human approval before permanently making an update:

6️⃣ Frontend

Backend done!

Now we build the frontend that connects to the agent endpoint using CopilotKit's hooks:

• useCoAgent to sync agent state

• useCoAgentStateRender to render the state in UI

• useCopilotAction for tool calls

• CopilotChat for chat interface

And that was our AG-UI-powered stock portfolio agent!

As you saw above, CopilotKit (open-source) offers all the essential building blocks for full-stack agentic apps.

It lets you add a ton of useful AI capabilities to your products in minutes, and we’ll cover them in more depth going ahead.

You can find the full code for this app here →

​AG-UI protocol is open-source. Here's the repo →​

Thanks for reading!