Consuming the packages

Genie’s three packages are published to GitHub Packages — the NuGet libraries under the mr-aybee account, and the npm UI package under the @mr-aybee scope. This page covers installing and authenticating them from a consuming project. For what each package does, see The three packages; for wiring them into an app, see Integration.

Packages

Package	Type	Registry
`Genie.Source`	NuGet (netstandard2.0)	GitHub Packages (NuGet)
`Genie.Engine`	NuGet (net10.0)	GitHub Packages (NuGet)
`@mr-aybee/genie-engine-ui`	npm (React 19 + TS)	GitHub Packages (npm)

Genie.Engine depends on Genie.Source, so consuming Genie.Engine pulls Genie.Source from the same feed automatically.

Consuming the NuGet packages (`Genie.Engine` / `Genie.Source`)

Add a nuget.config to the consuming repo root that maps the Genie.* packages to the mr-aybee GitHub Packages feed while leaving everything else on nuget.org:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <clear />
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
    <add key="github" value="https://nuget.pkg.github.com/mr-aybee/index.json" />
  </packageSources>
  <packageSourceMapping>
    <packageSource key="nuget.org"><package pattern="*" /></packageSource>
    <packageSource key="github"><package pattern="Genie.*" /></packageSource>
  </packageSourceMapping>
</configuration>

Authenticate the github source — don’t commit credentials; use an environment variable or dotnet nuget add source:

dotnet nuget add source "https://nuget.pkg.github.com/mr-aybee/index.json" \
  --name github --username <github-user> --password <PAT_with_read:packages> \
  --store-password-in-clear-text

Then add the package (Genie.Source comes transitively):

dotnet add package Genie.Engine --version 0.1.0

Inside another GitHub Actions workflow under the same owner (mr-aybee), the built-in GITHUB_TOKEN can restore if the package grants that repo access (Package → Settings → Actions access → add the repo) or is internal/public. Otherwise add a read:packages PAT secret:

- run: dotnet nuget add source https://nuget.pkg.github.com/mr-aybee/index.json \
        -n github -u ${{ github.actor }} -p ${{ secrets.GITHUB_TOKEN }} --store-password-in-clear-text
- run: dotnet restore

Consuming the npm package (`@mr-aybee/genie-engine-ui`)

Add an .npmrc to the consuming project that points the @mr-aybee scope at GitHub Packages and reads the token from NODE_AUTH_TOKEN:

@mr-aybee:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

Set the token (locally export NODE_AUTH_TOKEN=<PAT>; in CI use secrets.GITHUB_TOKEN or a read:packages PAT secret), then install:

npm install @mr-aybee/genie-engine-ui react react-dom

react / react-dom (18 or 19) are peer dependencies — install them in the host app.

Use it:

import { createGenieApp } from "@mr-aybee/genie-engine-ui";
import "@mr-aybee/genie-engine-ui/styles.css";

createGenieApp({ /* apiBase, theme, auth, ... */ });

In CI (GitHub Actions) for the consumer:

- uses: actions/setup-node@v4
  with: { node-version: "22", registry-url: "https://npm.pkg.github.com" }
- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}   # or a read:packages PAT secret

Troubleshooting

Symptom	Cause / fix
Consumer `401` / `403` on install or restore	Missing or expired token, the token lacks `read:packages`, or the package hasn’t been granted to that repo.
npm `install` `404` for `@mr-aybee/genie-engine-ui`	The `@mr-aybee` scope isn’t mapped to `https://npm.pkg.github.com` in `.npmrc`, or the registry line is missing.
NuGet restore can’t find `Genie.*`	`nuget.config` is missing the `github` source or the `packageSourceMapping` entry that routes `Genie.*` to it.
`react` / `react-dom` unresolved	They’re peer dependencies — install them explicitly in the host app.
Fonts blocked / not rendering under a strict CSP	Add `data:` to `font-src` (the stylesheet inlines its font as `data:` URIs).