React UI Managed Agent

Overview

In this article, you’ll create a TruGen managed agent and connect it to a React application.

The agent is created using a bash script, and then loaded in the frontend with user-specific context.

What you’ll build

A setup where:

• A TruGen agent is created using a script
• A React app loads the agent
• The agent runs with user-specific context

Prerequisites

• Bun installed
• Bash (macOS, Linux, or WSL on Windows)
  Verify Bun installation:

bun --version

Project setup

1. Clone and install

Clone the examples repo and open the React UI managed agent folder:

git clone https://github.com/trugenai/trugen-examples.git
cd trugen-examples/managed-agents/agent-with-reactui

2. Create the agent

Make the script executable:

chmod +x create_agent.sh

Run the script:

./create_agent.sh

This creates a new agent and returns an agentId. You will use this ID in the React app.

3. Install frontend dependencies

cd frontend
bun install

This installs the required packages for the React app.

4. Configure the agent

Open

frontend/src/App.tsx

Update the configuration:

const agentId = "YOUR_AGENT_ID_HERE";
const userName = "USER_NAME_HERE";
const userId = "USER_ID_HERE";
const conversationContext = "CONTEXT_HERE";

These values define:

• Which agent is loaded
• Who the user is
• What context the agent starts with

5. Run the application

bun run dev

The React app will start and load the configured agent.

Result

• The agent is created using the script
• The React app loads the agent
• The session starts with user context
• You can interact with the agent