@usecrow/ui

React components for Crow AI agents. Includes floating widget and copilot sidebar components built on top of @usecrow/client.

Installation

npm install @usecrow/client @usecrow/ui

Quick Start

Floating Widget

Add a floating chat bubble to any React app:

import { CrowWidget } from '@usecrow/ui';
import '@usecrow/ui/styles.css';

function App() {
  return (
    <>
      <YourApp />
      <CrowWidget 
        productId="YOUR_PRODUCT_ID" 
        apiUrl="https://api.usecrow.org"
        agentName="Support Bot"
      />
    </>
  );
}

Copilot Sidebar

Add a sidebar chat panel:

import { CrowProvider, CrowCopilot } from '@usecrow/ui';
import '@usecrow/ui/styles.css';

function App() {
  return (
    <CrowProvider productId="YOUR_PRODUCT_ID" apiUrl="https://api.usecrow.org">
      <div className="flex h-screen">
        <main className="flex-1">
          <YourApp />
        </main>
        <CrowCopilot position="right" width={400} />
      </div>
    </CrowProvider>
  );
}

Components

<CrowWidget />

Floating bottom-right chat bubble. Can work standalone or within CrowProvider.

<CrowWidget
  productId="YOUR_PRODUCT_ID"
  apiUrl="https://api.usecrow.org"
  agentName="Assistant"
  defaultCollapsed={true}
  tools={{
    addToCart: async ({ productId }) => ({ status: 'success' })
  }}
  onIdentify={(identify) => {
    // Call identify() with JWT when user logs in
    identify({ token: 'jwt-from-backend', name: 'John' });
  }}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | productId | string | Required | Your Crow product ID | | apiUrl | string | https://api.usecrow.org | API URL | | agentName | string | "Assistant" | Name shown in header | | defaultCollapsed | boolean | true | Initial collapsed state | | tools | ToolHandlers | - | Client-side tool handlers | | onIdentify | function | - | Callback to handle user identification | | className | string | - | Custom CSS class | | zIndex | number | 999999 | Z-index for widget |

<CrowCopilot />

Sidebar chat panel. Best used with CrowProvider to share state.

<CrowCopilot
  title="Copilot"
  position="right"
  width={400}
  showClose={true}
  onClose={() => setShowCopilot(false)}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | productId | string | - | Product ID (if not using Provider) | | apiUrl | string | - | API URL (if not using Provider) | | title | string | "Copilot" | Header title | | position | 'left' \| 'right' | 'right' | Sidebar position | | width | number \| string | 400 | Sidebar width | | showClose | boolean | false | Show close button | | onClose | function | - | Close button callback | | tools | ToolHandlers | - | Client-side tool handlers |

<CrowProvider />

Context provider for sharing a single CrowClient instance:

<CrowProvider productId="..." apiUrl="...">
  <YourApp />
  <CrowCopilot />
</CrowProvider>

Hooks

useCrowClient()

Access the CrowClient from context:

import { useCrowClient } from '@usecrow/ui';

function MyComponent() {
  const client = useCrowClient();
  
  const handleLogin = () => {
    client.identify({ token: 'jwt', name: 'John' });
  };
}

useChat()

React hook for chat state:

import { useChat, useCrowClient } from '@usecrow/ui';

function CustomChat() {
  const client = useCrowClient();
  const { messages, isLoading, sendMessage, stop } = useChat({ client });
  
  return (
    <div>
      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
      <button onClick={() => sendMessage('Hello!')}>Send</button>
    </div>
  );
}

Building Custom UIs

Export individual components for building custom interfaces:

import {
  MessageList,
  MessageBubble,
  PromptInput,
  ChatBubble,
  WidgetHeader,
} from '@usecrow/ui';

Styling

Import the default styles:

import '@usecrow/ui/styles.css';

All classes are prefixed with crow- to avoid conflicts. Customize with CSS variables:

:root {
  --crow-primary: #6366f1;
  --crow-primary-dark: #4f46e5;
}

License

MIT