Gentiq React UI library (React)

Location: /packages/gentiq-react

The core React frontend library for the Gentiq Framework. This package provides modular conversational components for building modern AI chatbots with Vite and the Vercel AI SDK.

Features

• <ChatUI>: A fully-featured, responsive chat interface that supports streaming, file attachments, and rich AI responses.
• <AdminPanel>: A complete admin dashboard UI with user analytics, chat history auditing, and user management.
• <GentiqProvider>: Global application context wrapper managing themes, query clients, and API base URL configurations.
• Library Mode: Built via Vite for seamless consumption within host React applications.
• Modern UI Suite: Built on shadcn/ui, lucide-react, and framer-motion for a premium, accessible user experience.

Installation

# In your host React application (package.json)
"dependencies": {
  "gentiq": "file:../../../packages/gentiq-react",
  "react-router-dom": "^6.x || ^7.x"
}

Quick Start (Minimal App)

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { GentiqProvider, ChatUI, AdminPanel, RequireAuth, UserLoginPage } from 'gentiq'
import 'gentiq/style.css'

export default function App() {
  return (
    <GentiqProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<UserLoginPage />} />
          <Route path="/admin/*" element={<AdminPanel />} />
          <Route
            path="/*"
            element={
              <RequireAuth>
                <ChatUI />
              </RequireAuth>
            }
          />
        </Routes>
      </BrowserRouter>
    </GentiqProvider>
  )
}

Key Exports

• GentiqProvider: Wrap your app to provide essential contexts.
• ChatUI: The primary chat interface component.
• AdminPanel: The full-featured administration dashboard.
• RequireAuth: High-order component for route protection (backend auth status).
• UserLoginPage: Pre-built user login interface.
• gentiq/style.css: Predictable Tailwind-based style resets and UI tokens.

Development

Modifying the UI requires a fresh build for changes to reflect in the host application:

cd packages/gentiq-react && pnpm run build