Agentic BP DScode-first design system

Installation

Get your own copy of the kit running on your computer. Pick one of the three ways in; most people want the first.

Before You Start

  • Node.js 20 or newer. Download it from nodejs.org. Check with node -v.
  • A terminal: Terminal on a Mac, PowerShell on Windows, or the one in your code editor.
  • An AI coding assistant, like Claude Code, to build screens. You can browse the catalog without one.

Option 1: One Command

Recommended. Makes a new folder with the latest release of the kit and installs it.

Run this in the folder where you keep your projects. Change my-prototype to any name.

npm create agentic-bp-ds@latest my-prototype

Then go into the folder and start it:

cd my-prototype
npm run dev

Option 2: GitHub Template

For a prototype that lives in its own GitHub repository, to share or deploy.

  1. Open github.com/borisj74/agentic-bp-ds-kit.
  2. Click Use this template, then Create a new repository, and name it.
  3. Copy your new repository's address and clone it, then install and start it:
git clone <your repository address> my-prototype
cd my-prototype
npm install
npm run dev

Option 3: Clone the Kit

For changing the kit itself: adding a component or fixing one.

git clone https://github.com/borisj74/agentic-bp-ds-kit.git
cd agentic-bp-ds-kit
npm install
npm run dev

Run It

With npm run dev running, open http://localhost:3000. The page updates as files change.

  • npm run dev starts the catalog and your screens.
  • npm run build checks that everything builds, as it would before deploying.
  • npm run lint checks the code for common mistakes.
  • npm test runs the unit, interaction and accessibility tests; npm run test:watch reruns them as files change.
  • npm run tokens rebuilds the token CSS after editing src/tokens/source.

Stop the server with Ctrl + C in the terminal.

Work with the Assistant

Open the prototype folder in your AI coding assistant. The rules come with the kit, so there is nothing to set up:

  • CLAUDE.md holds the kit rules the assistant follows on every request.
  • /prototype-from-kit runs the Prototype from kit skill, which walks the assistant through building a screen from the kit.
  • contracts/ tells it what each piece is for and which options it has.

Then read Prompting in the sidebar before your first screen.

Getting Updates

Working from a clone of the kit (Option 3)? Run git pull and then npm install.

If Something Goes Wrong

  • “Node is too old”: install Node.js 20 or newer, open a new terminal, and run the command again.
  • “The folder is not empty”: pick a new folder name.
  • The install stopped halfway: go into the folder and run npm install.
  • Port 3000 is busy: the terminal shows another address, like localhost:3001. Open that one.
  • The page is blank or out of date: stop the server, run npm run dev again and reload.