@abhi-finance/pi-chat

Drop-in AI chat widget powered by the PI Platform. Install once, get a full AI assistant in any product.

Install

npm install @abhi-finance/pi-chat

Quick Start — Widget (full UI)

import { AIChatWidget } from '@abhi-finance/pi-chat'
import '@abhi-finance/pi-chat/styles.css'

function App() {
  return (
    <AIChatWidget
      config={{
        piUrl: 'https://pi.abhitech.io',
        getToken: () => localStorage.getItem('token') ?? '',
      }}
      title="AI Assistant"
      assistantName="Aura"
      position="bottom-right"
    />
  )
}

Headless — Custom UI

Use the hook directly if you want full control over the UI:

import { usePiChat } from '@abhi-finance/pi-chat'

function MyChat() {
  const { messages, send, isProcessing, currentStep } = usePiChat({
    piUrl: 'https://pi.abhitech.io',
    getToken: () => myAuthToken,
    mode: 'direct',
  })

  return (
    <div>
      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
      {isProcessing && <p>{currentStep?.label ?? 'Thinking...'}</p>}
      <input onKeyDown={e => e.key === 'Enter' && send(e.currentTarget.value)} />
    </div>
  )
}

Features

• SSE Streaming — Real-time progress ("Calling get_organizations...", "Found 53 results")
• Polling Fallback — Works even if SSE isn't supported
• Markdown Tables — Auto-renders pipe tables as styled HTML tables or cards
• Tool Call Transparency — Shows which APIs were called
• Theming — CSS custom properties or theme prop
• Auth Passthrough — Your JWT is forwarded to PI (no separate auth)
• Zero Config — Just piUrl + getToken, everything else has sensible defaults

Configuration

interface PiChatConfig {
  piUrl: string                          // PI API URL
  getToken: () => string | Promise<string>  // JWT provider
  mode?: 'direct' | 'pipeline'          // Default: 'direct'
  productId?: string                    // Default: 'default'
  streaming?: boolean                   // Default: true (SSE)
  headers?: Record<string, string>      // Extra request headers
  timeoutMs?: number                    // Default: 120000
}

Theming

Override CSS variables globally:

:root {
  --pi-chat-primary-color: #8b5cf6;
  --pi-chat-width: 450px;
  --pi-chat-border-radius: 20px;
}

Or pass inline via theme prop:

<AIChatWidget
  config={config}
  theme={{ primaryColor: '#8b5cf6', width: 450 }}
/>

Exports

| Export | Type | Description | |--------|------|-------------| | AIChatWidget | Component | Full floating chat panel | | ChatMessage | Component | Single message renderer | | LoadingMessage | Component | Progress indicator | | usePiChat | Hook | Auto-selects stream/poll | | usePiStreamChat | Hook | SSE streaming only | | usePiDirectChat | Hook | Polling fallback only | | piRequest | Function | Raw authenticated API call | | streamMessage | Function | Raw SSE async generator | | DEFAULT_THEME | Object | Default theme values |