Chain AI Widget SDK

Embed a blockchain AI chat assistant into any React app. Users can ask about balances, swap tokens, send transfers, and more — all through natural language.

Quick Start

Install packages

npm install @chainai/core @chainai/react

Get an API key

Switch to the API Keys tab above to register and generate your key.

Add the widget

import { ChainAIProvider, ChainAIWidget } from "@chainai/react";

function App() {
  return (
    <ChainAIProvider
      apiKey="chai_your_key_here"
      baseUrl="https://api.chainai.com"
      branding={{ name: "My DApp", showPoweredBy: true }}
    >
      <ChainAIWidget
        position="bottom-right"
        onTransaction={(tx) => {
          // Sign with your wallet SDK
          console.log("Transaction to sign:", tx);
        }}
      />
    </ChainAIProvider>
  );
}

Packages

@chainai/core

Pure TypeScript client. Zero dependencies. Works in Node.js, browsers, Deno, and Bun.

@chainai/react

React components — floating widget, inline chat, themes, branding. Requires React 18+.

Components

`<ChainAIProvider />`

Wrap your app with the provider. It creates the API client and injects theme CSS variables.

Prop	Type	Req	Description
apiKey	string	✓	Your Chain AI API key (chai_...)
baseUrl	string		API server URL (default: localhost:3000)
theme	Partial<Theme>		Theme overrides (colors, fonts, radius)
branding	BrandingConfig		Widget branding (name, logo, welcome msg)
walletContext	WalletContext		Connected wallet addresses per chain
walletAddress	string		Primary wallet address (used as userId)

`<ChainAIWidget (Floating) />`

Floating action button that opens a chat window. Best for adding AI to an existing app without layout changes.

<ChainAIWidget
  position="bottom-right"
  dimensions={{ fabSize: 56, windowWidth: 400, windowHeight: 600 }}
  onTransaction={(tx) => signWithWallet(tx)}
  onSignRequest={(req) => signTypedData(req)}
/>

Prop	Type	Description
position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	Widget position (default: bottom-right)
dimensions	DimensionConfig	FAB size, window size, offset
defaultOpen	boolean	Start with chat open (default: false)
onTransaction	(tx) => void	Called when a transaction needs signing
onChart	(chart) => void	Called when chart data is available
onSignRequest	(req) => void	Called for Hyperliquid EIP-712 signing
onDepositRequest	(req) => void	Called for Hyperliquid deposit
onOnrampRequest	(req) => void	Called for fiat on-ramp (MoonPay)

`<ChainAI (Inline) />`

Inline chat component for embedding directly in your page layout. Takes the same callback props as the widget.

<ChainAI
  style={{ width: 600, height: 500 }}
  onTransaction={(tx) => signWithWallet(tx)}
/>

Core Client (Non-React)

Use @chainai/core directly for Node.js scripts, bots, or non-React frameworks.

import { ChainAIClient } from "@chainai/core";

const client = new ChainAIClient({
  apiKey: "chai_your_key_here",
  baseUrl: "https://api.chainai.com",
});

// Non-streaming
const res = await client.chat("What is the price of ETH?");
console.log(res.response);

// Streaming
await client.chatStream("Show me BTC market data", undefined, {
  onText: (chunk) => process.stdout.write(chunk),
  onDone: (data) => console.log("\nDone:", data.conversationId),
});

// Tools
const tools = await client.listTools();
const result = await client.callTool("get_price", { coin: "bitcoin" });

// Conversations
const convos = await client.getConversations("0x...");

Theming & Branding

Customize the widget appearance with themes and branding. Built-in dark and light presets, or provide your own colors.

import {
  ChainAIProvider,
  ChainAIWidget,
  lightTheme,
} from "@chainai/react";

<ChainAIProvider
  apiKey="chai_..."
  theme={{
    colors: {
      primary: "#8b5cf6",      // Purple accent
      background: "#0f0f23",   // Custom dark bg
    },
  }}
  branding={{
    name: "My DApp AI",
    logoUrl: "/my-logo.svg",
    welcomeMessage: "Hi! Ask me anything about DeFi.",
    placeholder: "Type your question...",
    showPoweredBy: true,
  }}
>
  <ChainAIWidget />
</ChainAIProvider>

CSS Variables

The provider injects CSS variables you can also use in your own styles:

--chain-ai-primary       /* Accent color */
--chain-ai-bg            /* Background */
--chain-ai-surface       /* Card/bubble background */
--chain-ai-text          /* Primary text */
--chain-ai-text-muted    /* Secondary text */
--chain-ai-border        /* Border color */
--chain-ai-font-body     /* Body font family */
--chain-ai-font-mono     /* Monospace font */
--chain-ai-radius-lg     /* Border radius */

Wallet Integration

The widget does not include a wallet SDK. Instead, it emits callbacks when transactions need signing. You handle signing with whatever wallet library your app already uses (wagmi, ethers, @solana/web3.js, etc.).

import { useSendTransaction } from "wagmi";

function App() {
  const { sendTransactionAsync } = useSendTransaction();

  return (
    <ChainAIProvider
      apiKey="chai_..."
      walletContext={{ ethereum: "0x..." }}
      walletAddress="0x..."
    >
      <ChainAIWidget
        onTransaction={async (tx) => {
          if (tx.chain === "ethereum") {
            await sendTransactionAsync({
              to: tx.to as `0x${string}`,
              value: BigInt(tx.value || "0"),
              data: tx.data as `0x${string}` | undefined,
            });
          }
        }}
      />
    </ChainAIProvider>
  );
}

Supported Chains & Tools

Ethereum

Balance, transfers, ENS, gas, token info, Uniswap swaps

Solana

Balance, transfers, Jupiter swaps

Bitcoin

Balance, transaction lookup, fee estimation

Hyperliquid

Markets, positions, orders, leverage, charts, deposits, on-ramp