Bailoo Installation

Empowering DeFi Applications with Intelligent Conversational Interfaces

Welcome to the Bailoo! This guide will help you quickly integrate and configure an AI powered chat widget in your application to enable natural language-driven actions and seamless with LLMs

Overview

The AI Agent Widget is a customizable tool that allows developers to integrate AI capabilities into their applications. It enables users to perform tasks, retrieve information, and interact with applications through natural language.

Key Features

• Customizable Tools: Define tools that the agent can use, including their functionality, input parameters, and associated UI components.

• Dynamic Suggestions: Provide users with interactive suggestions to improve engagement.

• Tailored Appearance: Customize the widget's look and feel to match your app's branding.

• Human-In-The-Loop Support: Specify actions that require user confirmation before execution.

Installation

• Install the Widget Library

npm install @tierra-project/chat-widget

• Import and Use the Widget in Your App Import ChatWidget and configure it in your React application as described below.

Quick Start Example

Step 1: Define the Functions

We will start by defining two simple functions listTokens and sendToken. These are placeholders and their actual implementation will depend on your application logic.

// Define the listTokens function
export const listTokens = async (): Promise<string> => {
  // Placeholder function
  return JSON.stringify(["TokenA", "TokenB", "TokenC"]);
};

// Define the sendToken function
export const sendToken = async (
  receiver: string,
  amount: number,
  token: string
): Promise<string> => {
  // Placeholder function
  return `Sent ${amount} ${token} to ${receiver}`;
};

Step 2: Create the Components

Now, we'll create two React components, ListTokens and SendToken.

• ListTokens Component: Displays a simple message like "Retrieving tokens".

• SendToken Component: Provides a confirmation box where the user can see the transaction details and either cancel or accept.

import React from "react";

// ListTokens Component
const ListTokens = () => {
  return <h3>Retrieving tokens...</h3>;
};

interface ToolProps<T> {
  args: T;
  addResult: (result: string) => void;
}

// SendToken Component
interface SendTokenProps {
  receiver: string;
  amount: number;
  token: string;
}

const SendToken: React.FC<ToolProps<SendTokenProps>> = ({
  args,
  addResult,
}) => {
  const {	receiver, amount, token } = args;

  const handleAccept = async () => {
    // Call sendToken and pass the result back to the agent
    const result = await sendToken(receiver, amount, token);
    addResult(result);
  };

  return (
    <div>
      <p>Send {amount} {token} to {receiver}?</p>
      <button onClick={() => addResult("cancelled by user")}>Cancel</button>
      <button onClick={handleAccept}>Confirm</button>
    </div>
  );
};

Step 3: Configure and Pass Tools to the Agent

In this step, we define the tools and pass them to the ChatWidget.

Why use humanInTheLoop?

• For tools like SendToken, the user needs to confirm the transaction details before proceeding, so humanInTheLoop is set to true and a UI component (SendToken) is provided.

• For tools like ListTokens, no user confirmation is needed. The tool automatically fetches and returns the result, so humanInTheLoop is set to false and a callback (listTokens) is provided.

import { AssistantTools, ChatWidget } from "@tierra-project/chat-widget";
import { SendToken, ListTokens } from "../components"; // Import the components
import { listTokens, sendToken } from "../tools"; // Import the functions

// Define tools for the agent
const TOOLS: AssistantTools = {
  tools: [
    {
      name: "SendToken",
      description:
        "Allows users to send tokens to an address, ENS name or X handle",
      parameters: {
        type: "object",
        properties: {
          receiver: {
            type: "string",
            description: "The address, ENS name or X handle",
          },
          amount: {
            type: "number",
            description: "The amount of tokens the user wants to send",
          },
          token: {
            type: "string",
            description: "The name of the token to send",
          },
        },
        required: ["receiver", "amount", "token"],
      },
      humanInTheLoop: true, // Requires user confirmation
      component: SendToken, // UI for user confirmation
    },
    {
      name: "ListToken",
      description: "Returns the list of available tokens in the platform",
      humanInTheLoop: false, // No confirmation needed
      callback: listTokens, // Fetches tokens automatically
      component: ListTokens, // Optionally display "Retrieving tokens..."
    },
  ],
};

// Render the chat widget in your app
const ChatProvider = () => {
  return (
    <ChatWidget
      avatarUrl="/bailoo-avatar.png"
      title="Bailoo"
      description="Your AI Assistant"
      themeColor="#7B7CFF"
      suggestions={[
        { text: "What can you help me with?", emoji: "💡" },
        { text: "I'd like to send a token!", emoji: "💰" },
        { text: "How does this work?", emoji: "✨" },
      ]}
      metadata={{ environment: "demo" }}
      graphId="bailoo"
      assistantName="bailoo.fun"
      parameters={TOOLS} // Pass the tools configuration
    />
  );
};

export default ChatProvider;

Widget Configuration Options

The widget provides several configuration options to customize its behavior and appearance. Below are the key properties available:

ChatWidgetProps

Property	Type	Description
avatarUrl	string	URL for the assistant's avatar image.
title	string	Title displayed in the chat header.
description	string	Description shown under the title.
themeColor	string	Primary color for the chat widget.
suggestions	Suggestion[]	Initial message suggestions for user engagement.
darkMode	boolean	Enable/disable dark mode. Defaults to true.
openByDefault	boolean	Open the chat widget by default. Defaults to false.
onMessageSent	function	Callback triggered when a message is sent.
assistantName	string	Name of the assistant. Defaults to "bailoo-widget".
parameters	AssistantTools	Tools and their configurations available for the assistant.
metadata	object	Metadata passed to the assistant for additional context.
graphId	string	Identifier for the assistant, used for connecting with LangGraph.

AssistantTools

Define the tools the agent can use, their behavior, and input requirements.

Property	Type	Description
name	string	Unique identifier for the tool.
description	string	A clear explanation of the tool’s purpose for the agent to understand when to use it.
parameters	ToolParameters	JSON schema defining the tool’s input properties and their descriptions.
humanInTheLoop	boolean	Indicates if user confirmation is required before executing the tool.
callback	function	Function to execute if no user confirmation is required.
component	React.Component	Custom component rendered when the tool is invoked by the agent.

Adding Tools to the Agent

1. Define the tools and their parameters using the AssistantTools interface.

2. Specify a callback for automatic execution or a component for manual confirmation when humanInTheLoop is enabled.

3. Pass the defined tools to the parameters property of the ChatWidget component.

Next Steps

1. Integrate the Widget: Follow the example above to embed the widget in your application.

2. Test Your Tools: Ensure your tools work as expected by interacting with the agent in your app.