React components for Crow AI agents - Widget, Copilot
npm install @usecrow/uiReact components for Crow AI agents. Includes floating widget and copilot sidebar components built on top of @usecrow/client.
``bash`
npm install @usecrow/client @usecrow/ui
Add a floating chat bubble to any React app:
`tsx
import { CrowWidget } from '@usecrow/ui';
import '@usecrow/ui/styles.css';
function App() {
return (
<>
apiUrl="https://api.usecrow.org"
agentName="Support Bot"
/>
>
);
}
`
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`
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 |
Sidebar chat panel. Best used with CrowProvider to share state.
`tsx`
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 |
Context provider for sharing a single CrowClient instance:
`tsx`
Access the CrowClient from context:
`tsx
import { useCrowClient } from '@usecrow/ui';
function MyComponent() {
const client = useCrowClient();
const handleLogin = () => {
client.identify({ token: 'jwt', name: 'John' });
};
}
`
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 (
Building Custom UIs
Export individual components for building custom interfaces:
`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;
}
``MIT