9/18 | Validate feature ideas earlier with AI-driven prototypes

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

9/18 | Validate feature ideas earlier with AI-driven prototypes

Announcing Visual Copilot - Figma to production in half the time

Learn how to improve your code output with the creation of custom configuration files. These files instruct the AI on how to generate code.

  • Add rule files with an .mdc extension to a .builder/rules/ directory. These files should provide explicit instructions to the AI.
  • Create and update a single .builderrules file to the root of your project using the Settings and instructions button at the bottom of the prompt window.

AI doesn't retain memory between sessions. Rules provide persistent and reusable context.

To create a rules file for Builder's AI:

  1. Create a .builder/ directory within the root of your project.
  2. Within the .builder/ directory, create a rules/ directory.
  3. Create a .mdc file within the rules/ directory. Provide a sensible name for your file and provide the metadata as shown below.
# .builder/rules/component-structure.mdc
---
description: Component structure
globs:
alwaysApply: true
---

All components should have prop validation.

Organize new components in the following way:
  - src/components/{feature}/{ComponentName}.tsx

Export components from an index.ts file in each directory.

In the rules file above, specific instructions are provided to the AI about the component structure.

The following options are available as keys within the metadata header:

  • description: a brief description of the file's rules
  • globs: specific file paths where these rules should apply
  • alwaysApply: if set to true, the AI always applies these rules; otherwise, the AI contextually decides when to apply the rules

Builder's AI will not make any changes to your rule files.

Fusion currently supports .builderrules files as well.

All instructions can be placed in a .builderrules file and will be read by Builder's AI. Consider adding structured headings to improve the readability of this file.

These files can be placed in any directory, and Fusion will recursively search through your project to join each file. Files closer to the current working directory take precedence over files in parent directories.

This allows you to have project-wide rules in the root directory and more specific rules in subdirectories.

For more details, visit Project-level settings.

Create or update the root .builderrules file within Fusion's Visual Editor by doing the following:

  1. Click on the cog icon at the bottom of the prompt field.
  2. Enter rules you want the AI to follow when generating code.
  3. Click the Save button.

This button provides easy access to the root .builderrules file. Keep in mind that changing the contents within this panel will change the file!

Rules should be actionable, focused, precise, and scoped.

  • Keep rules under 500 lines.
  • Split large rules into multiple, composable rules.
  • Provide concrete examples or referenced files.
  • Avoid vague guidance. Write rules like clear internal docs.
  • Ensure rules in one file do not conflict with rules in another file.

Learn more about Configuration files in Fusion, or read up on AI instruction best practices.

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