for developers
When generating code in the Visual Editor, you can provide specific instructions to the Visual Copilot 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 Integrating Pages.
- In the Visual Editor, in the Generate Code panel, click Quality code.
- Click the Settings Wheel at the bottom left of the panel.
- In the Custom Instructions panel, enter custom instructions in natural language. For ideas on what you might enter, read Providing custom instructions later in this document.
- In the Match my 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 to the Generated Code panel so that Visual Copilot uses your preferences as a guide.
There are three suggested instructions in the Generated Code panel.
- Use Next.js Image: This prompt instructs the AI to incorporate Next.js Image functionality into the generated code. Next.js Image is a component provided by the Next.js framework for optimized image loading and performance. By selecting this option, the AI uses Next.js Image to handle images within the generated code with the aim of efficient loading and rendering of images.
- Add JSDoc: JSDoc is a markup language used to document JavaScript code. Selecting this prompt directs the AI to include JSDoc comments in the generated code to provide comprehensive documentation for functions, variables, classes, and other elements within the codebase.
- Rename tokens: This prompt instructs the AI to analyze the code and rename variables, functions, or other identifiers based on predefined rules or patterns, which can help the output adhere to naming conventions and reduce the likelihood of naming conflicts or ambiguity in the codebase.
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:
- Click on the Get Code icon.
- In the Generated Code panel, click on the Settings wheel at the bottom left.
- In the Match my code style input field, enter some code that uses the style you want to guide the AI in generating code.
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 the Visual Copilot workflow use AI, for more information, visit How Builder Uses AI.
