The @palico-ai/react helps you communicate with your Palico agents, manage message history, and handle client-side tool calls in your React application.
The following guide assumes you are using NextJS for your React application.
1
Install Packages
Get started by installing the required packages:
npm install @palico-ai/client-js @palico-ai/react
2
Add API URL and Service Key to `.env`
Generate a service key
You can generate a service key from your Palico App project directory
npm run palico generate apikey
npm run palico generate apikey
npm run palico generate apikey -s <jwt-secret>
Add the entries to your NextJS .env file:
# replace with your Palico API URLPALICO_AGENT_API_URL=http://localhost:8000# replace with your Palico service keyPALICO_SERVICE_KEY=<your-service-key>
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.
You can handle client-side tool calls in your React application using the pendingToolCalls and addResult params from the useChat hook. Here’s an example of how you can handle client-side tool calls:
[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:
{ name: string; // name or description of the intermediate step data?: any; // additional data for the intermediate step}