@palico-ai/react
helps you communicate with your Palico agents, manage message history, and handle client-side tool calls in your React application.
Setup and Installation
The following guide assumes you are using NextJS for your React application.
1
Install Packages
Get started by installing the required packages:
2
Add API URL and Service Key to `.env`
Generate a service keyYou can generate a service key from your Palico App project directoryAdd the entries to your NextJS
.env
file:3
Setup Server-Side Authorization
We want to handle calling our Palico application in a server-side environment. To do this, we’ll create an API route in NextJS.Create a new file in
src/app/api/palico/route.ts
in your NextJS application and add the following code:You should authorize the request before calling your Palico app.
Usage
You can use theuseChat()
hook to interact with your Palico agent in your React components.
Client-Side Tool Execution
You can handle client-side tool calls in your React application using thependingToolCalls
and addResult
params from the useChat
hook. Here’s an example of how you can handle client-side tool calls:
API reference
useChat()
The useChat()
hook returns an object with the following properties:
Message
The Message
object has the following properties:
The sender of the message. Can be either
user
or agent
.The content of the message.
Additional data associated with the message.
[User-Only] For client-side tool execution, the results of the tool call
[User-Only] App config value for your Agent. Learn more about App Config.
[Agent-Only] Request ID associated with the message.
[Agent-Only] Intermediate steps that the agent has taken. This can be used for debugging or logging purposes, or to provide additional context to the client. IntermediateStep has the following fields:
toolCalls
[Agent-Only] For client-side tool execution, the tool calls to be executed