--- schema_version: "1" id: 07083d59dca5e149ace01dc5ea8b10e813a96a138dd6dbbc5811766b16cf7632 title: Get Started with Agentforce Commerce Vibes collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/commerce-vibes/guides/cv-build-storefront-next-project.md canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/cv-build-storefront-next-project.html source_site: developer.salesforce.com content_type: documentation content_hash: 2de88bcebd93f6ca14441df4f8f217ee95ba03d60d649345ee49d69a14e9d734 products: - Composable Storefront - Salesforce APIs --- # Get Started with Agentforce Commerce Vibes Build and administer a Storefront Next project with Agentforce Commerce Vibes. The B2C workflows require that you install the extension and connect to a Salesforce org. ## Build a Storefront 1. Install the Commerce Vibes extension and log in to your Salesforce org as described in [Install and Launch the Commerce Vibes Extension](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/cv-install-extension.md). 2. If you haven't done so, launch the extension by clicking the ![Commerce Vibes icon](https://developer.salesforce.com/docs/media/commerce-vibes/cv-com-vibes-icon.png '{"class": "image-icon-sm"}') in the Activity Bar. A Welcome page appears. **tip:** When you open a folder that doesn't contain a storefront project, the Welcome page is displayed. When you open a chat panel in Commerce Vibes, the chat displays project-aware example prompts: prompts to get started or prompts that apply to your storefront type after creating a storefront project. 3. To create a sample project for Storefront Next, click the Storefront Next tile in the Welcome page. 4. Choose to create a new project, and provide the storefront name in the chat. The output of the executed commands is displayed in the Terminal tab. **tip:** As the agent executes tasks, it asks you to approve some tasks. You can configure when the agent asks for approval to run actions in Settings. See [Agentforce Commerce Vibes Settings](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/cv-settings.md). 5. Answer questions about the vertical template and B2C Commerce settings in the Terminal. Provide the configuration information of your sandbox instance or accept the defaults to use the B2C demo sandbox instance. Salesforce provides the B2C sandbox demo instance to use for samples but you don't have administration privileges to manage this instance. After the storefront is created, VS Code opens the project folder in a new window. 6. Go to Commerce Vibes by clicking the ![Commerce Vibes icon](https://developer.salesforce.com/docs/media/commerce-vibes/cv-com-vibes-icon.png '{"class": "image-icon-sm"}') in the Activity Bar. 7. Optionally, write more prompts to customize the storefront. 8. To understand the contents of the project that was created, write this prompt: `Explain Storefront Next project structure.` 9. To build and run the storefront locally, type this prompt: `View my storefront.` ## Administer Your B2C Commerce Instance Commerce Vibes runs agent skills from the [Agentic B2C Developer Toolkit](https://developer.salesforce.com/docs/commerce/b2c-commerce/guides/b2c-developer-tooling.md) that perform administration tasks in your B2C Commerce instance. Here's an example prompt for running a job on a sandbox instance. - `Run the search indexing job on my sandbox specified in the dw.json file.` **note:** Configure credentials with permission to run the job on the selected instance. You can use a project `dw.json` file, global configuration, or environment variables. See [Optional: Configure B2C Commerce Credentials](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/cv-install-extension.md#optional-configure-b2c-commerce-credentials). ## Search the B2C Documentation The toolkit provides search across official B2C Commerce developer, administrator, and merchant documentation. Ask your assistant to find relevant guidance and explain how it applies to your task. Here are some example prompts. - `Search the docs about data fetching in Storefront Next.` - `Search the docs about the headless architecture in Page Designer.` ## Browse the B2C Toolkit Familiarize yourself with the MCP server tools and agent skills from the [Agentic B2C Developer Toolkit](https://developer.salesforce.com/docs/commerce/b2c-commerce/guides/b2c-developer-tooling.md) available in Commerce Vibes. 1. In VS Code, in the Agentforce Commerce Vibes panel, click the **B2C Toolkit** tab. 2. Click **MCP Servers > B2C Commerce DX** to browse the MCP tools available for B2C development. 3. Click **Skills** and check out the agent skills available for B2C development. 4. Click **Rules** and check out the deterministic rules. ![Browse the toolkit](https://developer.salesforce.com/docs/media/commerce-vibes/cv-toolkit.png '{"class": "image-xl"}') **note:** To complement the built-in toolkit and provide more development assistance, add other MCP servers, skills, and rules. For example, reference an MCP server that assists with React development, or add a rule for team development instructions to follow. Rules are saved in `.afv/` folder in your project. ## See Also - [Chat with Agentforce Commerce Vibes](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/cv-chat-interface.md) - [Commerce Cloud Developer Center](https://developer.salesforce.com/developer-centers/commerce-cloud)