Test Your Agentforce Agents Locally with a React Chat App

When building Agentforce Agents, you need a way to test them over the Agent API and see exactly what’s coming back. This open-source React app gives you a local chat interface with a raw API response panel—so you can observe every session lifecycle event, debug responses, and validate your agent’s behavior before integrating it into a production app.

Source Code: agentforce-react-app-agent-api on GitHub

What It Does

A local React + Express app that lets you chat with your Agentforce Agent through the Agent API. The left panel is a chat interface; the right panel shows every raw JSON response from the API—session creation, messages, and termination.

The Express proxy handles OAuth token exchange and forwards calls to Salesforce, keeping secrets out of the browser and avoiding CORS issues.

┌─────────────────┐         ┌─────────────────┐         ┌──────────────────────┐
│   React Client  │  /api/* │  Express Proxy  │  HTTPS  │  Salesforce Agent API│
│   (Vite :5173)  │────────>│   (:3001)       │────────>│  api.salesforce.com  │
│                 │<────────│                 │<────────│                      │
└─────────────────┘  JSON   └─────────────────┘  JSON   └──────────────────────┘

Prerequisites

You need the following configured in your Salesforce org:

1. An Agentforce Agent — Note its 18-character ID (starts with 0Xx).
2. An External Connected App configured for Client Credentials OAuth with scopes api and sfap_api, and a Run As user with permission to invoke the agent.
3. My Domain enabled.

Setup

git clone https://github.com/MrParvinder/agentforce-react-app-agent-api.git
cd agentforce-react-app-agent-api
cp server/.env.example server/.env

Edit server/.env:

SF_DOMAIN=your-domain.my.salesforce.com
SF_CLIENT_ID=YOUR_CONSUMER_KEY
SF_CLIENT_SECRET=YOUR_CONSUMER_SECRET
AGENT_ID=0XxXXXXXXXXXXXXXXX
PORT=3001

Install and run:

npm install && npm run install:all
npm run dev

Open http://localhost:5173, click Start session, and start chatting with your agent.

The Raw API Panel

The right-side panel is the key developer feature. Every Agent API response appears as raw JSON, letting you:

• See the full session lifecycle (start, messages, end)
• Inspect the exact response payloads your agent produces
• Debug issues with response formatting
• Validate structured output from Custom Connections

Troubleshooting

Conclusion

Clone the repo, plug in your credentials, and you have a local testing tool for your Agentforce Agents in under five minutes.

Get the code: github.com/MrParvinder/agentforce-react-app-agent-api