Learn how to ship impactful customer journeys with Builder

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Contact Sales
Platform
Developers
Contact Sales

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

for developers

When generating code, you can provide specific instructions to the AI so that the output meets your requirements.

You can tell the AI to write code to your specifications in two ways:

  • Using natural language to describe what you want.
  • Providing example code as a paradigm for the style you want.

To get the most out of this document, you need:

  1. In the Visual Editor, in the Generate Code panel, click Quality code.
  2. Click the Settings Wheel at the left of the panel.
  3. In the Instructions panel, create or select provided custom instructions template. For ideas on what you might enter, read Providing custom instructions later in this document.
  4. In the Match code style panel, enter some code that is representative of the style you want to generate. For ideas on what you could enter, read Matching output to your code style later in this document.

Custom instructions play an exciting role in guiding AI-driven code generation in Builder to produce code tailored to your specific requirements and preferences. You can add instructions in plain, human language so the Generated Code panel uses your preferences as a guide.

Image of Generated Code panel with the Custom Instructions section in Settings pointed out. An annotation says, "Add custom instructions here".

There are three suggested instructions in the Generated Code panel.

  • General Instructions: This prompt guides the AI to generate code that is clean, concise, and easy to read with descriptive names for variables, functions, and classes, with comments provided for any complex sections. Following these practices ensures that the code is both readable and maintainable, aligning with general best practices for development.
  • Match Code Style: Selecting this prompt instructs the AI to closely follow the style of a provided code sample. The AI considers formatting, naming conventions, and stylistic consistency to ensure the generated code feels cohesive. This approach helps maintain consistency throughout the codebase.
  • Accessible Code: This prompt directs the AI to incorporate HTML accessibility best practices, ensuring compliance with WCAG standards. The generated code includes semantic HTML tags, descriptive alt text for images, structured headings, ARIA attributes, and supports keyboard and screen reader accessibility for all interactive elements as much as possible. The result is code that is inclusive and usable for all users.

In addition to the prepared suggestions in the app, you can enter any instructions using natural language in the Custom instructions input to provide guidelines for the generated code output. Some examples might include:

  • Refactor code into separate components: Request that the AI break down the generated code into multiple components to enhance modularity and code organization.
  • Enhance interactivity: Ask the AI to add interactive elements, such as click events or animations, to make the user experience more engaging.
  • Incorporate props for maintainability: Instruct the AI to incorporate props into the code structure to make it easier to manage and reuse components across the application.
  • Custom styling instructions: Provide detailed styling instructions, including specific CSS classes or styling frameworks, so that the generated code matches your design aesthetic.
  • Implement accessibility features: Tell the AI to incorporate accessibility best practices, such as ARIA attributes or keyboard navigation support, to enhance usability for all users.
  • Optimize performance: Request optimizations for performance, such as lazy loading of resources or code splitting, to improve the overall speed and efficiency of the application.
  • Integrate external libraries or dependencies: Specify the inclusion of external libraries or dependencies required for additional functionality or feature support within the generated code.
  • Custom logic or business rules: Provide specific business logic or functional requirements that need to be implemented within the codebase, to align with project objectives.

in beta

To specify your code style as a paradigm for the generated code:

  1. Click on the Get Code icon.
  2. In the Generated Code panel, click on the Settings wheel at the bottom left.
  3. In the Match my code style input field, enter some code that uses the style you want to guide the AI in generating code.
Image of Generated Code panel with the Match code style section in Settings pointed out. An annotation says, "Add code example here".

Here are several examples of different styles of React component that you could use to inform the AI of the preferred output style. You could provide a basic, clean React style:

// Basic React 
function MyComponent({ title, description }) {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Define types inline:

// Using inline type definitions
function MyComponent({ title, description }: { title: string, description: string }) {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Extract type definitions with React.FC:

// Using React.FC with an extracted type definition
type Props = { title: stirng, description: string }
const MyComponent: React.FC<Props> = ({ title, description }: { title: string, description: string }) => {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Applying JSDocs comments:

// Using JSDocs comments
/**
 * Represents the props for MyComponent.
 * @typedef {Object} Props
 * @property {string} title - The title of the component.
 * @property {string} description - The description of the component.
 */

/**
 * MyComponent functional component.
 * @param {Props} props - The props object containing title and description.
 * @returns {JSX.Element} JSX representing the MyComponent.
 */
const MyComponent: React.FC<Props> = ({ title, description }: { title: string, description: string }) => {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Certain parts of this workflow uses AI, for more information, visit How Builder Uses AI.

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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

Product

Platform Overview

Integrations

What's New

Open Source

Builder

Builder

Mitosis

Mitosis

Qwik

Qwik

Partytown

Partytown

Popular Guides

From Design to Code Guide

Composable Commerce Guide

Headless CMS Guide

Headless Commerce Guide

Composable DXP Guide

Design to Code

Resources

Blog

Knowledge Base

Community Forum

Partners

Templates

Success Stories

Showcase

Resource Center

Frameworks

React

React

Next

Next.js

Qwik

Qwik

Gatsby

Gatsby

Angular

Angular

Vue

Vue

Svelte

Svelte

Remix logo

Remix

Nuxt

Nuxt

Hydrogen

Hydrogen

See All

© 2024 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Security & Compliance

Cookie Preferences

Gartner Cool Vendor 2024