Vercel Agent's Code Review is the AI pull request reviewer built into Vercel. It reads a change with your whole codebase as context, looks for security vulnerabilities, logic errors and performance issues, and only posts a fix after the patch passes your real builds, tests and linters in a sandbox. Design Bug Bot, from 21st, reviews the UI side: whether changed React code matches the components and styles your project already has, with screenshots at desktop and mobile widths when it can render the change.
Vercel creates a preview deployment for pull requests by default, so it is natural to assume the review looks at it. Vercel environments Vercel's Code Review docs describe validation through builds, tests and linters, not screenshots of the preview. Use Vercel Agent for code fixes that arrive already checked against your pipeline; add Design Bug Bot when the question is whether the change fits your UI.
Disclosure: This comparison is published by 21st, which makes Design Bug Bot. It is based on official documentation for both products, checked on September 14, 2026. It is not a head-to-head benchmark: we have not run a common benchmark, and nothing below reports test results.
Vercel Agent and Design Bug Bot at a glance
| Vercel Agent Code Review | Design Bug Bot | |
|---|---|---|
| Review job | Security vulnerabilities, logic errors and performance issues. Vercel Agent docs | Consistency with your components, tokens, spacing and type scale, plus layout risks. |
| How a fix is checked | The patch runs in a Vercel Sandbox against your builds, tests and linters; only passing suggestions appear. Code Review docs | Suggested fix code to inspect, copy or hand to a coding agent; you test it before applying. |
| Rendered UI | Not described in the Code Review docs. | Isolated render in a disposable sandbox, with screenshots at desktop and mobile widths when it succeeds. |
| Project conventions | AGENTS.md, CLAUDE.md and other guideline files, read as context rather than instructions. Code Review docs | The components and tokens already in the codebase. |
| Triggers | New pull requests, pushed commits, optional drafts, and "@vercel" comments. Code Review docs | Pull request updates, plus default-branch reviews run manually, after a set number of commits, or on a schedule. |
| Approval and merging | Optional auto-approval of low-risk pull requests. Vercel guide | Advisory: one updated comment and a GitHub check per reviewed commit; it never blocks. |
| Requirements | A Pro or Enterprise team during the public beta, and a repository connected to a Vercel project through GitHub. Vercel Agent docs, Vercel guide | The 21st GitHub App on the repositories you choose; React with a standard package install. |
| Pricing model | Token-based, with no included Code Review usage. Vercel Agent pricing | Five free successful reviews, then AI credits. Details |
Where Vercel Agent is strong
Suggestions that already passed your checks. Code Review generates a patch for each fix, runs it in a Vercel Sandbox against your builds, tests and linters, and shows it only if it passes. You can apply it from the pull request with one click. Vercel guide
Context from the platform. Vercel's guide says that because Vercel builds and deploys your code, Code Review can analyze a pull request with knowledge of how each change fits the rest of the codebase, instead of reading the diff in isolation. That is the documented link between your deployments and the review: build and codebase knowledge used for code analysis.
Guidelines you already wrote. Code Review detects AGENTS.md, CLAUDE.md, Copilot instructions, Cursor rules and other formats, 14 in all, inherited from parent directories and scoped to their subtree. Vercel treats them as context, not instructions: finding bugs, security issues and performance problems takes precedence over conflicting guideline content. Code Review docs
On-demand help and cost visibility. Commenting "@vercel run a review" runs a full review, and other "@vercel" requests can implement a fix or investigate a failure. The Agent page shows spend, suggestions and files read for each review. Code Review docs, Managing reviews
The preview looks fine on a laptop
A new filter bar ships with the search page. The build passes, the tests pass, the linter is clean, and the preview looks right on a laptop. On a phone, the bar is wider than the screen, the page scrolls sideways, and the Apply button sits past the right edge. The bar also uses a hand-built button instead of the shared one.
A review that validates fixes through builds, tests and linters is working as intended here, because nothing failed. Vercel's Code Review docs do not describe opening the preview URL, capturing screenshots or comparing the page with your design system, so those checks stay with whoever clicks the preview link.
Design Bug Bot is built for that gap, and it renders independently of your deployment. Changed pages and components are picked from the diff and rendered in a React harness inside a disposable sandbox; when the render succeeds, the review can include screenshots and visual checks at desktop and mobile widths. It compares the change with your existing components, tokens, spacing and type scale, and looks for horizontal overflow, fixed widths and actions hidden on mobile. Findings point to the file and line when available and include suggested fix code. If the render fails, you still get code-backed recommendations without screenshots.
The trade is real. Design Bug Bot does not run your test suite against its suggestions the way Vercel Agent does, so you test a fix before applying it. It is not a reviewer for logic, security or backend bugs, and it covers React codebases on GitHub.
Choosing one, or running both
A logic bug and a new modal in one pull request. Vercel Agent's review targets logic errors such as a race in the submit handler, and any patch it suggests has passed your checks. Design Bug Bot checks whether the modal should have used your existing dialog component.
Design rules written into CLAUDE.md. If your guideline file says to use shared components and avoid raw hex colors, Vercel Agent reads that as context while its documented priority stays bugs, security and performance. For Design Bug Bot, that consistency check is the main job.
Auto-approval for low-risk pull requests. Before you turn on Vercel's auto-approval option, decide whether UI-only changes count as low risk for your team. An advisory design review gives reviewers screenshots and consistency findings to look at first.
Vercel Agent pricing
Code Review is billed at the provider's inference rate with no markup, plus a Vercel Token Rate of $0.25 per million tokens, with no included Code Review usage, listed on Vercel Agent pricing on September 14, 2026. Cost varies with the size of the change and how much code the agent reads. Vercel's June 30, 2026 changelog notes that this replaced a $0.30 per-request fee.
Design Bug Bot gives new accounts five successful reviews free, with no subscription required, then uses AI credits on a subscription that includes AI. See the trial and billing details.
A trial built around your previews
- Find a preview you had to fix by hand. Pick a merged pull request whose preview looked fine but needed a follow-up for mobile layout or a duplicated component, and recreate it from the commit before the fix.
- Compare the proof, not the count. For Vercel Agent, note which suggestions came with a passing sandbox run. For Design Bug Bot, note whether a finding names the existing component or token and whether a mobile screenshot was available.
- Hold off on auto-approval until you have seen how both reviews handle UI-heavy pull requests.
- Run one week of real pull requests. Compare Vercel's cost per review with the successful Design Bug Bot reviews counted against your free allowance, and note reviewer time for both.
For screens and widths to cover, see the responsive design testing checklist. If your team also protects approved screenshots, read visual regression testing vs AI design review.
Frequently asked
- Does Vercel Agent look at my preview deployment?
- Vercel's guide says Code Review benefits from Vercel building and deploying your code, which gives it codebase context. Its docs describe validating patches with your builds, tests and linters in a sandbox; they do not describe screenshots or visual checks of the preview.
- Does Vercel Agent follow AGENTS.md or CLAUDE.md?
- It reads them, along with 12 other guideline formats, and applies them by directory. Vercel treats guidelines as context rather than instructions, so its core job of finding bugs, security issues and performance problems wins when they conflict.
- Are Design Bug Bot's fixes tested like Vercel Agent's?
- No. Vercel Agent only shows patches that passed your builds, tests and linters in a sandbox. Design Bug Bot gives suggested fix code, with screenshots when its render succeeds, and you review and test the change before applying it.
- What does Vercel Agent code review cost?
- On September 14, 2026, Vercel's pricing docs listed provider inference at the underlying rate with no markup, plus a Vercel Token Rate of $0.25 per million tokens, with no included Code Review usage. Design Bug Bot starts with five free successful reviews, then uses AI credits.