Agentforce – MIAW Custom Client on Vercel
Summary
This project demonstrates how to build a custom web-based chat client for Salesforce Agentforce using the Messaging API v2. It addresses challenges integrating real-time AI chat functionality within Salesforce using React and Node.js, hosted on Vercel. The solution highlights dealing with platform limitations like Vercel's inability to support true server-sent events by implementing a polling strategy and ensures proper handling of Salesforce tokens and conversation UUID requirements. Salesforce teams can use this as a foundation to create interactive AI chatbots integrated deeply with Salesforce messaging, adapting the approach for robust, scalable UI and backend integration. The detailed architecture, code examples, and debugging tips make it practical for developers ready to implement advanced Agentforce custom clients.
Takeaways
- Implement custom chat clients using Salesforce Messaging API v2 with React and Node.js.
- Use polling instead of SSE on Vercel to handle real-time chat due to platform limitations.
- Extract organization ID from Salesforce JWT tokens, not environment variables.
- Ensure conversationId is a lowercase UUID per Salesforce API requirements.
- Deduplicate polled chat messages by message ID to avoid duplicates in UI.
This project implements a custom web-based chat client for Salesforce Agentforce using the Salesforce Messaging for In-App and Web API v2. The application provides a real-time chat interface where users can interact with Salesforce AI agents. I have hosted it on Vercel. Find the complete code here: https://github.com/SalesforceDiariesBySanket/sample-agentforce-custom-client/tree/main This blog and project are inspired by the original work in charlesw-salesforce/sample-agentforce-custom-client . I’ve built upon that foundation to add explanations, examples, and enhancements for better understanding. Live Demo : Deployed on Vercel Technology Stack : React, TypeScript, Node.