CodeRabbit
A shadcn registry for integrating with the CodeRabbit API. Build developer activity reports with a framework-agnostic client, pluggable storage adapters, and ready-to-use React components.
[features]
Framework Agnostic
Core client works with any JavaScript framework. React hooks included.
Storage Adapters
LocalStorage, Convex, Supabase, PostgreSQL, MySQL. Bring your own backend.
shadcn Compatible
Install directly with the shadcn CLI. Copy-paste ready components.
Type Safe
Full TypeScript support with strict types for all APIs.
[install]
Add components directly to your project using the shadcn CLI.
Full installation (recommended)
npx shadcn@latest add https://coderabbit-shadcn-registry.vercel.app/r/coderabbit.json Or install individual components
coderabbit-report-form Form component for generating developer activity reports coderabbit-report-card Display card for showing report summaries use-coderabbit React hook for CodeRabbit API integration [storage-adapters]
Choose the storage backend that fits your stack. All adapters implement the same interface.
| Adapter | Description |
|---|---|
| LocalStorage | Browser-based, no backend required |
| Convex | Real-time database with automatic sync |
| Supabase | Open source Firebase alternative |
| PostgreSQL | Traditional relational database |
| MySQL | Popular relational database |
[quick-start]
1. Install the registry
npx shadcn@latest add
https://coderabbit-shadcn-registry.vercel.app/r/coderabbit.json 2. Import and use
import { useCodeRabbit } from "@/hooks/use-coderabbit";
const { generateReport, isLoading } = useCodeRabbit({
apiKey: process.env.CODERABBIT_API_KEY,
});3. Generate reports
const report = await generateReport({
username: "ramonclaudio",
dateRange: "last-7-days",
});