Constructor.io AI Product Insights Agent UI Library

React components for Constructor.io's AI Product Insights Agent: an AI Q&A widget for product pages.

Documentation →

Install

npm i @constructor-io/constructorio-ui-pia

Usage

import { CioPia } from '@constructor-io/constructorio-ui-pia';
import '@constructor-io/constructorio-ui-pia/styles.css';

<CioPia apiKey='YOUR_API_KEY' itemId='PRODUCT_ITEM_ID' itemName='Product name' />;

Display modes, callbacks, customization, and every prop are in the docs.

Local Development

Development Scripts

npm ci                  # Install dependencies for local dev
npm run dev             # Start a local dev server for Storybook
npm run lint            # Run lint
npm run test            # Run tests
npm run check-types     # Run TypeScript type checking

Library Maintenance

npm run compile           # Generate lib folder for publishing to npm
npm run build-storybook   # Generate Storybook static bundle for deploy with GitHub Pages

Publishing New Versions

Dispatch the Publish workflow in GitHub Actions. You're required to provide two arguments:

• Version Strategy: major, minor, or patch.
• Title: A title for the release.

This workflow will automatically:

1. Bump the library version using the provided strategy.
2. Create a new git tag.
3. Create a new GitHub release.
4. Compile the library.
5. Publish the new version to NPM.
6. Deploy the Storybook docs to GitHub Pages.

Note: Please don't manually increase the package.json version or create new git tags.

The library version is tracked by releases and git tags. We intentionally keep the package.json version at 0.0.0 to avoid pushing changes to the main branch. This solves many security concerns by avoiding the need for branch-protection rule exceptions.

New Storybook Version

Dispatch the Deploy Storybook workflow in GitHub Actions.

Note: This is already done automatically when publishing a new version.

Related Libraries

• @constructor-io/constructorio-client-javascript - JavaScript client for Constructor.io API
• @constructor-io/constructorio-ui-autocomplete - Autocomplete UI library
• @constructor-io/constructorio-ui-plp - Product Listing Page UI library
• @constructor-io/constructorio-ui-quizzes - Quizzes UI library

Contributing

1. Fork the repo and create a new branch.
2. Run npm ci to install dependencies.
3. Make your changes.
4. Run npm run lint and npm run test to verify. For docs changes, follow .claude/docs.md.
5. Submit a PR for review.

License

MIT © Constructor.io Corporation