DEV Community: Exploring Agentforce

How to Quickly Scaffold and Deploy a React App on Salesforce

Exploring Agentforce — Tue, 18 Aug 2026 08:32:20 +0000

Salesforce provides CLI templates that can quickly scaffold a React application with a ready-to-run React/Vite setup.

There are two approaches:

Generate a complete SFDX project with an internal React app.
Generate a React UI Bundle inside an existing SFDX project.

Both give you React boilerplate that you can run, explore, customize, and deploy. The main difference is how much Salesforce setup is included and what you need to do before the app is available in the org.

Prerequisites

You'll need:

VS Code
Salesforce CLI (sf)
Salesforce Extension Pack
A Salesforce org, such as a Trailhead Playground
Node.js

Check the CLI:

sf --version

Check your connected orgs:

sf org list

Set your default org:

sf config set target-org=my-org

Option 1: Generate a complete SFDX project

If you're starting from scratch, you can generate a complete project using the reactinternalapp template:

sf template generate project --name my-react-app --template reactinternalapp

This creates a new Salesforce DX project with the React application and the Salesforce metadata needed for an internal React app.

Install the dependencies and start the React app locally:

cd my-react-app
npm install
npm run dev

You now have a prebuilt React application that you can explore and modify.

Deploying the project

From the project root:

sf project deploy start --source-dir force-app

After deployment, assign the generated permission set to your user if required by the generated project - app appears in the App Launcher.

The advantage of this approach is that Salesforce gives you a more complete starting point. You're starting with an application rather than just a UI Bundle.

Option 2: Generate a React UI Bundle

This approach is useful when you already have an SFDX project and want to add a React application to it.

From the root of your existing project:

sf template generate ui-bundle --name ReactDemo --template reactbasic

The bundle is created under:

force-app/
└── main/
    └── default/
        └── uiBundles/
            └── ReactDemo/

Inside you'll find the React application.

Install the dependencies and run locally:

cd force-app/main/default/uiBundles/ReactDemo
npm install
npm run dev

This gives you the same basic experience you'd expect from a modern React/Vite application: start with working boilerplate and then build on top of it.

Deploying the UI Bundle

Go back to the SFDX project root and deploy the bundle:

sf project deploy start --source-dir force-app/main/default/uiBundles/ReactDemo

However, this is where the two approaches differ. The reactbasic UI Bundle gives you the React application itself, but you need additional Salesforce metadata to expose it as an internal application:

A CustomApplication under force-app/main/default/applications/
A reference from the application to the UI Bundle
A permission set that makes the application visible
Assignment of that permission set to your user

Once that setup is deployed and the permission set is assigned, the React application becomes available through the Salesforce App Launcher.

Which approach should you use?

If you're starting a new Salesforce project, the complete project template is the easier starting point. If you already have a Salesforce DX project and want to add React to it, use the UI Bundle.

Both approaches solve the same basic problem: get a working React application scaffolded quickly so you can start exploring and developing. **The difference is **where you start and how much Salesforce setup you have to do yourself.

How to Retrieve and Deploy AgentScript with Salesforce CLI

Exploring Agentforce — Sun, 07 Jun 2026 19:54:04 +0000

With Salesforce CLI, you can retrieve AgentScript metadata into a DX project, work with it locally in VS Code, and deploy changes back to your org.

Prerequisites

VS Code
Salesforce CLI
Salesforce DX Extensions
Agentforce org connected to Salesforce CLI (you can also connect Trailhead playground org, see this connection guide)

Step 1. Create a DX Project

sf project generate --name agentforce-demo
cd agentforce-demo

Step 2. Authenticate to Your Org


sf org login web --alias my-agentforce-org --instance-url https://your-org-name.develop.my.salesforce.com

Verify the connection:


sf org list

Set the default org:


sf config set target-org my-agentforce-org

Step 3: Find the Agent Name

