Agentforce Custom Chat Client

A modern React-based chat interface implementation for Salesforce's Messaging for In-App and Web APIs, designed to work with Agentforce Service Agents. Built with React, TypeScript, Tailwind CSS, and Fastify.

🎥 Watch the Demo Video

Features

• 💬 Real-time messaging using Server-Sent Events (SSE)
• 📝 Live typing indicators
• 🎙️ Voice input support with speech recognition
• 🌓 Light/dark theme support
• 📱 Fully responsive design

Prerequisites

• Node.js >= 20.0.0
• pnpm >= 8.x
• A Salesforce org with Messaging for In-App and Web configured
• An Agentforce Service Agent deployment

Quick Start

1. Clone the repository:

git clone https://github.com/charlesw-salesforce/agentforce-custom-client.git
cd agentforce-custom-client

2. Install dependencies:

pnpm install

3. Configure environment variables:

cd server
cp .env.example .env

Update .env with your Salesforce credentials:

SALESFORCE_SCRT_URL=your-scrt-url
SALESFORCE_ORG_ID=your-org-id
SALESFORCE_DEVELOPER_NAME=your-developer-name
PORT=8080

4. Start development servers:

# Start both client and server
pnpm dev

# Or start individually:
pnpm dev:client   # Client at http://localhost:5173
pnpm dev:server   # Server at http://localhost:8080

Available Scripts

• pnpm dev - Start both client and server in development mode
• pnpm dev:client - Start client development server
• pnpm dev:server - Start backend development server
• pnpm build - Build both client and server
• pnpm start - Start production server

Environment Variables

Server

Variable	Description	Required
SALESFORCE_SCRT_URL	Salesforce SCRT URL	Yes
SALESFORCE_ORG_ID	Salesforce Organization ID	Yes
SALESFORCE_DEVELOPER_NAME	Salesforce Developer Name	Yes
PORT	Server port (default: 8080)	No

Client

Variable	Description	Required
VITE_API_URL	Backend API URL	Yes

Setting Up Your Salesforce Organization

1. Create and deploy an Agentforce Service Agent (video tutorial)
2. Create a Custom Client deployment using your messaging channel
3. Copy the SCRT URL, Org ID, and Developer Name to your .env file

For detailed setup instructions, follow the Salesforce documentation.