TutorialsPlayground

Welcome to the AgentForge Playground! This tutorial will guide you through the basics of interacting with AI agents, using reusable React components, and exploring the available APIs and agents.

Introduction

AgentForge Playground is a simple UI that allows you to experiment with AI agents, demonstrating the power and flexibility of the AgentForge platform. You'll learn how to:

Interact with AI agents

Use reusable React components

Utilize the provided APIs

Step 1: Access the Playground

To get started, navigate to the AgentForge Playground at http://localhost:3000.

Step 2: Interact with AI Agents

In the Playground, you can interact with AI agents by simply typing into the input field and observing the messages the agents send to each other. Follow these steps:

Type a Message: Use the provided input field to type a message or command for the agent.

Observe Responses: Watch as the agents communicate with each other in real-time, displaying their messages and responses in the conversation window.

This interactive environment allows you to see how different agents process and respond to various inputs, giving you a clear understanding of their capabilities and behaviors.

Step 3: Use Reusable React Components and Hooks

The playground uses a few reusable components: Chat and ChatInput. These components are tied together using the useAgents custom hook. You can explore their behavior through it. More about each component can be read

Components .

Example: Using the `Chat` Component

1import Chat from '@/components/Chat';
2import ChatInput from '@/components/ChatInput';
3import useAgents from '@/hooks/useAgents';
4
5function Playground() {
6    const [messages, isTyping, handleSubmit] = useAgents();
7
8  return (
9    <div>
10      <ChatInput onSubmit={handleSubmit} />
11      <Chat
12          messages={messages}
13          isTyping={isTyping}
14          roleConfig={{
15              supervisor: {
16                  img: supervisorImg,
17                  position: 'start',
18              },
19              Researcher: { img: DEFAULT_AVATAR_IMG },
20              Presenter: { img: DEFAULT_AVATAR_IMG },
21          }}
22      />
23  </div>
24  );
25}
26

Step 4: Utilize APIs

Agents and LangGraph workflows are available through APIs. The POST on api/agents API demonstrates how to handle streaming of the response.

Example: Invoking Agents

1javascriptCopy code
2const response = await fetch('api/agents', {
3  body: JSON.stringify({ question }),
4  method: 'POST',
5});
6if (!response.ok) throw new Error(await response.text());
7const reader = response.body.getReader();
8let done, value;
9const newMessages = [];
10while (!done) {
11  ({ value, done } = await reader.read());
12  const str = new TextDecoder().decode(value);
13  // ... do something here with the str
14}
15
16

Conclusion

That's it! You've now learned the basics of using the AgentForge Playground to interact with AI agents, use reusable React components, utilize APIs, and customize and deploy AI agents. Explore the Playground further to discover more advanced features and capabilities.

Happy building with AgentForge!