@usecrow/ui

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

Installation

``bash
npm install @usecrow/client @usecrow/ui
`

Quick Start

$3

Add a floating chat bubble to any React app:

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

function App() {
return (
<>

productId="YOUR_PRODUCT_ID"
apiUrl="https://api.usecrow.org"
agentName="Support Bot"
/>

);
}
`

$3

Add a sidebar chat panel:

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

function App() {
return (



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

`tsx
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 |

$3

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

`tsx
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 |

$3

Context provider for sharing a single CrowClient instance:

`tsx




`

Hooks

$3

Access the CrowClient from context:

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

function MyComponent() {
const client = useCrowClient();

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

$3

React hook for chat state:

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

function CustomChat() {
const client = useCrowClient();
const { messages, isLoading, sendMessage, stop } = useChat({ client });

return (


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

Styling

Import the default styles:

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

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

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

License

MIT