Run the kit locally

Work from source when you want to change a component, add one, or just read the code with the dev server running. The repo is a single package with Storybook as its development surface.

Set up

git clone https://github.com/kitn-ai/ui.git
cd chat
npm install

Storybook is the dev loop

Every primitive, component, and element has stories. Storybook is where you build and eyeball them in isolation, light and dark.

npm run storybook   # http://localhost:6006

Stories live next to their source as *.stories.tsx, in three places that mirror the layers:

src/ui/*.stories.tsx — UI primitives (Button, Switch, Resizable).
src/components/*.stories.tsx — feature components (Message, Artifact).
src/elements/*.stories.tsx — the kai-* web components.

Editing a story or its source hot-reloads the open story. That’s the tightest loop for visual work.

Test

The suite runs on Vitest. Most behavior is tested at the Solid-component level with @solidjs/testing-library.

npm test            # full suite, once
npm run test:watch  # re-run on change while you work
npm run typecheck   # tsc across the main + React configs

There’s also an accessibility-gated Storybook project (npm run test:storybook) that runs axe against the stories.

Build

npm run build

This compiles the element bundle and the remote-card provider, builds the theme tokens, and — in the postbuild step — regenerates the API metadata.

Generated API metadata

npm run build:api (run for you by the build) reads the elements and emits the machine-readable specs that everything downstream consumes:

src/elements/element-meta.json — every element’s props, events, and defaults.
TypeScript types, the React wrappers, and llms.txt.

These files drive this docs site’s reference tables and playgrounds, the React adapter, and the for-AI-agents output. Treat them as generated: change the source, then regenerate — don’t hand-edit them.

Create or modify a component — add a primitive, give it a story, and expose it as a kai-* element.