Quickstart

This guide will help you to integrate cranberrry and run your first agent with just a few lines of code in your React application. Cranberrry is fairly customisable and you can hook it up with any particular UI of your choice whether it's custom UI or shadcn ui library. We give you complex logical skeletons to run your AI Agents in your React application.

Choose your desired package manager

You can choose your desired package manager to install cranberrry in your React application.

npm install cranberrry

Intialising AI Agents

To initialise AI Agents you need to use CBAgent interface to start defining your Agents.

file

agents.ts

import type {CBAgent} from "cranberrry"

const orion: CBAgent = {
      id: "orion",
    name: "Orion",
    description: "A helpful assistant that can answer questions and help with tasks",
    face: "https://i.imgur.com/1234567890.png",
    designation: "Assistant",
    introduction: "I am a helpful assistant that can answer questions and help with tasks",
    isActive: true,
    isAvailable: true,
    isBusy: false
}

Export Your Defined AI Agents

To export your defined AI Agents you need to use CBAgent[] interface to start defining your Agents.

file

agents.ts

import type {CBAgent} from "cranberrry"

const agents: CBAgent[] = [orion] // add many more

export default agents;

Intialise Agents Store

Intialise agents store using createCBStore to supply all the ai agents that we have defined previously in agent.ts file to our frontend react application.

file

agentStore.ts

import { createCBStore, CBAgentReducer, type CBState } from "cranberrry";
import agents from "./agents";

const initialState: CBState = {
    agents: agents,
    tasks: [],
}

const agentStore = createCBStore(CBAgentReducer, initialState)  

export default agentStore

Finally Wrap It Up With Provider

Wrap your main.tsx or app.tsx or entry file with CranberrryProvider to supply the agentStore to your application.

file

main.tsx

import App from './App.tsx'
import { CranberrryProvider } from 'cranberrry'
import agentStore from './agentStore.ts'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <CranberrryProvider store={agentStore}>
      <App />
    </CranberrryProvider>
  </StrictMode>,
)