@trugen/agent-ui

A React UI component library for integrating Trugen Agents into your application seamlessly. This package provides customizable components and a context provider to render interactive Agent sessions powered by LiveKit.

Installation

Install the package using your preferred package manager:

npm install @trugen/agent-ui
# or
yarn add @trugen/agent-ui
# or
pnpm add @trugen/agent-ui

Peer Dependencies

This package requires the following peer dependencies. With npm v7+, they are installed automatically alongside @trugen/agent-ui. With npm v6 or below, install them manually:

npm install react react-dom

Basic Usage

To use the components, first wrap your application (or the relevant part of your component tree) with the TrugenAgentProvider. Then, you can render the TrugenAgent wherever you need it.

Set Up the Provider, Render the Agent and import CSS

Wrap your components with TrugenAgentProvider and render the TrugenAgent component inside it. You'll also need to pass your specific agentId to the TrugenAgent.

import { TrugenAgentProvider, TrugenAgent } from "@trugen/agent-ui";
import "@trugen/agent-ui/dist/index.css";

export default function App() {
  return (
    <TrugenAgentProvider>
      <div style={{ height: "100vh", width: "100vw" }}>
        <TrugenAgent agentId="your-agent-id-here" apiKey="your-api-key-here" />
      </div>
    </TrugenAgentProvider>
  );
}

API Reference

TrugenAgentProvider

A context provider that wraps the application and supplies the necessary theme and settings for the Trugen UI components.

Props:

• children (React.ReactNode): The components to be wrapped by the provider.

TrugenAgent

The main interactive component containing the agent interface, audio/video handling via LiveKit, and various conversational stages.

Props:

• agentId (string, required): The unique identifier for the agent you want to interact with.
• context (string, optional): Optional context string to pass additional initialization data to the agent session.

Notes

• Ensure your environment supports React, as the package uses the "use client"; directive indicating client-side rendering is required for these specific components.