To retrieve AgentScript metadata, you need the agent name. There are several ways to find it.

Option 1: Agentforce Builder

Open your agent in the new Agentforce Builder, and in the Agent Definition view find your agent Developer Name

Option 2: View Agents with Salesforce CLI

If an agent has at least one published version, it appears as Bot metadata:


sf org list metadata --metadata-type Bot

Example output:

Full Name
------------------
CC_Service_Agent
Sales_Agent
Support_Agent

Important: This command only lists agents that have a published version. Draft-only agents may not appear.

Option 3: List AgentScript Bundles

You can also list AgentScript bundles directly:


sf org list metadata --metadata-type AiAuthoringBundle

Example output:

Full Name
------------------
CC_Service_Agent
CC_Service_Agent_1
CC_Service_Agent_2

This command will list all versions of all agents your org (draft and published).

Step 4: Retrieve AgentScript Metadata

Retrieve a specific agent:


sf project retrieve start --metadata AiAuthoringBundle:Your_Agent_Name

For example: if your agent Developer Name is "My_Agent", the command will look like this:


sf project retrieve start --metadata AiAuthoringBundle:My_Agent

Retrieved metadata is stored in:

force-app/
└── main/
    └── default/
        └── aiAuthoringBundles/

The bundle contains the AgentScript configuration used by Agentforce Builder.

Step 5: Deploy Changes Back to the Org

After making changes locally deploy them back to the org:


sf project deploy start --metadata AiAuthoringBundle:Your_Agent_Name

Important: Draft vs Published Agents

⚠️ One detail that is not immediately obvious when working with Agentforce: only draft agents can be deployed, committed (published) agents are immutable. To deploy changes, first open Agentforce Studio and create a draft version of your agent, then you can deploy changes from VS Code. If you try to deploy to committed agent, you'll get an error message.

Action	Draft Agent	Published Agent
Retrieve	✅	✅
Inspect	✅	✅
Edit Locally	✅	✅
Deploy Changes	✅	❌

In practice, this means you can retrieve metadata from both draft and published agents, but deployment targets a draft version managed in Agentforce Builder.

Using Salesforce CLI makes it much easier to inspect AgentScript metadata, use version control, and work with Agentforce in a development workflow instead of only through the browser.

Useful links

Connect a Trailhead Org to Salesforce CLI guide.

Read more in the official documentation.

How to Connect a Trailhead Org to Salesforce CLI

Exploring Agentforce — Sun, 31 May 2026 14:45:05 +0000

Take Trailhead Learning beyond the browser

Salesforce Trailhead is a great way to learn Agentforce. You can level up this experience by connecting your Trailhead org to Salesforce CLI and working with AgentScript metadata locally in VS Code. Here’s a quick setup flow for connecting a Trailhead Agentforce org to Salesforce CLI 👇

Prerequisites:
• VS Code
• Salesforce CLI installed
• Trailhead org with Agentforce enabled

Step 1. Open your Trailhead org

Launch the Trailhead playground or developer org that you want to connect.

Step 2. Find your username

Profile → Settings

Step 3. Set password (if not set already)

Settings → Change My Password

Step 4. Connect org via CLI

Authenticate via browser, setting up alias for the org and providing your Trailhead org url:


# Authenticate with your Trailhead org

sf org login web --alias your-org-alias --instance-url https://your-org-name.develop.my.salesforce.com

Step 5. Verify connection

Confirm that the org was added successfully:


sf org list

Step 6. Set the default org

To avoid specifying the org in every command, set it as the default target:


sf config set target-org your-org-alias

Important: Use the Correct Login URL

Trailhead org URLs used for login usually look like:

https://your-org-name.develop.my.salesforce.com

NOT:
• login.salesforce.com
• develop.lightning.force.com

Once connected, you can retrieve AgentScript metadata locally in VS Code, experiment faster, and work with Agentforce in a more development-oriented workflow.