ai.select

Reusable React + TypeScript brand/frame selector built with Material UI.

Install

npm install ai.select

Use

The selector is configured per component instance through endpointSuffix.

import { BrandFrameSelector } from 'ai.select';

export function Example() {
  return (
    <>
      <BrandFrameSelector endpointSuffix="http://localhost:5019/uniqueBrands" />
      <BrandFrameSelector endpointSuffix="http://deos2vfuew12/WebFormDB" />
    </>
  );
}

Locale assets

If you need the bundled translation files in a higher-level package, import them directly from the published subpaths:

import enTranslation from 'ai.select/locales/en.json';
import deTranslation from 'ai.select/locales/de.json';

These paths resolve to the packaged JSON assets, so they can be reused without reaching into the internal source tree.

Electron integration

If your Electron preload exposes an async brand loader on window.electronAPI, pass that through loadBrands and keep the selector otherwise unchanged.

<BrandFrameSelector
  endpointSuffix="http://deos2vfuew12/WebFormDB"
  loadBrands={() => window.electronAPI!.getBrands()}
  onFrameDetails={(details) => {
    console.log(details);
  }}
/>

The demo app also falls back to local sample brands when window.electronAPI is not present, so it continues to work in a regular browser.

A full main-process/preload/renderer example is available in docs/electron-integration.md.

Endpoint behavior

• endpointSuffix="http://localhost:5019/uniqueBrands" requests:
  • http://localhost:5019/uniqueBrands
  • http://localhost:5019/frames
  • http://localhost:5019/frame
• endpointSuffix="http://deos2vfuew12/WebFormDB" requests:
  • http://deos2vfuew12/WebFormDB/uniqueBrands
  • http://deos2vfuew12/WebFormDB/frames
  • http://deos2vfuew12/WebFormDB/frame

Public API

<BrandFrameSelector
  endpointSuffix="http://localhost:5019/uniqueBrands"
  onFrameDetails={(details) => {
    console.log(details);
  }}
/>