Skip to main content

Quickstart

This walks you from nothing to a running dashboard. You'll run one command, answer a couple of prompts, and let your AI assistant fill in the rest with the guardrails watching its back.

Rystad dashboards come in two frontend flavours — React and Angular. Pick the tab for your stack below; the steps stay the same, only the commands differ. (New teams usually pick React, which also has a full-stack umbrella with the Flask backend; Angular is frontend-only today.)

Before you start​

First time here? Do the one-time First-time setup — it installs Node and configures the Azure DevOps token your ~/.npmrc needs to reach the private @rystad feed. Without it, the command below fails with an opaque 401 Unauthorized (or a 404 if you drop the @rystad/ scope). Working from a clone of the repo? The same steps live in PREREQUISITES.md at the repo root.

You need:

  • Node.js 20 or newer. Check with node --version.
  • Access to the Rystad npm feed (Azure DevOps Artifacts). Configure your ~/.npmrc token as described in PREREQUISITES.md at the repo root.
  • An AI assistant connected to the Rystad MCP servers — for React that's the guide + API servers; for Angular it's the guide-angular + API servers. Both are wired into the scaffolded project automatically.

If a command fails, check Debugging — the common first-run errors (401, 404, a missing pnpm/uv, or Docker not ready) each have a one-line fix.

1. Scaffold the project​

Pick a dashboard id (your team assigns these — here we use 300) and run:

npx @rystad/create-rystad-dashboard my-dash --dashboard-id 300

This creates my-dash/ with a React + Vite + TypeScript frontend (in frontend/) and a Rystad Flask backend (in backend/), already wired to the same dashboard id and the gateway route.

Which CLI? @rystad/create-rystad-dashboard is the default — it scaffolds the full stack (frontend + backend). Need only one half? Use @rystad/create-rystad-app for a frontend-only React project or @rystad/create-rystad-api for a backend-only one.

2. Run it​

create-rystad-dashboard is the umbrella — it scaffolds the frontend and the backend and runs them together behind the real gateway. On the first run it installs both sides and auto-starts docker compose up for you once the local prerequisites are ready (Docker running, the registry images pulled via az acr login, an aspose.license.key file, and a filled .env). If they aren't, it prints the exact one-time steps — see the generated RUN_LOCAL.md.

Every run after that is one command from the project folder:

cd my-dash
docker compose up

Then open http://localhost:5000/300/ to see your dashboard behind the gateway.

Fast inner loop. While iterating with your AI assistant, you can skip the full stack and run just the frontend dev server:

cd my-dash/frontend
pnpm dev

First time using pnpm? Install it once with corepack enable pnpm (or npm install -g pnpm). If uv was missing when the backend scaffolded, run pip install uv. Details on the Debugging page.

3. Build with your AI assistant​

Now describe what you want in plain language. For example:

Add a line chart of quarterly production for the last 3 years, using the production endpoint.

Your AI assistant will consult the guardrails — the instruction files, the live MCP endpoint and design-token queries, and the Task Recipes — and build the feature without inventing anything. When it says a step is done, a verify gate has already checked it. The recipes and guardrails are tailored to your stack (React or Angular), but you prompt the same way either way.

4. Verify it yourself​

You don't need to read the code, but you should confirm the result:

cd my-dash/frontend
pnpm build

A green build means the frontend compiles and the contracts hold.

Next steps​

  • Learn the Concepts so you understand what the guardrails are doing for you.
  • Read Safe prompting to get better results from your AI assistant.
  • Something not working? See Debugging for the common first-run errors and their fixes.