Getting started

Build a small React interface, then add the components you need. Unseen UI is an experimental library; the current packages are private local builds, with no public npm installation offered here.

1. Start with a local build

You need an authorized checkout or matching package archives from its maintainer. The source repository is private.

For this workspace, use Node 24.13 or later within Node 24 and pnpm 11.5.0. From the repository root:

pnpm install --frozen-lockfile
pnpm build:packages
pnpm dev

Open the development site. Build the packages before starting a workspace consumer.

For the static website preview:

pnpm --filter @ai-interaction/docs build
node apps/docs/scripts/preview.mjs

Open the website preview. The preview serves the built site; rebuild the docs app after changing a page.

overrides:
  '@stackunseen/ui-core': file:./vendor/stackunseen-ui-core-0.1.0-alpha.0.tgz

pnpm add ./vendor/stackunseen-ui-core-0.1.0-alpha.0.tgz ./vendor/stackunseen-ui-0.1.0-alpha.0.tgz

2. Render your first component

Import the base stylesheet once and wrap your interface in AITheme. In Next.js, this interactive example belongs in a Client Component; other React apps can use the same component.

This example keeps a draft and a saved name in memory. Nothing is sent or persisted. Copy it into a .tsx file and render <FirstExample /> from your app:

'use client';
import { useState } from 'react';
import { AITheme, Button, Field, Input } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

export function FirstExample() {
  const [name, setName] = useState('');
  const [savedName, setSavedName] = useState('');
  return (
    <AITheme>
      <form
        style={{ display: 'grid', gap: 12, maxWidth: 360 }}
        onSubmit={(event) => {
          event.preventDefault();
          setSavedName(name.trim());
        }}
      >
        <Field label="Your name" required>
          <Input
            name="displayName"
            value={name}
            maxLength={80}
            onChange={(event) => setName(event.target.value)}
          />
        </Field>
        <Button type="submit">Save locally</Button>
        <p role="status">{savedName ? `Saved locally: ${savedName}` : 'Nothing saved yet.'}</p>
      </form>
    </AITheme>
  );
}

The value and callback stay in your application. To save to a server, replace the local update with your host's validation and receipt handling. Read Connect to your app before wiring tools, approvals or execution.

3. Add only the entries you need

Ordinary controls come from @stackunseen/ui. DataGrid has a separate entry and stylesheet. Keep the base CSS and AITheme from the first example.

import { DataGrid } from '@stackunseen/ui/application';
import '@stackunseen/ui/application.css';

Open the DataGrid guide for controlled rows, sorting and paging. This entry needs no additional optional peers.

import { MarkdownResponse } from '@stackunseen/ui/markdown';
import '@stackunseen/ui/styles.css';

4. Find your next step

• UI components: controls, layout and rich content.
• AI components: conversations, generated output, execution and review.
• SaaS admin example: a working app with customer records, members and settings.

Customize previews appearance, colors, density and corners. Themes and icons covers AITheme, IconsProvider and custom header/footer composition. For server responses and optional workflow examples, read Connect to your app.