Skip to main content

​
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.