Cut B2B Commerce Costs with AI and Extensibility | Dreamforce 2025

Hi everyone. Thank you so much for joining us this morning. I know it is early and the last day of Dreamforce, so we're really happy that you're all here. Today we're going to be talking about AI and extensibility for our B2B commerce product. Specifically, we're going to be focusing on our open source initiative. So we recently open sourced a lot of components for you all and we're excited to show you how you can build faster than ever with them. Before we dive in. The typical forward looking statement that we always have to show. I know you've seen this many times today, but I want to point out specifically for this demo we're going to be using a third party dev tool called Cursor in conjunction with our open source components. So I want to make sure that you're aware of that. If you have any questions, feel free to reach out to us after or contact your AE or SE as well. But before we jump in, I'm Richard Tanaka, Product manager here on B2B Commerce, focusing on our storefront extensibility initiatives and open source initiatives. And I'm here with Sandeep.

Hey, I'm Sandeep Chaudhary, principal software engineer with B2B Commerce, leading the initiatives on open source components and other stuff related to the B2B storefront.

Awesome. Well, the way the industry is going is changing. The future of B2B commerce is open source, AI powered and developer friendly more than ever. Today our customers and partners spend hundreds of hours rebuilding components for simple customizations. The way it works today is if you have a component on your storefront that you want to change, you have to fully build it from scratch. If the option isn't available in the builder and personally we think it's a total waste of time. We want to make it so you can develop a lot faster with our open source components. So what we did is we open sourced many of our components so you can actually start with those components as a baseline, you can customize on top of them and actually utilize AI to make those customizations as well. So our estimate is that It'll be about 75% time saved while using Cursor and our open source components. And a great thing with this is you get four full upgrade and versioning control as well as you're really taking ownership of these components and building on top of them. But today at Salesforce we're building faster than ever. Our dev teams are working 10 times faster than they were just about a year ago. And this is with AI tools such as Cursor, we personally use Cursor to be able to work with the LLM to code directly with it, almost like pair coding with AI. And the way you can do it today is you can actually write your product requirements in English and engineering requirements in English and you can work back and forth with that AI and iterate really in real time. And the great thing is once you do all that and you're ready to deploy, you can, in just a couple simple commands, you can do this all in real time. And we're going to show you how to do that today. But before we jump into our demo, we're going to show our 25 components that we have open sourced today. So available today. I know I keep saying that, but a lot of times when you're at Dreamforce, they say, oh, available in the future. No, you can go online right now to our git repo and you can access over 25 components that you can use today across our home product cart and checkout domains. But now I'm going to hand it over to Sandeep, he's going to actually take you through that git repo that's live and explain a little bit about what open source is as well.

All right, thanks Richard. So as Richard already mentioned, and this might be a new term for you, especially for the B2B commerce, these open source components, as he was explaining, B2B storefront is built on top of the Experience Cloud and we have LWC component powering those UI the builder components which we see and modify in the Experience Builder. But when it comes to the customizations, the customer has to go back, build from scratch, replace the existing components to get the look and feel that they are looking for. But here is where opencode open source components shine. So we are giving you the open source codes for the existing components that are available on the B2B storefront today. So this is a public git repo that you are seeing on the screen right now. We have come up with the complete SFDX project which contains Multiple components including 25 top level components which can be replaced and with all their inner components available with their source code right now over here. So as you can see, this is the long list of components that are available with their LWC code and along with their labels and the related files. Now let's see how we can use them. If I go back over here, there is a readme file available in the same public git repo which has an exhaustive list of steps which can be either manually followed or with the power of AI will show you how all all these components can live in your project directory and can be deployed to your storefront seamlessly and without even writing a single command in the terminal. So we'll be demoing a couple of use cases and we'll show the power of UI along with this open source components. So let's jump into one of the use case. So this is one of our customers, Cirrus, who is into solar powered energy equipment. So they run their B2B business selling equipments like solar panels, charging sets, batteries and related equipments. So as you can see, they have. Sorry. So as you can see over here they have their storefront up and running. It's already live, but like any other customers they have more requirements which they would like to spice using the open source components and with the power of AI. So let's help them. Over to you, Richard.

