Constructor.io AI Shopping Agent (ASA) UI Library

React components for Constructor.io's AI Shopping Agent: a conversational shopping assistant.

Documentation →

Install

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

Usage

import { CioAsaProvider, Chat } from '@constructor-io/constructorio-ui-asa';
import '@constructor-io/constructorio-ui-asa/styles.css';

<CioAsaProvider apiKey='YOUR_API_KEY'>
  <Chat onClose={() => setIsOpen(false)} />
</CioAsaProvider>;

Peer dependencies, layout, product results, tracking, 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. Publish the bundled version to the CDN.
7. Deploy the Storybook docs to GitHub Pages.

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

Related Libraries

• @constructor-io/constructorio-client-javascript - JavaScript client for Constructor.io API
• @constructor-io/constructorio-ui-checkout - Checkout UI library, the recommended flow behind checkoutTriggers
• @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