A single React component that gives you a complete workflow editor, execution viewer, credential manager, and AI assistant. Built with React Flow, Tailwind CSS, and Radix UI.

Install

npx invect-cli init

Or install manually:

npm install @invect/ui

Usage

import { Invect } from '@invect/ui';
import '@invect/ui/styles';

function App() {
  return <Invect apiBaseUrl="http://localhost:3000/invect" />;
}

This renders the full Invect UI — flow list, drag-and-drop editor, execution monitoring, and credential management.

Props

| Prop | Type | Default | Description | | ------------------ | ------------------------ | ------------------------------ | --------------------------------- | | apiBaseUrl | string | http://localhost:3000/invect | Backend API URL | | basePath | string | /invect | Base path for routing | | plugins | InvectFrontendPlugin[] | [] | Frontend plugins (RBAC, etc.) | | reactQueryClient | QueryClient | — | Bring your own React Query client |

CSS Scoping

All styles are scoped under a .invect CSS class. Invect won't interfere with your app's existing styles.

InvectShell

For plugin UIs that render outside the main app (e.g. sign-in pages), use InvectShell to get just the CSS scope without routing or layout:

import { InvectShell } from '@invect/ui';
import '@invect/ui/styles';

<InvectShell theme="dark">
  <YourCustomUI />
</InvectShell>;

License

MIT