@informedai/react

React SDK for InformedAI Assistant - AI-powered content creation widget informed by your knowledge base.

Installation

npm install @informedai/react

Quick Start

import { InformedAssistant } from '@informedai/react';

function App() {
  return (
    <InformedAssistant
      apiKey="wsk_..."
      documentId="doc_123"
      onFieldApply={(field, value) => {
        console.log(`Applied ${value} to ${field}`);
      }}
    />
  );
}

Features

• AI-Powered Widget - Embeddable chat widget for content creation
• Knowledge-Informed - Responses powered by your domain knowledge
• Real-time Streaming - SSE streaming for instant AI responses
• Pending Values - Preview suggestions before applying
• Customizable Theme - Match your brand colors
• TypeScript Support - Full type definitions included

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your workspace API key | | documentId | string | Yes | Document to work with | | apiUrl | string | No | Custom API URL (default: production) | | sessionId | string | No | Resume existing session | | onFieldApply | (field, value) => void | No | Called when value is applied | | onSessionChange | (session) => void | No | Called on session state change | | onError | (error) => void | No | Called on errors | | theme | WidgetTheme | No | Custom theme colors | | position | 'inline' \| 'bottom-right' \| 'bottom-left' | No | Widget position | | defaultCollapsed | boolean | No | Start collapsed (floating only) |

Theming

<InformedAssistant
  apiKey="wsk_..."
  documentId="doc_123"
  theme={{
    primaryColor: '#3b82f6',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderRadius: '16px',
    fontFamily: 'Inter, sans-serif',
  }}
/>

Advanced Usage

Using Hooks

For custom UI implementations:

import { useSession, useDocument } from '@informedai/react';

function CustomWidget() {
  const { session, sendMessage, applyPendingValue, isStreaming } = useSession({
    apiKey: 'wsk_...',
    documentId: 'doc_123',
  });

  const { document, documentType } = useDocument({
    apiKey: 'wsk_...',
    documentId: 'doc_123',
  });

  // Build your own UI
}

Using Context Provider

For shared state across components:

import { InformedAIProvider, useInformedAI } from '@informedai/react';

function App() {
  return (
    <InformedAIProvider
      config={{
        apiKey: 'wsk_...',
        documentId: 'doc_123',
      }}
    >
      <CustomWidget />
      <FieldPreviews />
    </InformedAIProvider>
  );
}

function CustomWidget() {
  const { session, sendMessage, isStreaming } = useInformedAI();
  // ...
}

Requirements

• React 18+
• An InformedAI workspace with API key

Links

• Documentation
• Dashboard
• GitHub

License

MIT