The next generation of vibe coding is here! Salesforce first introduced the Model Context Protocol (MCP) server for Salesforce DX earlier this year, and at Dreamforce, we announced new tools that provide multiple ways to create new Lightning web components (LWCs) and improve the quality of existing components. The DX MCP Server is enabled by default in Agentforce Vibes, our enterprise-focused agentic integrated development environment (IDE). Agentforce Vibes is powered by a collection of MCP tools hosted by the DX MCP Server.

From prompt to production, our expanded MCP tools deliver accessibility, security, styling, tests, and more. Each tool is designed to perform a simple, targeted task. If you’re already using an agentic IDE, the connective power of MCP lets our server meet you where you are, so you can get the most out of today’s new tools for your LWC development.

In this post, we’ll cover three of the jobs that a large language model (LLM) can perform once it has access to our MCP tools:

  • Creating a Lightning web component from a Figma design
  • Enhancing existing components
  • Converting an Aura component to an LWC

These jobs use a subset of the 20+ component-related tools available. The tools we’ll cover here require the aura-experts and lwc-experts toolsets (in the Agentforce Vibes extension, for now, the a4d-lwc-rules-no-edit.md global rule must be enabled). The set up details may change as new tools are released, so always refer to the official documentation to configure the DX MCP tools.

Convert Figma designs into LWCs

With our Figma to LWC tool, you can have a working draft of a design in minutes. You copy a link to a component design in Figma and have the LLM generate an LWC. Then, the Salesforce Lightning Design System (SLDS) tools can review the component and CSS stylesheet.

The LLM needs a link to the design, so in Figma, you right-click and use Copy link to selection to share the portion of the Figma diagram that will be referenced in a prompt.

A screenshot of Figma with a two-level context menu showing “Copy as” and then “Copy link to selection” selected

Then, in Agentforce Vibes, add the copied Figma link into a prompt like this one:

The generated markup is displayed in the Agentforce Vibes UI (see screenshot below), with the pane on the left showing the task completed and a little bit of summary text.

Screenshot of the Agentforce Vibes UI showing the markup generated from the Figma diagram

Agentforce creates the content and structure from the Figma design. You can go a step further and double-check the styles with another prompt.

The  tool will perform tasks like cleaning up duplicate CSS generated from the Figma design and removing unnecessary comments. 

Many factors can affect the results, such as which tools are enabled, the LLM used, or the inherent randomness of generative AI. Some configurations or LLM models work better than others for a given task, so if something doesn’t work as well as you expect, make sure that the expected tools are being used or try a different model. Always review the generated code carefully to make sure that it meets your standards.

Use AI expert advice to enhance your components

To demonstrate an alternative to Agentforce Vibes, we’ll switch to Cursor, a third-party agentic IDE, with the Salesforce DX MCP Server installed and configured.

Let’s first check the accessibility of a component using this prompt:

Cursor understands the request, uses tools provided by the DX MCP Server, and updates the component, addressing the accessibility issues it found. The screenshot below shows a completed review in Cursor, displaying a number of changes to the HTML template and the final output from the LLM.

Screenshot of the completed review in Cursor.

You can also get an LWC security review. Since LLMs can get confused when they try to do too many tasks back-to-back, it’s useful to start a new conversation since, in this case, a security review is a different topic than accessibility.

Tip: As a general rule, remember that security spans across all layers (frontend and backend), so you should also check the code of your Apex controllers. You can use the Salesforce Code Analyzer MCP tool for this purpose.

Here are some other prompt ideas you might use individually to further improve your components:

Convert Aura components to LWCs

You can also migrate legacy Aura components to modern LWCs. The security and performance benefits are valuable, but without the MCP Server, this migration is a daunting task. 

Here’s the prompt we use to convert an Aura component into a Lightning web component:

The Cursor screenshot below shows four generated files (highlighted in green) with the JS file displayed in the editor. A summary comment at the top outlines the component’s public API and the events it fires.

Screenshot of the Cursor UI showing four generated files and a summary

The agent creates HTML, JS, CSS, the js-meta.xml file, and a couple of yaml files that help tools describe the component. Since we asked for a conversion scorecard, it scored the results and printed that in the output. Here’s a portion of the analysis:

After you fix any remaining issues, the new component will be ready for deployment.

Conclusion

There are over 20 DX MCP Server tools in just the Aura and LWC toolsets, and more than 60 tools across all toolsets. And while the DX MCP Server is currently in Beta, the tools we’ve demonstrated in this post are all GA, even though they require configuration to be enabled. The full list of Aura and LWC tools, including non-GA tools, is documented in the LWC Developer Guide.

You now have an expert partner: enterprise-grade tools guiding the LLM with trusted context and, in Agentforce Vibes, secured models provided by Salesforce. Your new partner translates designs into clean code, and helps you build and update components with precision, tackling complex requirements like accessibility. It modernizes your legacy code, delivering results with incredible speed. You’ll be the hero as you finish large tasks in hours, not days, with best practices addressed.

Your next great component is just a prompt away. Explore what you can create with these powerful AI tools. We can’t wait to see what you’ll build!

Resources

About the authors

Adam Reineke is a Senior Software Developer at Salesforce, where he works on the UI Platform team, specifically focused on getting AI to write better Lighting web components and measuring how well the LLMs do at this task. Follow Adam on LinkedIn.

Seth Tager is a Principal Software Developer at Salesforce. He has worked on Sandbox, Apex, Custom Schema, and AI App Dev, and he’s currently investigating ways to turn documentation into food for LLMs.