> ## Documentation Index
> Fetch the complete documentation index at: https://docs.open.cx/llms.txt
> Use this file to discover all available pages before exploring further.

# OpenCX widget AI coding skills

> Install OpenCX widget skills with npx to guide your coding assistant through a new integration, Companion setup or migration from v4 to v5.

Install an OpenCX skill to help your coding assistant add the widget to your
website, configure its UI, or migrate an existing integration to v5.

Skills provide instructions to your assistant. Installing a skill does not install
the widget, change your website, or upgrade your widget version.

## Review the skill instructions

The commands below pin the widget skill source to commit `64ba5dccdf5fe5997634d807248b790c146f3880`, the version introduced by the widget skills PR. They do not follow the repository's changing default branch.

Read the [integration skill](https://github.com/opencx-labs/widget/blob/64ba5dccdf5fe5997634d807248b790c146f3880/skills/opencx-widget-integration/SKILL.md) or [migration skill](https://github.com/opencx-labs/widget/blob/64ba5dccdf5fe5997634d807248b790c146f3880/skills/opencx-widget-migration/SKILL.md) before installing it. Skills are instructions your assistant may follow; review the changes it proposes before applying them.

For page context, use the filtered URL examples in [Companion mode](/widget/companion-mode#share-the-current-page). The pinned skills include full-URL examples: replace those with `window.location.origin + window.location.pathname`, and omit private path or title data. Tell your assistant this constraint when using either skill.

## Install a skill

Run this command from your application's directory. You need Node.js and npm,
including `npx`.

```bash theme={"dark"}
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-integration
```

The installer supports assistants including Claude Code, Codex, and Cursor. It can
detect your assistant or let you choose one. To select explicitly:

```bash theme={"dark"}
# Claude Code
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-integration --agent claude-code

# Codex
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-integration --agent codex

# Cursor
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-integration --agent cursor
```

Installation is scoped to the current project by default. Add `--global` to make
the skill available across your projects. If the assistant does not discover the
new skill immediately, start a new session.

## Choose your skill

| Skill                       | Helps with                                                                           |
| --------------------------- | ------------------------------------------------------------------------------------ |
| `opencx-widget-integration` | HTML, React, and headless installation; configuration; v5 companion and page context |
| `opencx-widget-migration`   | Moving an existing v4 integration to v5 and checking custom UI and hosting changes   |

To install the migration skill:

```bash theme={"dark"}
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-migration
```

Or install both:

```bash theme={"dark"}
npx skills add https://github.com/opencx-labs/widget/tree/64ba5dccdf5fe5997634d807248b790c146f3880 --skill opencx-widget-integration opencx-widget-migration
```

## Ask your assistant

After installing, give your assistant a task and name the skill:

> Use opencx-widget-integration to add the OpenCX widget to this React app using
> v5 beta in Companion mode. Mount it once in the app layout. Exclude query
> strings, fragments and private path or title data from page context.

> Use opencx-widget-integration to configure the v5 beta companion and send the
> current page context when a visitor asks a question. Exclude query strings,
> fragments and private path or title data from context.

> Use opencx-widget-migration to upgrade our v4 widget to v5. Review our custom
> components and self-hosted script before changing anything. Exclude query
> strings, fragments and private path or title data from page context.

Your assistant will need your widget token when configuring the integration.
Get it from your OpenCX dashboard.

## Version awareness

The skills check the installed widget version and available releases before
recommending changes. v5 features require a v5 package; installing a skill does
not enable organization features such as streaming or page context.

As of September 7, 2026, v5 is available under the npm `beta` tag and `latest`
remains v4. Ask explicitly for v5 beta when you want to try it.

See [Companion mode](/widget/companion-mode) for the v5 experience and [Migrate to v5](/widget/migrate-to-v5) for the upgrade checklist.

## Update deliberately

Review the changes in a newer skill commit before upgrading. Then rerun the installation command with that full commit SHA in the source URL. Keep the resulting project skill files and lockfile in version control so your team can review the change and restore the previous version.

Avoid an unpinned reinstall or a blanket `skills update` when you need to retain a reviewed version. Updating a skill does not update your npm widget dependency.

See [Install Widget](/widget/install-widget) for manual setup and
[Configuration](/widget/configuration) for widget options. The
[skills CLI documentation](https://github.com/vercel-labs/skills) describes
installation options and supported assistants.