121 Pro components and page blocks

Get Pro
uibrik

Updated

AI Code Review

Pro

Preview

Customize

Color

Installation

Pro

AI Code Review is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/ai-review

Usage

import { AiReview } from "@/components/uibrik/ai-review/ai-review";​const comments = [  {    id: "loading-guard",    file: "src/components/checkout-button.tsx",    line: 21,    severity: "warning",    title: "Button can be pressed twice",    body: "Nothing stops a second click while the first payment is in flight, so a double tap opens two sessions.",    fix: `    <button onClick={pay} disabled={pending} className="sticky bottom-4 w-full max-w-sm">`,  },  {    id: "console",    file: "src/components/checkout-button.tsx",    line: 8,    severity: "nit",    title: "Leftover console.log",    body: "Logs the whole cart, including prices, in production.",    fix: "",  },  // …3 more];​const title = "Fix checkout button overlapping content on small screens";​const checks = [  { name: "Lint", status: "pass", ms: 1600, detail: "0 problems" },  { name: "Types", status: "pass", ms: 3100, detail: "Passed" },  // …3 more];​<AiReview  files={[{ path: …, lines: [{ type: "add", text: … }] }]}  comments={comments}  color="#5b7bd6"  title={title}  number={418}  head="fix/checkout-overlap"  base="main"  checks={checks}  // ReviewComment={{ id: …, file: …, line: …, severity: "critical", title: … }}  // applied={["…"]}  // onApply={(comment) => {}}  // dismissed={["…"]}  // onDismiss={(comment) => {}}/>

Where to use AI Code Review

  • AI dev tool landing pages

    Shows a review bot reading real code and fixing it in about fifteen seconds, without a video.

    Pairs with Agent Trace and Terminal Demo

  • Code review products

    Feed it a real diff and your model's comments; onApply and onDismiss hook into your own patch flow.

    Pairs with Tool Call

  • Internal dashboards

    One PR's risk, checks and open findings on one card.

    Pairs with Deploy Pipeline and Status Dashboard

Props

AiReview
color
Type string
"#5b7bd6"
Colour of the scan line and the review's highlights.
title / number / head / base
Type string / number / string / string
–
The pull request.
filesrequired
Type { path; oldStart?; newStart?; lines: { type: "add" | "del" | "ctx"; text }[] }[]
–
The diff, one hunk per file.
commentsrequired
Type ReviewComment[]
–
The review's findings.
ReviewComment
Type { id; file; line; severity: "critical" | "warning" | "nit"; title; body?; fix? }
–
line indexes into the file's lines. fix replaces the line; an empty string removes it.
checks
Type { name; status: "pass" | "fail"; ms; detail? }[]
–
CI checks. ms is when each settles in play mode.
applied / onApply
Type string[] / (comment) => void
–
Applied fixes (controlled) and the Apply fix handler.
dismissed / onDismiss
Type string[] / (comment) => void
–
Dismissed comments (controlled) and the Dismiss handler.
className
Type string
–
Classes for the card.