@chainai/react

React components for Chain AI - Embeddable blockchain AI assistant.

Installation

npm install @chainai/react @chainai/core

Quick Start

import { ChainAI } from '@chainai/react';

function App() {
  return (
    <ChainAI
      config={{ apiKey: 'sk_dev_123_...' }}
      height="600px"
      placeholder="Ask me anything about blockchain..."
    />
  );
}

Features

• ✅ Simplified Components - 94% reduction from 2,556 lines to ~360 lines
• ✅ Customizable Theming - Dark/light themes with full CSS customization
• ✅ Real-time Streaming - Word-by-word response streaming
• ✅ Type Safe - Full TypeScript support
• ✅ Responsive - Works on all screen sizes
• ✅ Accessible - Keyboard navigation support

Basic Usage

Standalone Component

import { ChainAI } from '@chainai/react';

function App() {
  return (
    <ChainAI
      config={{
        apiKey: 'sk_dev_123_...',
        host: 'https://icp0.io', // optional
      }}
      height="600px"
      theme={darkTheme}
      placeholder="Message Chain AI..."
      showHeader={true}
      headerTitle="Blockchain Assistant"
      onMessage={(msg) => console.log('User sent:', msg)}
    />
  );
}

Advanced Usage with Provider

import { ChainAIProvider, useChainAI, useChat } from '@chainai/react';

function App() {
  return (
    <ChainAIProvider
      config={{
        apiKey: 'sk_dev_123_...',
      }}
    >
      <MyCustomChat />
    </ChainAIProvider>
  );
}

function MyCustomChat() {
  const { messages, sendMessage, isLoading } = useChat();

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>{msg.content}</div>
      ))}
      <button onClick={() => sendMessage('What is BTC price?')}>
        Get BTC Price
      </button>
    </div>
  );
}

Props

ChainAI Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | config | ChainAIConfig | required | API key and configuration | | conversationId | string | 'default' | Unique conversation identifier | | theme | Theme | defaultTheme | Color scheme and styling | | className | string | '' | Additional CSS classes | | height | string \| number | '600px' | Component height | | placeholder | string | 'Ask me anything...' | Input placeholder text | | showHeader | boolean | true | Show/hide header bar | | headerTitle | string | 'Chain AI' | Header title text | | onMessage | (msg: string) => void | - | Callback when user sends message |

Theming

Built-in Themes

import { ChainAI, darkTheme, lightTheme } from '@chainai/react';

// Dark theme
<ChainAI config={config} theme={darkTheme} />

// Light theme
<ChainAI config={config} theme={lightTheme} />

Custom Theme

import { ChainAI, Theme } from '@chainai/react';

const customTheme: Theme = {
  colors: {
    primary: '#6366f1',
    primaryText: '#ffffff',
    background: '#0f172a',
    text: '#f8fafc',
    border: '#1e293b',
    userMessage: '#6366f1',
    userMessageText: '#ffffff',
    assistantMessage: '#1e293b',
    assistantMessageText: '#f8fafc',
    inputBackground: '#1e293b',
    headerBackground: '#020617',
    headerText: '#f8fafc',
  },
  fonts: {
    body: 'Inter, sans-serif',
    heading: 'Inter, sans-serif',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
};

<ChainAI config={config} theme={customTheme} />

Hooks

useChainAI()

Access the Chain AI client and customization settings.

const { client, isReady, error, customization, updateCustomization } = useChainAI();

useChat(conversationId?)

Manage chat messages and state.

const { messages, isLoading, error, sendMessage, clearMessages } = useChat('my-conversation');

Components

Individual Components

You can use individual components for custom layouts:

import {
  ChainAIProvider,
  ChatMessage,
  ChatInput,
  ChatHeader,
  useChat,
  defaultTheme,
} from '@chainai/react';

function CustomLayout() {
  const { messages, sendMessage, isLoading } = useChat();

  return (
    <div>
      <ChatHeader title="My Custom Chat" theme={defaultTheme} />
      {messages.map(msg => (
        <ChatMessage key={msg.id} message={msg} theme={defaultTheme} />
      ))}
      <ChatInput
        onSend={sendMessage}
        disabled={isLoading}
        theme={defaultTheme}
      />
    </div>
  );
}

TypeScript

Full TypeScript support with exported types:

import type {
  ChainAIProps,
  Theme,
  Message,
  ChainAIConfig,
  ResponseCustomization,
} from '@chainai/react';

License

MIT