The frontend review toolkit.
The frontend review toolkit.
Make your apps delightful to use with Maple.
Read the intro postHow it works
The bottleneck moved.
Code got fast. Planning, DoDs and edge cases didn't, so now they get skipped and surface in testing.
Then
Settled before anyone opened an editor.
1. Sprint plan 2. A ticket per story 3. A design on every ticket 4. Edge cases mapped, DoD well defined 5. Write the codethe slow part 6. Review a small diff
Now
The code is cheap now. Nothing upstream of it got faster.
1. A partial design, at best 2. A prompt 3. A whole feature by the afternoon 4. Feedback from everyone, everywhere 5. Review, and decide the restthe slow part 6. Keep going until everyone's happy
The unit of work grew.An agent ships a whole sub-product in an afternoon. You still have to verify all of it.
The design is partial, or missing.The happy path at best. The agent fills the gaps, and finding what it invented is on you.
Anyone can start the work.Designers and PMs trigger the agent themselves. More people, more of the product, and the tooling has to keep up.
The expensive hour is no longer the one spent writing code: it is spent looking at the agent’s results, working out everything that’s wrong with it, and translating all the feedback into insights that an agent can act on. Maple saves you that hour.
The worst interruptions are the ones that needed nothing from you.
You open a PR, then feedback starts coming back from three people in three places, and you spend the day as the translator between them and your agent. None of it wanted your judgement.
Without MapleWith Maple
Without Maple
10
17:14
10 interrupts so far
AI
@Claude terminalwhich CTA?
M
Maya #designany update?
Eight hours of relaying, and the agent still asks which button.
With Maple
pricing.preview.app
Team
$12
Scale
$29
MCramped: 12px under the price, 16 everywhere else.resolved
AIyour agent
- ›maple · wait\_for\_comments
- ›1 new comment · PlanCard.tsx:48
- ›Edit PlanCard.tsx gap-3 → gap-4
- resolve\_comment · resolved
- $npm i -D @maple-kit/cli
- $maple connectors
- $maple mock plan
- $maple setup\# wire the app
- $maple review\# no wiring
- $maple list --json\# for agents
- $maple ci gate\# in CI
- $maple tuiwanted?
- @maple-kit/core
- @maple-kit/react
- @maple-kit/ui
- @maple-kit/cli
- @maple-kit/mcp
- @maple-kit/classifier
- @maple-kit/mock
- @maple-kit/lint
maple/visual-review passing
Minutes, and one interrupt for you.
How it works
Mount Maple in your app, then the magic happens.
1. ### 01Mount One route in your application, and one script in the preview build. 2. ### 02Comment A reviewer points to an issue on the app. Maple records all the context needed for the agent to pick it up. 3. ### 03Fix Your agent monitors new comments via the MCP, implements a fix and marks it as resolved. 4. ### 04Gate A CI check holds the merge until all comments are resolved, and all visual gates pass.
Everything around a frontend review, in one kit.
Tools in this space exist, but they only do small pieces of what Maple offers you out of the box, and free.
An element, an area, or a passage
Pick a component, drag a box over part of the page, or select the words that are wrong. Maple keeps the path that finds each one again after a redeploy.
Every comment carries its context
The width, the colour scheme, a screenshot taken at the moment of the pick, and who wrote it, asked of your app rather than an account system of Maple's own.
Deployed previews, not localhost
Maple runs on the preview URL your CI already builds, so anyone holding the link can leave a comment: a designer, a product manager, a client.
A CLI your agent can drive
The maple command plans mocks and lists what each connector may implement, with `--json` on every command, so an agent drives it from a terminal as easily as you do.
Your agent picks it up over MCP
It waits for comments, reads each one with its context, makes the change, and resolves the comment against the commit that fixed it.
The file and the line
A build-time tagger marks every JSX element with where it was written, so a comment arrives pointing at the source rather than at a selector.
Maple stores nothing itself
Comments live in what you already run, such as the pull request itself or Datadog. A connector is one file of plain Promise-returning methods.
A merge gate
maple/visual-review fails while a comment is open and, if you want, until the reviewer approves. It clears because the work is done.
A design lint gate
in progress
The rules a machine can check, read off the page the browser actually laid out: tokens only, the type scale, touch targets, contrast, and motion that honours reduced motion. The rendered rules run today. The check that holds the merge comes next.
A score, if you want one
optional
The comment is judged as it is typed, against five pillars, by a classifier you supply. It favours a comment an agent can act on.
Any state, on request
new
Type the state you want to review, like empty, failing or a thousand rows, and the page's API calls return it. A model only picks the state. Code writes every byte.
As any user, with any flag
new
Say who you want to be and what is switched on. Maple reads the sentence into a role, permissions and feature flags you can check before the page reloads.
What comes next.The full roadmap on GitHub
The Maple vision is extensive: here are some of the things that are not yet implemented (pull requests are appreciated!)
on Plan card
00:0000:42 commented01:08
replayPostHog · Sentryreopen1440px · lightre-verifyafter each deploy
Context and replay
A session replay link on every comment, a comment reopened at the width it was written at, and a re-check after each deploy.
on Chart bars
fix deployed in a1b2c3d
before
after
AcceptReject
Accept the fix in the preview
Your agent posts its fix on the comment, with a before and after. The reviewer accepts it where they wrote it, and the gate clears with no push.
Everything, from the terminal
All the overlay does, as commands with `--json` for agents. Connectors and mock plans ship today; a TUI is an open question.
existsplanned
forges
GitHubGitLabBitbucket
stores
DatadogPostgresLinear
exporters
WebhooksSlack
replay
PostHogSentry
previews
VercelNetlifymirrord
More connectors
More forges, stores, exporters and preview platforms, so Maple fits more of what you already run.
Maple is in Beta (but not for long!)
Some interfaces can still break with new and improved additions, but Maple is already proven helpful in actual production environments.
@maple-kit/
core
react
ui
cli
mcp
classifier
mock
lint