AI-Assisted Merge Integration

Using an npm package

You can use AI-assisted UXPin Merge integration to bring a React component library published on npm into UXPin. Watch full integration here.

Claude Code analyzes the library and creates everything needed for the Merge integration, including component wrappers, properties, presets and tests. Once the integration is ready, you can review the components directly in the UXPin Editor.

No previous Merge integration experience is required.

Before You Start

To use the AI-assisted integration, you need:

• Node.js 18 or later
• Claude Code
• a UXPin account
• an npm component library you want to integrate

If you do not have Claude Code installed, run:

npm install -g @anthropic-ai/claude-code

Downloading the Integration Repository

Open the terminal and clone the UXPin Merge integration repository:

git clone https://github.com/uxpin-merge/uxpin-merge-integration my-library-merge
cd my-library-merge

The repository contains the instructions and configuration Claude Code uses to create and validate the Merge integration.

Starting the Integration

On macOS or Linux, run:

./start.sh

On Windows, run:

start.cmd

The start script checks your environment and opens Claude Code with the integration workflow ready to use.

Choosing Your Component Library

Claude Code will ask where your component library is located.

Enter the link or a name of the npm package, for example:

@company/design-system

Claude Code will analyze the library and identify its components, properties, dependencies and styling setup.

It will then suggest a list of components to integrate. You can accept the suggested list or ask Claude Code to add or remove selected components.

Creating the Merge Integration

Once you confirm the component list, Claude Code starts building the integration.

It first prepares a small number of components to make sure the setup works correctly. It then continues with the remaining components in batches.

Depending on the library, Claude Code creates:

• component wrappers,
• properties available in the UXPin Properties panel,
• event handlers,
• presets,
• tests and validation.

The integration is validated as new components are added.

You do not need to create the Merge configuration manually for each component.

Previewing Components in UXPin

During the integration, Claude Code starts UXPin Merge experimental mode.

When the integration is ready for review, Claude Code provides the experimental mode URL.

Open the URL in your browser to see the local components inside the UXPin Editor.

Make sure you are logged in to UXPin. If your browser asks for permission to connect to a local server, allow the connection.

You can then:

• add components to the canvas,
• change their properties,
• try available variants,
• check presets,
• test component behavior.

You can also start experimental mode manually with:

npx uxpin-merge

Reviewing the Integration

Once the selected components have been processed, Claude Code provides a summary of the integration.

The summary includes components that were successfully integrated and any components that were skipped.

If something does not work as expected in UXPin, describe the issue to Claude Code.

For example:

The Button size property does not update the component.

Claude Code will update the integration and run the validation again.

You can repeat this process until the components work as expected.

Publishing the Library

When you are happy with the integration, create a Merge library in UXPin and copy its Merge token:

• Go to your UXPin account,
• Open UXPin design editor,
• Create a new library,
• Select the option "Import react or web components from git repo"
• copy the authentication token (do not share it with anyone and do not place it in any files checked into Git repository. This token gives direct access to the library on your account)

Then run:

npx uxpin-merge push --token <your-merge-token>

The components will be published to your UXPin Merge library and can be used by your team in the Editor.

What Happens to the Original Library?

The original npm package is not modified.

The AI-assisted workflow creates a separate Merge integration based on the actual components and properties available in the library.

If a component cannot be integrated correctly, Claude Code skips it and reports it instead of adding a broken component.

Next Steps

If your design system is available as source code instead of an npm package, see Integrating Your Own Design System with AI.

For more details about how the integration works, see the AI-assisted UXPin Merge integration guide.

Using your own source code

You can also create a Merge integration directly from your React design system source code. Watch full integration here.

Instead of providing an npm package, point Claude Code to your local repository. It will analyze the components and create a separate integration layer without modifying your source files.

Before You Start

To use the AI-assisted integration, you need:

• Node.js 18 or later
• Claude Code
• a UXPin account
• local access to your React design system repository

If you do not have Claude Code installed, run:

npm install -g @anthropic-ai/claude-code

Make sure you are also logged in to UXPin in your browser.

Downloading the Integration Repository

Open the terminal and clone the UXPin Merge integration repository:

git clone https://github.com/uxpin-merge/uxpin-merge-integration my-library-merge
cd my-library-merge

The repository contains the integration workflow and configuration used by Claude Code.

Starting the Integration

When integrating your own source code, provide the path to your design system when starting the integration.

On macOS or Linux, run:

./start.sh /path/to/your/design-system

For example:

./start.sh ~/projects/company-design-system

On Windows, run:

start.cmd C:\path\to\your\design-system

Providing the path when starting the integration gives Claude Code access to the directory from the beginning, so it can read the components and create the integration without unnecessary permission prompts.

Analyzing Your Design System

Claude Code reads the design system source code and identifies the information required by the integration.

This includes:

• available components,
• component properties,
• TypeScript or JavaScript setup,
• styling,
• providers,
• dependencies.

It then prepares a list of components that can be integrated.

You can accept the suggested list or ask Claude Code to add or remove selected components.

Creating the Merge Integration

After you confirm the component list, Claude Code creates the Merge integration next to your design system.

It first prepares a small number of components to verify that the integration works correctly. It then continues with the remaining components in batches.

Depending on your design system, the generated integration can include:

• React wrappers,
• properties displayed in UXPin,
• event handlers,
• presets,
• required providers,
• tests and validation.

The integration is validated as components are added.

Your original source code remains unchanged throughout the process.

Previewing Components in UXPin

Claude Code starts UXPin Merge experimental mode during the integration.

When the components are ready to review, it provides the experimental mode URL.

Open the URL in your browser to see the local components inside the UXPin Editor.

Make sure you are logged in to UXPin. If your browser asks for permission to connect to a local server, allow the connection.

You can then:

• add components to the canvas,
• change their properties,
• try available variants,
• check presets,
• test interactions.

You can also start experimental mode manually with:

npx uxpin-merge

Reviewing the Integration

Once the selected components have been processed, Claude Code provides a summary.

The summary includes:

• components that were successfully integrated,
• components that were skipped,
• reasons why a component could not be integrated,
• the experimental mode URL.

If something does not work as expected, describe the issue to Claude Code.

For example:

The Button variant property is missing the secondary option.

Claude Code will update the generated integration and run the validation again.

You can continue making changes until the components behave as expected.

Publishing Your Design System

When you are happy with the integration, create a Merge library in UXPin and copy its Merge token:

• Go to your UXPin account,
• Open UXPin design editor,
• Create a new library,
• Select the option "Import react or web components from git repo"
• copy the authentication token (do not share it with anyone and do not place it in any files checked into Git repository. This token gives direct access to the library on your account)

Then run:

npx uxpin-merge push --token <your-merge-token>

The integrated components will be published to your UXPin Merge library and can be used by your team in the Editor.

Your Source Code

The AI-assisted integration does not modify your original design system source code.

UXPin-specific files are created in a separate integration layer.

Claude Code also uses the actual component implementation when creating the integration. It does not invent component properties or values that do not exist in your design system.

If a component cannot be integrated correctly, it is skipped and included in the final summary.

Supported Libraries

The AI-assisted workflow is intended for React component libraries. Web Components can be integrated through React wrappers created during the integration.

Vue and Angular components cannot currently be integrated directly with this workflow.

Next Steps

If your component library is published on npm, see Integrating an npm Component Library with AI.

For more information about how the integration works, see the AI-assisted UXPin Merge integration guide.