Gentiq React SDK

The core React library for building premium, production-ready AI chatbot interfaces.

gentiq provides a set of highly modular conversational components built on top of Vercel AI SDK and Vite. It offers both a complete, drop-in UI and granular "slots" for building highly customized conversational flows.

📦 Installation

npm install gentiq
# or
pnpm add gentiq

🚀 Quick Start

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

export default function App() {
  return (
    <GentiqProvider api={{ authAdapter: LocalStorageAuthAdapter }}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<UserLoginPage />} />
          <Route path="/*" element={
            <RequireAuth>
               <ChatUI />
            </RequireAuth>
          } />
        </Routes>
      </BrowserRouter>
    </GentiqProvider>
  );
}

🎨 Extreme Customization (Slots)

Gentiq is designed to be "hacked" at any level. Using the components prop, you can surgically replace internal components with your own implementation.

UI Slot Overrides

Replace message bubbles, input areas, or the entire message list without forking the library.

import { GentiqComponents, TextPartProps } from 'gentiq';

const MyBrandedTextBubble = ({ part, message }: TextPartProps) => (
  <div className={`p-4 rounded-3xl ${message.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100'}`}>
    <p>{part.text}</p>
    <span className="text-[10px] opacity-50">{new Date(message.createdAt).toLocaleTimeString()}</span>
  </div>
);

const components: GentiqComponents = {
  TextPart: MyBrandedTextBubble,
  WelcomeScreen: () => <div className="p-20 text-center"><h1>Welcome to My AI</h1></div>,
  // Override the input area entirely
  PromptInput: ({ onSend, status }) => (
    <input 
      disabled={status === 'streaming'} 
      onKeyDown={(e) => e.key === 'Enter' && onSend(e.currentTarget.value)} 
    />
  )
};

<ChatUI components={components} />

Markdown & Tool Customization

You can even intercept markdown rendering or provide custom dashboards for specific AI tool calls.

const components: GentiqComponents = {
  // Custom markdown component overrides (passed to react-markdown)
  textComponents: {
    code: ({ children }) => <pre className="my-custom-code">{children}</pre>,
  },
  // Custom UI for specific tools
  toolComponents: {
    get_weather: ({ part }) => (
      <div className="weather-card">
        <h3>{part.result.city}</h3>
        <p>{part.result.temperature}°C</p>
      </div>
    ),
  },
  // Inject remark/rehype plugins
  remarkPlugins: [remarkGfm],
};

⚓ Headless Mode

If you need complete control over the UI, use the useGentiqChat hook. It handles all the complex synchronization with the Vercel AI SDK and Gentiq's persistence backend while leaving the rendering to you.

import { useGentiqChat } from 'gentiq';

export const CustomChat = () => {
  const { messages, input, setInput, append, isLoading } = useGentiqChat();

  return (
    <div>
      {messages.map(m => <div key={m.id}>{m.content}</div>)}
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={() => append({ role: 'user', content: input })}>Send</button>
    </div>
  );
};

🔐 Admin & Shared Views

Gentiq includes production-grade views for administration and public sharing.

• <AdminPanel />: A complete dashboard customizable with extraPages.
• <SharedChatView />: A read-only view for public conversation links.

<Route path="/admin/*" element={<AdminPanel extraPages={[{ path: 'metrics', label: 'Metrics', element: <MyMetrics /> }]} />} />
<Route path="/shared/:shareId" element={<SharedChatView />} />

🌍 Advanced Theming & i18n

Support multiple languages (including RTL) and customize your brand's unique look.

<GentiqProvider
  theme={{
    accent: '#6366f1',
    radius: 20,
    typography: {
      fontFamily: {
        en: 'Inter, sans-serif',
        fa: 'Vazirmatn, sans-serif' // Built-in RTL support
      }
    }
  }}
  i18n={{
    resources: {
      en: { chat: { input_placeholder: "Ask me anything..." } },
      fa: { chat: { input_placeholder: "هرچیزی میخواهی بپرس..." } }
    }
  }}
>
  <ChatUI />
</GentiqProvider>

👥 Custom User Metadata Fields

Easily extend user profiles and signup forms with your own fields. Gentiq handles the state, validation, and conditional visibility (branching logic) automatically.

<GentiqProvider
  app={{
    userMetadataFields: [
      {
        key: 'organization',
        label: 'settings:profile.organization',
        type: 'text',
        placeholder: 'Enter your company name',
        showInSignup: true,
        showInProfile: true,
      },
      {
        key: 'role',
        label: 'settings:profile.role',
        type: 'select',
        options: [
          { label: 'Developer', value: 'dev' },
          { label: 'Manager', value: 'manager' },
        ],
        // Field only shown if organization is provided
        condition: { field: 'organization', operator: 'not_equals', value: '' },
        showInSignup: true,
        showInProfile: true,
      }
    ]
  }}
>
  <ChatUI />
</GentiqProvider>

📄 License

Gentiq is open-source software licensed under the Apache 2.0 License.