@adecore/agents-react

React views for agent chats: the thread, the composer, approvals and questions, the agent CLIs and their accounts, and what they cost. They talk to a host of chats, such as @adecore/agents, over the requests of @adecore/agent-contracts. Built on React 19, @adecore/ui and Tailwind 4.

Documentation with live demos

Install

bun add @adecore/agents-react @adecore/agent-contracts

@adecore/ui, React 19, react-dom, i18next and react-i18next are peer dependencies.

Set up

Import the theme after the one of @adecore/ui, let Tailwind scan the package, and load the typography plugin. The @source path is relative to the CSS file.

@import "tailwindcss";
@import "@adecore/ui/theme.css";
@import "@adecore/agents-react/theme.css";
@plugin "@tailwindcss/typography";
@source "../node_modules/@adecore/agents-react/dist";

Add the words of AGENTS_LOCALES to your i18next, and render the views in a ChatHostProvider and a ChatScopeContext:

import { ChatHostProvider, ChatScopeContext } from '@adecore/agents-react';
import { Composer, Timeline } from '@adecore/agents-react/chat/ui';

<ChatHostProvider host={CHAT_HOST}>
    <ChatScopeContext.Provider value={scope}>
        <Timeline chatId={chatId} composer={<Composer chatId={chatId} info={info} {...composerProps} />} />
    </ChatScopeContext.Provider>
</ChatHostProvider>;

Getting started covers the words, the host, the scope and its transport.

The root holds the host, the scope and the transport; /chat, /chat/ui, /prompts, /providers, /state, /usage, /locales and /testing hold the rest. A module that no entry exports is internal.

Documentation

License

FSL-1.1-MIT. See LICENSE.

Pele, a dependency under the MIT license, draws the diagrams in a reply. It loads only when a reply holds one.