Integrations

Highlight a Jira story on any page and open it in SFProto

1. 1.Install SFProto: Prototypes for Salesforce from the Chrome Web Store.
2. 2.Highlight a user story or requirement in Jira, Confluence or Google Docs, right-click and choose "Prototype this in SFProto".
3. 3.Or click the SFProto icon in your browser toolbar to type a prompt or open a prebuilt Lightning template.

Install from the Chrome Web Store →

The extension asks only for the contextMenus permission, sends only the text you highlight when you click the menu item, and stores nothing itself.

Embed a live prototype in a page

1. 1.In the studio, open Share and create a link set to "Anyone with the link".
2. 2.Copy the embed code.
3. 3.In Confluence, add an Iframe macro (or an HTML block) and paste it in.

Sign-in inside an embed is often blocked by browsers, so embeds work best with a link anyone can open.

Attach the prototype and its acceptance criteria to a ticket

1. 1.Create a share link and paste it into the ticket; Jira turns it into a smart link.
2. 2.Use Export in the studio to generate the user story, the data dictionary and Gherkin scenarios.
3. 3.Copy the Gherkin section straight into the ticket description.

Drop a clickable prototype into a doc

1. 1.Create a share link.
2. 2.In Notion, type /embed and paste the link.

Export the frame, attach it, and the AI builds the page to match

1. 1.In Figma, export the frame as PNG or PDF (Export at 2x keeps the text readable).
2. 2.In SFProto, attach the file to an AI request with Attach wireframes.
3. 3.Say which object the page is for, and the AI matches the layout, fields and actions.

The Figma API integration is not built: SFProto does not read Figma files directly, and nothing syncs back. The exported PNG or PDF is the bridge.

Import a diagram as a process flow

1. 1.In draw.io, save or export the diagram as a .drawio (or .xml) file; compressed files are fine.
2. 2.In a project, open the Process flows workspace, then ⋯ → Import a draw.io file and choose it.
3. 3.Swimlanes become lanes, pools and containers; shapes, colours, labels and connectors come across. A note says what had no match.

Images in the diagram are left out — add them again as your own SVG shapes. The way back out is PNG, SVG, PDF or JSON; there is no .drawio export.

Drive SFProto from your AI tool with MCP

1. 1.Make a token on your Account page (Account → MCP tokens). It is shown once; every MCP call sends it as an Authorization: Bearer header.
2. 2.Claude Desktop: in claude_desktop_config.json add an "sfproto" server with command "npx" and args ["-y", "mcp-remote", "https://www.sfproto.com/api/mcp", "--header", "Authorization: Bearer ${SFPROTO_MCP_TOKEN}"], with your token in that server's env as SFPROTO_MCP_TOKEN, then restart it.
3. 3.Cursor or Windsurf: add a remote MCP server at https://www.sfproto.com/api/mcp (Streamable HTTP) with the header Authorization: Bearer <your token>. Tools that only speak the older SSE transport use https://www.sfproto.com/api/mcp?transport=sse.
4. 4.Your tool can then generate prototypes, read saved pages and export LWC code.

MCP calls are free and never use AI credits; SFProto builds them itself rather than asking the AI. Tokens can be revoked at any time from the Account page.

Deploying a prototype into an org

1. 1.Export in the studio produces Lightning Web Component scaffolding (.html, .js, .js-meta.xml, .css) for a developer to take into a project.
2. 2.Direct deployment to an org, and reading real metadata, are not built.

SFProto never connects to a Salesforce org, so nothing you build here can touch real data.

Paste a share link into a channel or a chat

1. 1.Create a share link and paste it into the channel.

Shared prototypes are deliberately not indexed, so a link may appear as plain text rather than a rich preview.