Agent UI

An embeddable UI for AI agents.

AgentSea servers provide a JSON representation of interactions which should be displayed to the user. Those interactions are rendered by the client interface to provide interactive user experiences.

Agent UI is a component library that focuses on rendering those experiences in React.

Usage

Render the demo/hello-world agent from AgentSea hub

import Agent from "@agentsea/agent-ui"

(
    <Agent name="demo/hello-world" token="usertoken" />
)

Custom endpoint

Use an agent running on your own hardware that implements the AgentSea API

(
    <Agent url="https://foo-agent.ai/v1/" token="usertoken" />
)

Plans

Directly run the bar plan on agent demo/foo

import Run from "@agentsea/agent-ui"

(
    <Run agent="demo/foo" planName="bar" token="usertoken" />
)

Render a list of agent plans available to the user

import Plans from "@agentsea/agent-ui"

(
    <Plans agent="demo/foo" token="usertoken" />
)

Render the details of a single plan and edit them

import Plan from "@agentsea/agent-ui"

(
    <Plan agent="demo/foo" name="bar" token="usertoken" />
)

Processes

Render a list of running processes

import Processes from "@agentsea/agent-ui"

(
    <Processes agent="demo/foo" token="usertoken" />
)

Render a view of a single process

import Process from "@agentsea/agent-ui"

(
    <Process agent="demo/foo" id="2903hfjo2" token="usertoken" />
)

Feed

Render a feed for the agent

import Feed from "@agentsea/agent-ui"

(
    <Feed agent="demo/foo" token="usertoken" />
)

Threads

Start a thread with the agent

import Thread from "@agentsea/agent-ui"

(
    <Thread agent="demo/foo" token="usertoken" />
)

Show the list of previous threads for the user

import Threads from "@agentsea/agent-ui"

(
    <Threads agent="demo/foo" token="usertoken" />
)

Actions

Show a view of actions available for the agent

import Actions from "@agentsea/agent-ui"

(
    <Actions agent="demo/foo" token="usertoken" />
)

Hosts

Show a selection of hosts for the agent

import Hosts from "@agentsea/agent-ui"

(
    <Hosts agent="demo/foo" token="usertoken" />
)

Config

Show the config for the agent

import Config from "@agentsea/agent-ui"

(
    <Config agent="demo/foo" token="usertoken" />
)

Notifications

Render notifications for the agent

import Notifications from "@agentsea/agent-ui"

(
    <Notifications agent="demo/foo" token="usertoken" />
)

Intro

Render an introduction for the agent

import Intro from "@agentsea/agent-ui"

(
    <Intro agent="demo/foo" token="usertoken" />
)

Agent API

See https://github.com/AgentSea/agentsea-py/tree/main/agentsea/api/v1

An example of using the API to run a plan

import Run from "@agentsea/agent-ui"

(
    <Run agent="demo/foo" planName="bar" token="usertoken" />
)

This would:

• Use GET on /v1/plans to find the plan ID for the name bar
• Send a POST to /v1/plans/{id}/run to run the plan, this will return a process ID
• Poll /v1/processes/{id} to get the current view
• Respond with /v1/respond to any asks

Developing

Install packages

npm install

Run locally

npm start