Using Merge library with AI

If you use UXPin Merge and have connected your own React component library, Forge can generate and edit UI using those same components.

Generated UI is built with your actual React components and follows their structure and props.

Connecting your coded library to AI

To enable AI support for your component library:

1. Add the following configuration to your library’s "Uxpin.config.js" file under the settings field:

useAI: { 
  name: '', 
  documentationUrl: '', 
  systemPrompt: '' 
}

You can leave "Documentationurl" and "Systemprompt" empty.

2. Push the updated "Uxpin.config.js" file.

After configuration, your library will appear in the Library pill in Forge.

Important notes

• If the component library is private or proprietary, include detailed documentation or usage guidelines in "Systemprompt" so AI can generate correct code.
• If "Documentationurl" is provided, it is included in the AI prompt as a reference.
• "Systemprompt" can be used to define custom rules or override default JSX behavior.
• All parameters are optional, but providing at least the "Name" improves prompt quality.

Additional spacing, typography, or visual rules can be defined in Design System Guidelines.

Configuration options

name (string)
Name of the component library for which the prompt should be generated.
Default: empty string.

documentationUrl (string)
URL to the official documentation of the component library.
Optional. Default: empty string.

systemPrompt (string)
Additional instructions or requirements for JSX generation.
Optional. Default: empty string.