https://github.com/ramonclaudio/coderabbit-shadcn-registry
Modular shadcn registry for CodeRabbit API integration - framework-agnostic client, storage adapters, and React components
https://github.com/ramonclaudio/coderabbit-shadcn-registry
analytics api-client coderabbit convex database developer-tools localstorage mysql postgres react registry reports shadcn storage supabase typescript
Last synced: about 2 months ago
JSON representation
Modular shadcn registry for CodeRabbit API integration - framework-agnostic client, storage adapters, and React components
- Host: GitHub
- URL: https://github.com/ramonclaudio/coderabbit-shadcn-registry
- Owner: ramonclaudio
- License: mit
- Created: 2025-11-25T13:35:56.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-03-23T14:20:11.000Z (3 months ago)
- Last Synced: 2026-03-24T11:54:15.622Z (3 months ago)
- Topics: analytics, api-client, coderabbit, convex, database, developer-tools, localstorage, mysql, postgres, react, registry, reports, shadcn, storage, supabase, typescript
- Language: TypeScript
- Homepage: https://coderabbit-shadcn-registry.vercel.app
- Size: 129 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CodeRabbit shadcn Registry
[shadcn](https://ui.shadcn.com) registry for [CodeRabbit](https://coderabbit.ai) API integration.
## Quick Start
Add the registry to your `components.json`:
```json
{
"registries": {
"@ramonclaudio-coderabbit": "https://coderabbit-shadcn-registry.vercel.app/r/{name}.json"
}
}
```
Then install with your storage backend:
```bash
# LocalStorage (no database required)
npx shadcn@latest add @ramonclaudio-coderabbit/localstorage
# Convex
npx shadcn@latest add @ramonclaudio-coderabbit/convex
# Supabase
npx shadcn@latest add @ramonclaudio-coderabbit/supabase
# PostgreSQL
npx shadcn@latest add @ramonclaudio-coderabbit/postgres
# MySQL
npx shadcn@latest add @ramonclaudio-coderabbit/mysql
```
Or install directly via URL:
```bash
npx shadcn@latest add https://coderabbit-shadcn-registry.vercel.app/r/localstorage.json
```
## Setup
> [!IMPORTANT]
> CodeRabbit API requires a **Pro plan** subscription.
1. Get API key from [CodeRabbit Settings](https://app.coderabbit.ai/settings/api-keys)
2. Set environment variables:
| Backend | Variables |
| ------------ | ------------------------------------------------------------------------------------------------------------------ |
| LocalStorage | `CODERABBIT_API_KEY` |
| Convex | `CODERABBIT_API_KEY`, `CONVEX_DEPLOYMENT`, `CONVEX_URL` |
| Supabase | `CODERABBIT_API_KEY`, `SUPABASE_URL`, `SUPABASE_ANON_KEY` |
| PostgreSQL | `CODERABBIT_API_KEY`, `POSTGRES_HOST`, `POSTGRES_PORT`, `POSTGRES_DATABASE`, `POSTGRES_USER`, `POSTGRES_PASSWORD` |
| MySQL | `CODERABBIT_API_KEY`, `MYSQL_HOST`, `MYSQL_PORT`, `MYSQL_DATABASE`, `MYSQL_USER`, `MYSQL_PASSWORD` |
## Usage
### Direct
```typescript
import { createCodeRabbitClient } from "@/lib/client";
const client = createCodeRabbitClient();
const results = await client.generateReport({
from: "2024-01-01",
to: "2024-01-31",
promptTemplate: "Sprint Report",
});
```
### With React
```typescript
import { useCodeRabbit } from "@/hooks/use-coderabbit";
import { LocalStorageAdapter } from "@/lib/storage-localstorage";
function App() {
const { generateReport, isGenerating } = useCodeRabbit({
storage: new LocalStorageAdapter(),
});
return (
generateReport({ from: "2024-01-01", to: "2024-01-31", promptTemplate: "Sprint Report" })}>
{isGenerating ? "Generating..." : "Generate"}
);
}
```
> [!TIP]
> Swap `LocalStorageAdapter` for `ConvexStorageAdapter`, `SupabaseStorageAdapter`, `PostgresStorageAdapter`, or `MySQLStorageAdapter`.
### With UI Components
```typescript
import { CodeRabbitReportForm, getCodeRabbitReportPayload } from "@/components/report-form";
import { CodeRabbitReportCard } from "@/components/report-card";
// Form: controlled component for report parameters
// Get API payload from form data
const payload = getCodeRabbitReportPayload(formData);
await generateReport({ from, to, ...payload });
// Card: displays reports with expand/collapse and delete
storage.delete(id)} />
```
### Full Example
Complete page.tsx with form, generation, and report display
```tsx
'use client'
import { useState, useEffect, useMemo, useCallback } from 'react'
import { useCodeRabbit } from '@/hooks/use-coderabbit'
import { LocalStorageAdapter } from '@/lib/storage-localstorage'
import { CodeRabbitReportCard } from '@/components/report-card'
import {
CodeRabbitReportForm,
getCodeRabbitReportPayload,
getInitialFormData,
type CodeRabbitReportFormData,
} from '@/components/report-form'
import { Button } from '@/components/ui/button'
import type { StoredReport } from '@/lib/types'
export default function ReportsPage() {
const [reports, setReports] = useState([])
const [formData, setFormData] = useState(getInitialFormData())
const storage = useMemo(() => new LocalStorageAdapter(), [])
const { generateReport, isGenerating, error } = useCodeRabbit({
storage,
onSuccess: () => loadReports(),
})
const loadReports = useCallback(async () => {
const { reports } = await storage.list()
setReports(reports)
}, [storage])
useEffect(() => {
loadReports()
}, [loadReports])
return (
{error &&
{error}
}
generateReport(getCodeRabbitReportPayload(formData))}
disabled={isGenerating}
>
{isGenerating ? 'Generating...' : 'Generate Report'}
{
await storage.delete(id)
loadReports()
}}
/>
)
}
```
## Custom Storage
```typescript
import type { ReportStorageAdapter } from "@/lib/storage-adapter";
class MyAdapter implements ReportStorageAdapter {
async create(data) { /* return id */ }
async updateSuccess(id, results, durationMs) {}
async updateFailure(id, error, durationMs) {}
async get(id) {}
async list(options?) {}
async delete(id) {}
}
```
## Development
```bash
pnpm install
pnpm run registry:build
pnpm run typecheck
pnpm run lint
```
## License
[MIT](./LICENSE)