@x12i/funcx-cui

React catalog user interface for FuncX: browse normalized ai-functions catalog rows, edit instructions/prompt/rules/schemas, workflow (draft → ready → released), and the playground (preview + live run()).

Pairs with a FuncX Templates Manager API (or any host implementing the same REST contract).

Install

npm install @x12i/funcx-cui @x12i/funcx react react-dom

Published on npm as @x12i/funcx-cui (public, @x12i scope).

In this monorepo, the package lives at funcx-cui/ and is linked via workspace / file:../funcx-cui.

Quick embed

import { FuncxCuiProvider, FuncxTemplatesManagerApp } from "@x12i/funcx-cui";
import "@x12i/funcx-cui/styles.css";

export function AdminApp() {
  return (
    <FuncxCuiProvider apiPrefix="/api">
      <FuncxTemplatesManagerApp title="FuncX Catalog" />
    </FuncxCuiProvider>
  );
}

Proxy /api to your Templates Manager API (default port 4902).

API prefix

| Prop | Default | Purpose | |------|---------|---------| | apiPrefix | /api | REST path before /health, /functions, /playground/run, etc. |

Use apiPrefix="https://catalog.example.com/api" for cross-origin hosts (CORS must allow the browser origin).

Modes

| Mode | Behavior | |------|----------| | admin (default) | Create, open workspace, edit, playground | | catalog | Browse + playground only (no create/open/edit); playground requires Ready |

<FuncxCuiProvider mode="catalog" apiPrefix="/api">
  <FuncxTemplatesManagerApp title="FuncX Catalog" />
</FuncxCuiProvider>

Pair with API FUNCX_CUI_MODE=catalog on the Templates Manager server to block mutation routes.

Custom modes: registerFuncxCuiMode(id, capabilities) — see src/ui/mode/appMode.ts.

Source layout (UI vs HTTP client)

This package is UI only — React components, hooks, and a browser HTTP client (src/client/) that calls the Templates Manager REST API. It does not include the Express server; that lives in funcx-templates-manager/packages/server.

funcx-cui/src/
├── client/          # HTTP client for Templates Manager REST API (fetch only)
├── domain/          # Catalog logic shared by UI (no React, no fetch)
├── ui/              # React app shell, components, editors, hooks
└── styles/          # CSS bundled with the library

Exports

| Export | Description | |--------|-------------| | FuncxTemplatesManagerApp | Full catalog + workspace + playground shell | | FuncxCuiProvider | Configures apiPrefix + UI mode | | useFuncxCuiMode | Current mode + capability flags | | registerFuncxCuiMode | Register future embedder modes | | configureFuncxCui | Imperative config (non-React embedders) | | Types | FunctionSummary, PlaygroundConfig, WorkflowStatus, … |

Monorepo layout

funcx-mono-repo/
├── funcx/                          @x12i/funcx — core library
├── funcx-cui/                      @x12i/funcx-cui — React UI library (no server)
├── runx/                           @x12i/runx — capability execution (runx-ui for UIs)
└── funcx-templates-manager/
    ├── packages/server/            Express REST API (:4902)
    └── packages/client/            Vite browser app (:4903) → imports @x12i/funcx-cui

Client / server are separate packages. The browser app (packages/client) only renders @x12i/funcx-cui; all REST routes live in packages/server. Do not add Express or Catalox/Mongo logic to funcx-cui.

Develop

Tooling: Vite 8 (vite@^8). @vitejs/plugin-react@^6 is the React plugin major version — not Vite 6.

# From monorepo root
npm install
npm run build:cui          # optional; web dev aliases funcx-cui/src
npm run dev:server           # :4902
npm run dev:client           # :4903

Build

npm run build --prefix funcx-cui

Outputs dist/index.js, dist/index.cjs, dist/funcx-cui.css, and TypeScript declarations.

Related

• funcx-templates-manager README — API routes, bootstrap, Mongo setup
• @x12i/funcx 4.10.4 — catalog types, readiness, playground preview helpers, OpenRouter via @x12i/ai-router-runtime