{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-forge","document":[{"data":{"title":{"text":"What is Forge "},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-react-library-ai","document":[{"data":{"title":{"text":"Forge with React libraries"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-credits-models","document":[{"data":{"title":{"text":"AI Credits & Models "},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Forge with React libraries"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

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

Instead of generic elements, Forge builds real JSX using your exported React components and their props. This means the generated UI follows the same structure that exists in your codebase.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Enabling AI support for your Merge library"},"content":{"html":"

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:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"const path = require('path');\nconst fs = require('fs');\n\nmodule.exports = {\n components: './src/components/**/*.[jt]sx?(x)',\n\n settings: {\n useAI: {\n name: \"Your Design System Name\",\n documentationUrl: \"\",\n systemPrompt: \"\",\n },\n },\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Push the updated "uxpin.config.js" file.

"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"npx uxpin-merge push --token=\"YOUR_TOKEN\""}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

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

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Important notes

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

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

"}}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":"Note","tip":{"html":"

Your React component library must be connected through UXPin Merge.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Configuration options"},"content":{"html":"

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

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

systemPrompt (string)
Structured instructions that define how Forge should generate JSX.
Required. Default: empty string.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

How Forge uses your configuration

When AI support is enabled:

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Creating System Prompt"},"content":{"html":"

The "systemPrompt" defines how your components should be used during generation and editing.

For larger libraries, store the instructions in a separate file (SYSTEM_PROMPT.MD) and load it into "uxpin.config.js".

Keeping instructions in a separate file makes them easier to maintain and version.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Structuring an effective systemPrompt

The quality of generated JSX depends on how clearly your component rules are defined.

A structured "systemPrompt" should include:

Define strict prop rules clearly.

"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"

Example SYSTEM_PROMPT.MD template

You can use the following structure as a starting point.
Replace the placeholder content with rules specific to your component library.

"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"``\n# System Prompt: JSX Code Generation for [Library Name]\n\nThis UXPin Merge library is a custom React component library for [purpose].\n\nBased on: [Framework name if applicable, e.g., Material UI, Ant Design]\n\nPhilosophy: [For custom libraries, describe design philosophy]\n\n---\n\n## DESIGN PRINCIPLES\n\n### Core Principles\n\nReplace this section with global rules that apply to all components.\n\n---\n\n## CRITICAL USAGE PATTERNS\n\nDocument your librarys most important conventions here using WRONG vs CORRECT examples in jsx code.\n\n### Pattern 1: [e.g., Text Props]\n\nWRONG:\n\nText as children\n\nCORRECT:\n\n\n\n### Pattern 2: [e.g., Icons]\n\nWRONG:\n\n