@byokit/ui weekly downloads statistics

<h1 align="center">@byokit/ui</h1> <p align="center"> <a href="https://www.npmjs.com/package/@byokit/ui"><img alt="npm" src="https://img.shields.io/npm/v/@byokit/ui?style=flat&label=npm" /></a> <a href="https://github.com/umeranjum17/byokit/actions/workflows/ci.yml"><img alt="CI" src="https://img.shields.io/github/actions/workflow/status/umeranjum17/byokit/ci.yml?style=flat&branch=main" /></a> <a href="LICENSE"><img alt="Apache 2.0" src="https://img.shields.io/badge/license-Apache--2.0-666?style=flat" /></a> </p> <p align="center"><strong>Headless sign-in, pairing and runtime-kit state, in plain words, for any UI.</strong><br/> It turns what your back end reports into the phase to draw and the sentence to show: a "Sign in with …" sheet, a pairing sheet, the link's status, the route a phone takes home, and a runtime kit's runs, approvals and agents. Your app keeps its own look. Everything except the React hooks is framework-free.</p> <p align="center"> <img src="https://raw.githubusercontent.com/umeranjum17/byokit/main/docs/images/pwa-2-code.png" width="240" alt="A phone-width page titled Umer's AI plans, with the ChatGPT card reading 'Signing in to ChatGPT…' and 'On the ChatGPT page, type this code:', the code MOCK-10001 in large letters, 'Code expires in 14:59', and Open ChatGPT and Cancel buttons." /> <img src="https://raw.githubusercontent.com/umeranjum17/byokit/main/examples/herdr-kit/docs/2-compare.png" width="240" alt="A phone-width page titled 'Agents' with a 'Pair this phone' card reading 'Check your computer shows these two words, then say yes there.' above the words 'coast comet'." /> </p> <p align="center">_{Left: the <code>code</code> phase from <code>phaseOf()</code>, drawn by <a href="../../examples/pwa">examples/pwa</a> against the mock OpenAI sign-in. Right: <code>pairingView()</code>'s <code>compare</code> words, drawn by <a href="../../examples/herdr-kit">examples/herdr-kit</a>.}</p>

Install

npm install @byokit/ui

· Latest release · All releases

Migrating from @byokit/ui-core? See the deprecated shim's migration guide.

Quickstart

npm install @byokit/ui

React is an optional peer dependency, needed only for the hooks (useSignIn, useRun, useApprovals, useHerdrTree, useBlocked, useConnect, useAccounts, useModelPicker).

import { phaseOf, stepOf } from '@byokit/ui/phase';
import { describeRoute } from '@byokit/ui/route';
import { consentWords, linkWords, pairingView, qrMatrix } from '@byokit/ui/link';

// What the back end reports: a sign-in waiting on a typed code.
const phase = phaseOf({ ready: false, signIn: { state: 'waiting', via: 'code', code: 'ABCD-1234' } });
console.log(phase, stepOf(phase));
console.log(phaseOf({ ready: true, work: true }));
console.log(phaseOf({ signIn: { state: 'failed', why: 'busy' } }));

console.log(describeRoute('wss://home.tail1234.ts.net/link'));
console.log(describeRoute('ws://100.101.102.103:7777'));

console.log(consentWords({ hostName: 'Kitchen computer', role: 'control' }));
console.log(pairingView({ phase: 'compare', hostName: 'Kitchen computer', words: 'coast comet' }));
console.log(linkWords('offline', 'Kitchen computer'));
console.log(qrMatrix('hello').length, 'rows');

Output from running it with Node:

code 1
work
busy
Tailscale
Private network
Pair with Kitchen computer? This device will be able to see and change things on it, until you remove it there.
{
  phase: 'compare',
  title: 'Check Kitchen computer shows these two words, then say yes there.',
  words: 'coast comet'
}
Can't reach Kitchen computer right now. This device keeps trying by itself.
25 rows

In React, useSignIn drives the whole sheet from three calls to your back end:

import { useSignIn } from '@byokit/ui';
import type { AccountView } from '@byokit/ui';

// Your back end's routes; the hook only needs these three calls.
declare const api: {
  account(): Promise<AccountView | null>;
  signIn(body?: { via?: 'code'; fresh?: boolean }): Promise<unknown>;
  cancel(): Promise<unknown>;
};

export function useChatGptSheet() {
  const s = useSignIn({ read: () => api.account(), start: (b) => api.signIn(b), cancel: () => api.cancel() });
  // s.phase: what to draw. s.code / s.url: what to show. s.start({ via: 'code' }): "Having trouble? Use a code instead".
  // s.cancel(), s.close(), s.keepWork(): the sheet's buttons. Leave `start` out when something else starts the
  // sign-in: the sheet then only watches, and nothing begins as it opens.
  return s;
}

API at a glance…