New: Reviewer agent checks every brick
Build apps with an AI that double-checks itself
PairForge pairs a builder agent with a reviewer agent. One generates .tsx bricks for your layouts, and the other tests, critiques and fixes them before you ever see a bug.
Guided tooltips at every step. No setup required.
- HeroBanner.tsx — split layoutApproved
- PricingGrid.tsx — 3 columnsFixing
- BookingCalendar.tsx — mobileIn review
- Footer.tsx — minimalApproved
One agent builds. Another agent checks.
Every brick goes through a build-and-review loop, so what reaches your preview has already been tested and critiqued.
The builder agent writes .tsx bricks
Describe a screen in plain words. The builder agent turns it into typed React .tsx bricks you can mix, match and reuse across pages.
- Typed .tsx components out of the box
- Reusable bricks for heroes, forms, grids and more
- Edit any brick by asking in plain language
The reviewer agent checks every change
A second agent independently reviews each brick for bugs, accessibility, responsiveness and consistency, then sends fixes back to the builder.
- Catches type errors and broken props
- Checks contrast, labels and keyboard access
- Flags layout issues on mobile and desktop
Swap design layouts in one click
Each brick comes in several layout variants, including split, centred, grid and stacked. Try them side by side and keep the one that fits.
- Multiple layout variants per brick
- Bright, consistent theme across pages
- Live preview on phone, tablet and desktop
Tooltips that show you how
Smart, context-aware tooltips explain each control the first time you use it, so you always know the next step.
- Step-by-step onboarding tooltips
- Hover hints on every agent action
- Turn tips off anytime in settings
Getting started
Go from idea to a reviewed, working app in five steps.
Create a project
Name your app and pick a starting theme. A tooltip points out where your pages and bricks will appear.
Describe your first screen
Type what you want, e.g. "a landing page with a hero, pricing and sign-up form". The builder agent drafts the .tsx bricks.
Let the reviewer check it
The reviewer agent runs its checks automatically. Open the Reviewer tab to see what passed and what it fixed.
Try different layouts
Click any brick and use the layout switcher to compare variants. Keep the one you like best.
Preview and publish
Check your app on phone, tablet and desktop in Preview, then publish when you're happy.
How-to tips
Quick tips you'll also see as tooltips inside the builder.
Be specific in your prompts
Mention layout, content and device, e.g. "two-column pricing that stacks on mobile", for better first drafts.
Ask for a second review
Type "review again" on any brick to have the reviewer agent re-run its checks after you edit.
Reuse bricks across pages
Drag a finished brick into the library to reuse it anywhere. Changes stay in sync.
Compare layouts side by side
Hold Shift while choosing a layout variant to preview two options next to each other.
Hover for hints
Hover over any agent action to see a tooltip explaining what it did and why.
Frequently asked questions
Why use two AI agents instead of one?
A single agent tends to miss its own mistakes. A separate reviewer agent checks the builder's work independently, catching bugs, accessibility gaps and layout problems before they reach you.
What are bricks?
Bricks are reusable .tsx components, such as heroes, forms, pricing grids and galleries, that make up your app. Each one comes in several design layouts.
Do I need to know how to code?
No. You describe what you want in plain language, and the agents build and review it. Developers can still open and edit the .tsx files directly.
Can I turn off the tooltips?
Yes. Tooltips guide you through your first projects, and you can switch them off anytime in settings.
What happens when the reviewer finds a problem?
It explains the issue and sends a fix back to the builder agent. You'll see the change marked in the Reviewer tab before it's applied.