8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact sales

8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

in beta

Builder can leverage multiple external tools when designing your Project with Fusion. On this page, learn to connect and utilize Built-in integrations.

  • Connect to built-in integrations through your MCP servers page.
  • By providing a connection to an external service, Builder's AI can recognize and access data internal to that service.

Netlify is a powerful platform for deploying fast, reliable web projects. Once connected, Builder’s AI can deploy your Fusion project to Netlify with a straightforward prompt.

  1. Go to MCP servers.
  2. On the Netlify tile, click + Connect.
  3. In the modal that opens, click the Connect To Netlify button.
  4. When Builder requests access, click the Authorize button.
  5. Tell the AI to deploy to Netlify.

The video below shows connecting and deploying to Netlify.

This next video shows adding Netlify forms to a Contact Us page by prompting the AI:

Linear is a purpose-built tool for planning and building products. Once you've connected to Linear, share a Linear ticket URL with Builder AI to have it attempt to solve that ticket.

  1. Go to MCP servers.
  2. On the Linear tile, click + Connect.
  3. In the modal that opens, click the Connect To Linear button.
  4. When Builder requests access, click the Approve button.

In the video below, a Linear ticket is copied and shared within a project. That ticket's details are read by the AI, and a design change is implemented changing the Full Name field to two separate fields. A pull request is then created from within Builder.

Neon is a serverless database platform designed to help you build reliable and scalable applications faster. Once you've connected to Neon, Builder AI can connect to your database schema to design new features based on your stored data.

Begin by connecting to Neon. On your MCP servers page, click the + Connect button next to Neon. You will then be prompted to connect to your Neon organization.

  1. Go to MCP servers.
  2. On the Neon tile, click + Connect.
  3. In the modal that opens, click the Connect To Neon button.
  4. When Builder requests access, click the Approve button followed by the Authorize button.

Then, in your Builder Project, describe to the AI what you'd like changed. Although the AI might be able to figure out what you want based on the context, it is best to provide any relevant IDs, schemas, or table names if possible.

In the video below, the current implementation of an Employees tab uses mock data. Builder's AI is then asked to implement a server-side route that returns paginated employee data served from a Neon database.

Supabase is the Postgres development platform. Once you've connected to Supabase, Builder AI can connect to your database schema to design new features based on your stored data.

Begin by connecting to Supabase. On your MCP servers page, click the + Connect button next to Supabase. You will then be prompted to connect to your Supabase organization.

  1. Go to MCP servers.
  2. On the Neon tile, click + Connect.
  3. In the modal that opens, click the Connect To Supabase button.
  4. When Builder requests access, click the Approve button followed by the Authorize button.

Then, in your Builder Project, describe to the AI what you'd like changed. Although the AI might be able to figure out what you want based on the context, it is best to provide any relevant IDs, schemas, or table names if possible.

In the video below, the current implementation of a Dog Breed Explore uses mock data. Builder's AI is then asked to implement a server-side route that returns actual data served from a Supabase database.

Read more about Fusion and MCP servers, or learn about other ways to Add context to projects.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024