Coveo UI Kit

Quick Start with GitHub Codespaces

Get started in seconds with a fully configured development environment:

GitHub Codespaces provides a complete, cloud-based development environment with:

• ✅ All dependencies pre-installed (1.6GB of node_modules)
• ✅ Full project built and ready (~5 minutes of build time saved)
• ✅ VS Code extensions automatically installed
• ✅ Consistent environment across all developers

First-time setup: ~5 minutes | With prebuilds: ~30 seconds

See .devcontainer/README.md for details on the devcontainer configuration.

Projects

• Headless: Stateful middle-layer between UI elements and the Coveo Platform.
• Atomic: Coveo's web-component library for building modern search experiences.
• Quantic: Coveo's LWC library for building Salesforce search experiences.
• Bueno: A simple schema validator.
• Auth: Functions to help authenticate with the Coveo platform.
• Relay: A library for sending analytics events using Coveo's Event Protocol.
• Headless React Samples: Various code samples using Headless inside a React application.

Documentation

Official documentation for the main libraries is available on docs.coveo.com:

• Coveo Headless: Reference documentation for the Headless library, including controllers, actions, and engine configuration.
• Coveo Atomic: Reference documentation for the Atomic web-component library, including component usage and customization.
• Coveo Quantic: Reference documentation for the Quantic Salesforce Lightning Web Component library.

Samples

Looking for code examples? Check out the samples directory for working examples using Atomic, Headless, and Headless SSR across various frameworks including React, Angular, Vue.js, and Next.js.

Install

To install all dependencies and link local packages, run:

pnpm install

To install a dependency in a specific package, specify the workspace:

pnpm add lodash -w @coveo/headless-react-samples

Build

To build all projects for production, run:

pnpm run build

To build a single project for production (for instance, the atomic package), run:

pnpm turbo run @coveo/atomic#build

Remote caching

This monorepo uses Turborepo remote caching backed by a self-hosted cache (AWS Lambda + S3). Build and task outputs are shared across CI runs, branches, and developers, so unchanged packages are restored instead of rebuilt.

Local setup

Remote caching is optional locally and enabled through AWS:

aws sso login --profile dev   # authenticate with the shared "dev" profile
pnpm install    # runs turbo:login, which fetches the cache token from AWS SSM

`pnpm install` triggers `pnpm turbo:login`, which reads the token from SSM and writes it to `.turbo/config.json` (gitignored). If you are not logged in to AWS, the step is skipped and Turbo falls back to the local cache — no error. Re-authenticate any time with:

```sh
pnpm turbo:login

CI

CI authenticates with the TURBO_TOKEN repository secret; teamSlug and apiUrl live in turbo.json. Pull requests from forks do not receive the secret and therefore build without remote caching.

Development mode

Add the --stencil switch if you are changing stencil files.

To start a single project in development (for instance, the quantic package), run:

pnpm turbo run @coveo/quantic#dev

To run a specific task in a package separate it with colon e.g. to run test:watch inside quantic

pnpm turbo test:watch --filter=@coveo/quantic

Test

To run the tests for a specific package (recommended) e.g. atomic package

pnpm turbo test --filter=@coveo/atomic

For e2e tests

pnpm turbo run @coveo/atomic#dev
# In a separate terminal
pnpm turbo run @coveo/atomic#e2e

To run e2e tests for specific files/components using the Playwright UI

pnpm turbo e2e:watch --filter=@coveo/atomic

Lint

pnpm run lint:check
pnpm run lint:fix

Misc

The project uses git hooks with Husky. You can make sure hooks are correctly installed using the pnpm rebuild command.

Recommended VS Code Settings

To ensure a consistent development experience, add the following to your .vscode/settings.json in the project root:

{
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.codeActionsOnSave": {
    "source.organizeImports.oxc": "explicit",
    "source.fixAll.oxc": "explicit",
  },
  "editor.formatOnSave": true,
}

These settings will:

• Use Oxc as the default code formatter (via Oxfmt) and linter (via Oxlint).
• Automatically organize imports and apply lint fixes on save.

Note:
Formatting is controlled by .oxfmtrc.json and linting by .oxlintrc.json.
The above settings ensure your editor behavior matches project standards.