Agent Integration Examples

Full backend + frontend examples for popular AI agent frameworks
LangGraph
CrewAI
Google ADK
Pydantic AI
Mastra
AutoGen

BranderUX uses the AG-UI Protocol for streaming. Agent frameworks with AG-UI support automatically emit the right events - no manual conversion needed.

LangGraph

Most Popular
Python

LangGraph is the most popular agent framework, built by LangChain. It provides powerful graph-based agent orchestration with native AG-UI support.

Backend Setup
requirements.txt
langgraph
langchain-anthropic
ag-ui-langgraph
fastapi
uvicorn
api/agent.py
from langgraph.prebuilt import create_react_agent
from langchain_anthropic import ChatAnthropic
from langchain_core.tools import tool
from ag_ui_langgraph import AGUIAdapter
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

# Define your tools
@tool
def search_database(query: str) -> str:
    """Search the database for information."""
    return f"Results for: {query}"

@tool
def calculate(expression: str) -> str:
    """Evaluate a mathematical expression."""
    try:
        return str(eval(expression))
    except:
        return "Invalid expression"

# Create the agent
model = ChatAnthropic(model="claude-sonnet-4-20250514")
agent = create_react_agent(model, tools=[search_database, calculate])

@app.post("/api/agent")
async def agent_endpoint(request: Request):
    data = await request.json()

    return StreamingResponse(
        AGUIAdapter.stream(agent, {
            "messages": data.get("params", {}).get("messages", []),
            "tools": data.get("params", {}).get("tools", {}),
        }),
        media_type="text/event-stream"
    )

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)
Frontend Setup
App.tsx
import Brander, { sseStream } from "@brander/sdk";

function App() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="your_project_id"
      onQueryStream={(params) =>
        sseStream("http://localhost:8000/api/agent", { params })
      }
    />
  );
}

export default App;

Common Integration Pattern

Regardless of which agent framework you use, the frontend integration is always the same:

App.tsx
import Brander, { sseStream } from "@brander/sdk";

function App() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="your_project_id"
      onQueryStream={(params) =>
        sseStream("/api/agent", { params })
      }
    />
  );
}