Yeah. So Sirrus has a revenue issue and they want to drive more cart and product conversions. So there's two changes that they would like to make. The first one is the enhanced cart badge. They want to change the cart badge component. You can see here what the typical cart badge component looks like in experience, cloud and commerce today with the the one product there. And as you add products to that cart, that number is going to go up. But Cirrus wants to make a change and actually showcase the total amount of the cart below it. This way they can actually show upselling messaging such as add more for free shipping or add more for a discount as well. So they want to help push customers to go from cart to checkout and they also want to go from product to cart as well. So on the product detail page they want to show inventory updates. So if the customer goes to the product detail page of a product they're interested in and it is low in stock, we can check the inventory and we can actually nudge them over to really push them to complete their checkout and create that order. So these are the two initiatives on the business side that we want to do for Cirrus and now Sandeep's gonna take us through some of the technical requirements.

Okay. On the first look, it looks like these are just the UI customization that needs to be done to replace that cart badge, showing the total cart value over there. But that's not actually. It involves an integration with the inventory system, which can be a native inventory system provided by Salesforce or it can be a third party as well, showing the urgency messages, showing the messages related to the stock availability. This all happens in real time, so we need to determine those thresholds, compare the values in real time and show the urgency messages accordingly. Along with that, of course we need certain UI customizations wherein these open source components will fall in place and they will help us to do so. So let's jump in to the actual demo, how a developer in its day to day life will kind of work on these customizations using the power of open source components along with AI, for which, as Richard mentioned, we will be leveraging cursor as an ide. So first thing first, I need to set up my SFDX project so that I can connect my SF Org and start from fresh over here. This is a blank IDE right now and I have prompted my cursor to create an SFDX project and connect to it to my devop. I have provided the prompts, I have provided all the instructions, and here you go. You can see the cursor has pretty quickly created the entire project directory for me. And it's also trying to connect to the SF Org that I have provided. It has automatically launched the browser. When I provide the password over here and click on login, it tries to authenticate. And here it is. The authentication is successful. And now if I go back to my cursor id, I can see the cursor. The AI is also trying to verify the connection with the SF Org so that the further deployment can happen. Each component that I'll be deploying, it'll be automatically using this connected org, which has been done without even writing a single command so far on the terminal. And as you can see, the entire setup is ready in just few minutes. So the SFTX project along with the SF or connection, it has completed that. Now let's move on to the second step wherein I need to pull in all the open source components in my current project directory. Even for that I am prompting the cursor with the link to the public git repo, wherein it will go through the readme file, it will go and check what all steps exist today over there and accordingly we'll try to pull all the components bring into my project directory and also help me in deploying those to my active B2B storefront. So as right now it's examining the readme file, it's going through all the steps and accordingly preparing the SFDX commands which will be executed in the terminal so that all the open source components can be brought in here, right here in my project directory. And as you can See over here, the entire project structure from the public git repo is present over here with all the LWC components with their labels, the related files ready to be deployed onto my storefront. Along with this with the connected Org, the readme file also says how you can bring your digital experience into your project directory. So my current storefront that is present in my org that has been connected via cursor, it is bringing all the digital experiences over here, deploying all these components to the STO B2B commerce storefront that I have mentioned. And here you go, it has completed the deployment and showing me the next steps which can be followed to take this further with the enhancements that we are looking for. Okay, so before we jump in into the next step, I would like to show the instructions that I have prepared and I'm providing them as the prompt. So this is what my objective is to upgrade my existing cart batch components, which was my first requirement. So that instead of showing the line item count on the top, I can show the total cart value and along with certain messages which can be shown to the user based on their total cart value. So for example, if the total cart value amount is greater than $900 but less than 1,000 then it will show a message to add certain items to bring it to thousand dollars so that extra 10% bulk discount can be given to the customer. So I have explained my objective. I have mentioned to cursor via my prompt like I would like to enhance the existing card batch component which is available via the open source components. And here it goes, you can see it has already started making the changes into the existing components, making it at the UI level, making the changes in the JavaScript file, changing the labels and eventually modifying the entire content, the card batch component for me so that it can be replaced on the experience builder to show the enhancement to get the look and feel that the customer is asking for. It is also creating few test files so that eventually when we deploy it, it can be automated and the test cases can run in. So all via the power of AI and with enhancing the current card batch component itself instead of building it from the scratch. So here you see the card batch component has been completely modified. It has been deployed as well to the connected Org and now we'll go and see how we can replace the existing components and show it in real time and see the actual cart value on the cart badge. So here we go. So this is the experience builder for the storefront which we saw for the services Org over here as you can see on the left side, under my components, I can see the cart batch component has been deployed. So this is not the out of the box component that is available on the storefront. Rather this is the one which has been modified using the open source components. So what I need to do is remove my existing card batch component, replace it with the new one, and finally, as we usually do with any of our custom components, so as you can see, it has replaced it. Publish the storefront. So as it is publishing, just to save time over here I'll show you how it looks like eventually once it is published and the changes are available. So here we go. Now we have added certain items to this storefront and in real time, instead of showing the actual cart value, instead of showing the total count of the products available in the cart, it is showing you the total cart value based on the items that has been added to the cart. Now let's try one more thing. So right now the amount that you see is $796. Let's try to bring it to above $900 to see if it can show us the real time messages that we are looking for. So I'll go for go into the PLP where all my products are listed and then I will try to add one of the products to bring that amount to more than $900. Let's add this to the cart. Okay, so I can see the item has been added and if I come back to the cart over here, you can see the change. So the amount has increased from $900, but because it hasn't reached thousand dollars yet. So if I hover upon it, it will show me a message that we need to add around $25 more to get it to $1,000 so that I can get 10% bulk discount. So this is the power of open source components along with AI. We have just done this in few minutes in front of you. Okay, now let's move on to the next use case that we have. The next use case, just to remind you, it was on the product detail page wherein I want to show certain urgency messages to the user based on the current inventory. If the stock is low, the user should see it and accordingly they can go for buying those specific equipments. So here we go. We start with the prompt wherein we are defining our objective, the triggers, the alerts that we would like to see along with the exact messages that we would like to see on the UI if the specific item is low in stock. So now once we have explained everything via the prompt here we go and Cursor start doing its job. So right now it's first, first of all exploring the current component which is responsible for this kind of check. If you see over here in my prompt, I have nowhere mentioned the name of the component. Rather Cursor is identifying that based on my current layout, based on my current components, and it's going on and figuring out which component is responsible for this kind of change. It has figured that out and it's preparing a new component for showing the banner so that it can be embedded into my existing components to make those real time checks, to check the thresholds, to compare the values and finally show the banners. So product purchase options is the existing components wherein it has started to bring changes, embedding the current new component that it has created and finally adding the banners along with the labels which can be showed to the user. Here you go. Along with the changes, it has already deployed the component to the storefront and again it is available to be replaced in the Experience builder. And finally, once we republish the storefront, we can see the changes. So just to show you which component it was, as you can see over here, the product detail purchase options is the one which is the existing component where it has done all the changes, brought in the new banners, brought in the new components to show the messages and once we republish the website, the storefront from here, which I am right now doing it, but just to save the time over here I'll show you how it will look like. So once the changes are available, as we go to the PDB page, you can see this is one of the Solar Power bank, one of the products available on the storefront. Over here it has various variants. So now if I change it to change the variant by changing the color to orange, we see that there is no message over here as such for the product urgency or for the item being low in stock, but if I change it to one of the sizes, I can see the message comes up, which means for this specific variant, the items that are left in stock are quite low and we need to show this urgency messages to the user so that they can act fast and the item can be purchased. So again, the second use case, which is doing a real time check based on the inventory system by making an API call. All of this done via the power of open source components along with the cursor and the AI. Over to you, Richard.

Wow, that was pretty spectacular. It was just about four prompts to be able to do both of those changes. And before this customers would have to start from scratch and actually rebuild those components themselves. So our estimate is that it would take two to three weeks actually to develop that LWR development, a week of backend integration and also a week of testing. And especially with the testing you have to go a lot more in depth because you're not starting with one of our open source components, you're actually building it from scratch. So overall we expect it to be about four weeks of development, about two to three developers. It cost about 15 to 20 thousand dollars and we just did that in four prompts on stage today and we estimate it would save you at least $10,000 in this example. We're almost out of time but I do want to reiterate today that these are all available for you to access in our public git repo across the home product cart and checkout domains and we have more coming soon and we're excited to see what you all build. Thank you so much for joining us this morning.