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:
- An integrated app. For detailed instructions, visit Integrate Pages.
- In the Visual Editor, in the Generate Code panel, click Develop.
- In the Instructions panel, create or edit provided custom instructions. For ideas on what you might enter, read Providing custom instructions later in this document.
- 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.
- In the Accessible code panel, specify your accessibility requirements.
- Click Generate Code to create your code.
- Sync to your codebase.
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.
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.
To specify general guidelines for generated code:
- In the Visual Editor, in the Generate Code panel, click Develop.
- In the Instructions panel, next to General Instructions, click the pencil icon that shows on hover.
- Create or edit the provided custom instructions.
- Click Save.
- Make sure that the checkbox next to General Instructions is checked so that your instruction apply during code generation.
The image below shows the General instructions edit dialogue open, which is where you enter your instructions:
in beta
To specify your code style as a paradigm for the generated code:
- In the Visual Editor, in the Generate Code panel, click Develop.
- In the Instructions panel, next to Match code style click the pencil icon that shows on hover.
- Create or edit the provided custom instructions.
- Click Save.
- Make sure that the checkbox next to Match code style is checked so that your instruction apply during code generation.
The image below shows the Match code style edit dialogue open, which is where you enter your instructions:
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>
);
}
To specify instructions regarding accessibity for generated code:
- In the Visual Editor, in the Generate Code panel, click Develop.
- In the Instructions panel, next to Accessible code, click the pencil icon that shows on hover.
- Create or edit the provided custom instructions.
- Click Save.
- Make sure that the checkbox next to Accessible code is checked so that your instruction apply during code generation.
The image below shows the Accessible code edit dialogue open, which is where you enter your instructions:
Certain parts of this workflow uses AI, for more information, visit How Builder Uses AI.
