React

Integrate Agents into React applications

React Integration

AG-Kit provides a React hook to build Headless UI. You can render your own components and wire them to the Agent service.

Basic Usage

The useChat hook provides everything you need to connect your React application to an AG-Kit agent service.

typescript

import React, { useState } from "react";
import { useChat } from "@ag-kit/ui-react";

export default function App() {
  const { uiMessages, sendMessage, streaming } = useChat({
    url: "/send-message", // your agent server endpoint (SSE)
  });

  const [input, setInput] = useState("");

  return (
    <div>
      <div>
        {uiMessages
          .filter((m) => ["user", "assistant"].includes(m.role))
          .map((m, mi) => (
            <div key={mi}>
              {m.parts.map((p, pi) =>
                p.type === "text" ? (
                  <p key={pi}>
                    {m.role}: {p.text}
                  </p>
                ) : null
              )}
            </div>
          ))}
      </div>

      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={() => sendMessage(input)} disabled={streaming}>
        Send
      </button>
    </div>
  );
}

Installation

npm install @ag-kit/ui-react

Features

• Streaming Support: Real-time message streaming from your agent
• Message Management: Automatic message history and state management
• Type Safety: Full TypeScript support
• Headless Design: Build your own UI components

For more advanced features like chat UI components, generative UI, and human-in-the-loop workflows, see Building Agent Applications.