Customize your Agent

Learn how to extend an Agent’s functionality using React components and intuitive primitives to build dynamic, intelligent agents with Upstreet. This guide will walk you through customizing your Agent step-by-step, with examples and tips to inspire you.

Overview: How an Agent Works

Agents follow a simple but powerful cycle: they perceive inputs, process them to generate insights or decisions, and act on their environment based on these decisions. This perception-think-act model is broken down into components that work together to define your Agent’s functionality.

Read our What Are Agents? guide to get familiar with Agent basics.

Explore Upstreet’s Agent Architecture to learn more about how Agents operate behind the scenes.

Agent Structure at a Glance

If you’re familiar with React, the structure of an Agent will look familiar. Here’s a basic example to get you started:

const MyAgent = () => (
  <Agent>
    <Prompt>
      This assistant is developed by MultiCortical Example Technologies. For support, refer users to our help pages at https://multicortical.example.com/
    </Prompt>
  </Agent>
);
export default MyAgent;

The example above shows the basic setup, where a simple prompt is added to guide the Agent’s interactions. The react-agents library, however, allows much more flexibility through four core components.

Key Components of an Agent

Using the react-agents library, Agent customization is broken down into four core components:

Component	Purpose
`<Prompt />`	Sets initial instructions and context for the Agent’s behavior.
`<Action />`	Defines actions the Agent can perform, utilizing LLM tool-calling facilities.
`<Perception />`	Allows the Agent to perceive and react to real-world events.
`<Task />`	Schedules tasks for the Agent, enabling it to manage asynchronous processes.

Import these components from the SDK package:

import { Prompt, Action, Perception, Task } from 'react-agents';

Each component adds specific functionality, enabling you to build intelligent, responsive Agents. Let’s dive into each one in more detail.

An Agent consists of a collection of components implementing these primitives.

Bringing It All Together

Here’s a sample setup that combines these components:

const MyAgent = () => (
  <Agent>
    <Prompt>I'm here to help you with information about our services and products.</Prompt>
    <Action name="fetchProductInfo">Retrieve the latest product details based on user query.</Action>
    <Perception trigger="userInactive">Remind user of inactivity after 5 minutes.</Perception>
    <Task schedule="every day at 9am">Send daily summary report.</Task>
  </Agent>
);

This setup provides a well-rounded Agent equipped to respond, perceive, act, and manage scheduled tasks effectively.

Custom Logic and Advanced Patterns

With react-agents, you can introduce custom logic within components, such as conditional rendering, state management, and data manipulation, using native React hooks and patterns.

To explore advanced customization:

Read our Custom Components guide.
Learn more about how agents are structured.
Our Pokédex example demonstrates a basic, real-world example of how to create a custom component.

Ready for More?

With these foundational components, you can customize your Agent to fit various tasks, from customer support to data processing. Next steps:

Test your Agent: See how it responds and make adjustments.
Deploy your Agent: Launch your Agent on Upstreet’s platform for real-world interactions.