@hugpy/ui

Embeddable React UI for hugpy — the panels that make up the hugpy console (chat, model table, GPU workers, HF search, API keys, Discord bindings), plus a single drop-in <HugpyConsole/>.

This package is layered:

• runtime config — point the UI at any hugpy backend
• individual panels — compose your own console
• <HugpyConsole/> — the whole console in one component

Install

npm install @hugpy/ui
# peers (most React apps already have these):
npm install react react-dom react-router-dom

Import the stylesheet once, anywhere in your app:

import '@hugpy/ui/style.css'

The stylesheet carries the design tokens (CSS custom properties on :root) and every panel's styles.

Quick start — the whole console

import { HugpyConsole } from '@hugpy/ui'
import '@hugpy/ui/style.css'

export default function App() {
  return <HugpyConsole baseUrl="https://api.hugpy.ai" />
}

<HugpyConsole/> is router-free — no <BrowserRouter> required.

Quick start — individual panels

Wrap the part of your tree that uses hugpy panels in a <HugpyProvider> (it sets the backend address the panels talk to), then drop panels in:

import { HugpyProvider, ChatPanel, ModelTable } from '@hugpy/ui'
import '@hugpy/ui/style.css'

<HugpyProvider baseUrl="https://api.hugpy.ai">
  <ModelTable models={models} /* … */ />
  <ChatPanel /* … */ />
</HugpyProvider>

Backend wiring

Every API call resolves through the runtime config. The default baseUrl is empty, meaning same-origin / relative paths — that's how the bundled console works behind its proxy, unchanged.

configureHugpy({
  baseUrl: 'https://api.hugpy.ai', // '' = same origin (default)
  headers: () => ({ Authorization: `Bearer ${getToken()}` }), // optional, per-request
  credentials: 'include',          // optional, cookie auth across origins
  fetch: myFetch,                  // optional, custom fetch
})

<HugpyProvider> accepts the same options as props and applies them for its subtree. You can also call configureHugpy(...) once at startup instead.

Resolvers (exported for advanced use)

• resolveApiUrl(path) — relative /api/... → absolute against baseUrl
• resolveApiOrigin() — the configured origin (falls back to window.location.origin)
• hugpyFetch(path, init) — fetch with URL resolution + configured headers
• fetchJson(path, init) — hugpyFetch + JSON parsing with real error messages

Exports

| Export | What | |---|---| | HugpyConsole | full console, one component | | HugpyProvider, useHugpyConfig | backend config context | | configureHugpy, getHugpyConfig, resetHugpyConfig | imperative config | | resolveApiUrl, resolveApiOrigin, hugpyFetch, fetchJson, uploadFile | request helpers | | ChatPanel, ModelTable, WorkersPanel, HFSearch, PeersBar, ApiAccess, DiscordPanel, PhoneBrickPanel, Landing | panels | | AuthProvider, useAuth | optional auth context |

The login-form components (Login/Logout/Register/ChangePassword) are not yet exported — they have internal imports that need rewiring before they're package-ready. AuthProvider/useAuth are exported and work.

Building the package (maintainers)

npm run build:lib    # → dist-lib/ (ESM + CJS + .d.ts + style.css)

react, react-dom, and react-router-dom are externalized (peer dependencies). The console app itself still builds with npm run build (webpack → dist/); the library build is additive and independent.