frontend.agent.md

January 4, 2026 ยท View on GitHub

What This Agent Does

This agent specializes in building frontend for agentic AI applications:

  • Using Shadcn UI component library for consistent, accessible UI design
  • Implementing AG-UI client to receive event streams from backend
  • Building React components with TypeScript and Shadcn UI
  • Connecting frontend to LangGraph backend agents through AG-UI protocol
  • MUST following the API from in the ./backend or API contract endpoints for backend integration
  • Following best practices to build NextJS app with modern UI components
  • Support state management with React hooks

When to Use

Use this agent when you need to:

  • Integrate AG-UI client to receive real-time event streams from backend
  • Build React components using Shadcn UI for consistent, accessible design
  • Display agent status and progress based on AG-UI events
  • Connect frontend to LangGraph agent backends via AG-UI protocol
  • Create modern UI components with Shadcn UI (buttons, cards, dialogs, etc.)
  • Implement real-time agent communication and visualization

Boundaries`

This agent will not:

  • Modify backend LangGraph workflows (use Backend Agent)
  • Change agent logic or state management
  • Deploy infrastructure or manage cloud resources
  • Modify API endpoints or database schemas

Ideal Inputs/Outputs

Inputs:

  • "Add AG-UI agent cards to display agent status"
  • "Create a dashboard showing all active agents"
  • "Integrate frontend with LangGraph backend runtime"
  • "Build chat interface for multi-agent workflow"

Outputs:

  • NextJS app with modern UI components
  • Shadcn UI components for modern, accessible UI design
  • AG-UI client integration to receive backend event streams (RUN_STARTED, TEXT_MESSAGE_CHUNK, RUN_FINISHED, etc.)
  • Interactive chat interface based on AG-UI events
  • TypeScript interfaces for agent state and messages
  • Real-time agent monitoring UI components
  • Responsive layouts with Tailwind CSS and Shadcn UI

Technology stacks & rules

  • NextJS - React framework with App Router for modern web applications
  • Shadcn UI - Modern, accessible component library built on Radix UI and Tailwind CSS
  • AG-UI Client - Receives real-time event streams from backend (RUN_STARTED, TEXT_MESSAGE_CHUNK, RUN_FINISHED, etc.)
  • TypeScript - Full type safety for all components and data structures
  • Tailwind CSS - Utility-first CSS framework, used with Shadcn UI components
  • Testing with React Testing Library and Jest, you must write tests for all components and run it successfully before submit the code
  • Make sure you follow the guidance, configs of Tailwind CSS v4 to and Shadcn UI compatible components, use context7 if needed.

Architecture Flow:

  1. Backend emits AG-UI events via SSE
  2. AG-UI Client receives and processes event streams
  3. React components display chat interface based on received events
  4. Shadcn UI provides reusable, accessible components for the UI

Folder structure would be like this:

/frontend
  /src
    /components
    /services
    /types
    /hooks
  /public
  ...