Forcing the Visual Editor AI to use only custom components

Visual Editor Help
1

What are you trying to accomplish
I have a publish space and a Next.js project with a set of custom components registered. I turned on the components-only mode and disallowed using built-in components. When working manually in the visual editor, everything behaves as expected. I would also like to use AI generation. But when I try to generate something, it is not composed of my custom components, but everything is composed of Boxes, Texts, and other built-in components with custom styling (which I cannot even access because the Style tab is not available). Is there any way to force Visual Editor AI to use only my custom components? I tried to incorporate that instruction into the prompt, but it didn’t really work.

Code stack you are integrating Builder with
NextJS, React SDK v1

2

Hello @vonschau,

The difficulty you’re experiencing with AI generation in Builder.io—where it uses default built-in components instead of your custom components, even in components-only mode—stems from current limitations in strictly controlling AI output. While the Visual Editor can be set to only show your registered components, the AI-driven generation follows its own logic and may still default to built-in components.

Here’s a potential approach to better align AI generation with your custom setup:

  • Component Indexing: Builder.io is transitioning from manual component mapping to Component Indexing, which automatically discovers and maps your design system components. This reduces the need for manual mapping and can help steer AI generation toward your custom components. Component Indexing works particularly well when using a Builder Fusion type space.
  • Feedback to AI: You can provide specific guidance and feedback during AI generation to help it refine output. Builder’s design allows the system to learn from your adjustments and better align with your custom components over time. For example, if you add registered component JSON in the AI prompt, the AI will use the registered component during the code generation process.

Example:

{
  "@type": "@builder.io/sdk:Element",
  "@version": 2,
  "id": "builder-1297dbb5028f48c78a19be1fbbf9c928",
  "component": {
    "name": "Hero",
    "options": {
      "title": "Join Our Community",
      "subtitle": "Connect with thousands of satisfied customers and be part of our growing family.",
      "ctaPrimary": {
        "label": "Sign Up",
        "href": "/signup"
      },
      "ctaSecondary": {
        "label": "Learn More",
        "href": "/about"
      }
    },
    "isRSC": null
  },
  "responsiveStyles": {
    "large": {
      "display": "flex",
      "flexDirection": "column",
      "position": "relative",
      "flexShrink": "0",
      "boxSizing": "border-box",
      "marginTop": "60px"
    }
  }
}

While AI generation isn’t fully restricted to custom components yet, using Component Indexing and providing iterative feedback can help significantly improve alignment with your design system.

We’ll also be sharing your feedback internally with our team to help improve AI-driven component generation in future updates.

Thanks,

1 Like