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:

You can see all Components here.

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.

Using environment variables

You may choose to use third-party services when customizing your Agent. These services may have secrets or tokens.

You can keep them safe by creating a .env.txt file in the your Agent directory, and keeping environment variables there.

An example might look like:

GOOGLE_API_KEY=abcdefghijklmonp
OPEN_WEATHER_KEY=abcdefghijklmonp

You can access these environment variables by using the useEnv hook.

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:

• Learn how to make Custom Components.
• 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.