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.
- 💬 Real-time messaging using Server-Sent Events (SSE)
- 📝 Live typing indicators
- 🎙️ Voice input support with speech recognition
- 🌓 Light/dark theme support
- 📱 Fully responsive design
- Node.js >= 20.0.0
- pnpm >= 8.x
- A Salesforce org with Messaging for In-App and Web configured
- An Agentforce Service Agent deployment
- Clone the repository:
git clone https://github.com/charlesw-salesforce/agentforce-custom-client.git
cd agentforce-custom-client
- Install dependencies:
pnpm install
- 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
- 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
pnpm dev
- Start both client and server in development modepnpm dev:client
- Start client development serverpnpm dev:server
- Start backend development serverpnpm build
- Build both client and serverpnpm start
- Start production 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 |
Variable | Description | Required |
---|---|---|
VITE_API_URL |
Backend API URL | Yes |
- Create and deploy an Agentforce Service Agent (video tutorial)
- Create a Custom Client deployment using your messaging channel
- Copy the SCRT URL, Org ID, and Developer Name to your
.env
file
For detailed setup instructions, follow the Salesforce documentation.