Skip to content
Pilotoo
v0.1

0.1.0 Latest

ChangelogHow versions work

@pilotoo/ui

Introduction

Section titled “Introduction”

@pilotoo/ui gives a React web app a chat panel, a conversation list, an agent picker, settings pieces and desktop window chrome. It is not an SDK: every component forwards className and its native props, and every design token is a CSS variable you can override. Use it for a browser or Tauri front end. For React Native, use @pilotoo/chat-ui.

Installation

Section titled “Installation”

@pilotoo/ui is at version 0.1.0 and is not published to a registry yet. A host gets it today by packing the tarballs from the kit repository:

Terminal window
pnpm install
pnpm release:check

release:check builds the release packages and writes one .tgz per package to node_modules/.cache/release-check/. Copy the tarballs you need into your project (for example vendor/) and depend on them as files:

package.json
{
  "dependencies": {
    "@pilotoo/ui": "file:vendor/pilotoo-ui-0.1.0.tgz"
  }
}

The release set (chat-protocol, chat-core, chat-ui, ui, agent-runtime, server, local-server) is versioned together: install every kit package you use at the same version. See Installation for the full setup.

Import the tokens and tell Tailwind to scan the package, or the components render unstyled:

src/global.css
@import "tailwindcss";
@import "@pilotoo/ui/tokens.css";
@import "@pilotoo/ui/fonts.css";


@source "../node_modules/@pilotoo/ui/dist";

Basic usage

Section titled “Basic usage”
src/Assistant.tsx
import { ChatPanel, ChatProvider } from '@pilotoo/ui/chat';


export function Assistant({ baseUrl, getToken }: { baseUrl: string; getToken: () => string | undefined }) {
  return (
    <ChatProvider baseUrl={baseUrl} getToken={getToken}>
      <ChatPanel />
    </ChatProvider>
  );
}

getToken is read on every request and reconnect, so a refreshed session token is picked up.

Entry points

Section titled “Entry points”
Import Provides
@pilotoo/ui cn and the primitives and overlays.
@pilotoo/ui/chat ChatProvider, ChatPanel, ChatThread, ChatComposer, ConversationList, AgentPicker.
@pilotoo/ui/desktop Window chrome for Tauri shells: Sidebar, Toolbar, syncNativeTheme, useVibrancy.
@pilotoo/ui/settings Settings pieces over the agent admin: SettingsLayout, AgentsList, AgentEditor, UsageSection, SchedulesSection, ThemePicker, applyTheme.
@pilotoo/ui/voice VoiceProvider, useVoice and the voice labels.
@pilotoo/ui/tokens.css The design tokens as CSS variables.
@pilotoo/ui/fonts.css The bundled fonts (Source Sans 3 and JetBrains Mono).

Peer dependencies

Section titled “Peer dependencies”
  • react ^19.0.0
  • react-dom ^19.0.0
  • socket.io-client ^4.8.3

Learn more

Section titled “Learn more”