You create variants in the extension's side panel, right next to the page you want to change. Each request becomes a step of the variant and is applied live in your browser.
| Marker | What it is |
|---|---|
| 1 | Prompt box. Where you describe the change. Everything starts here. |
| 2 | Tools. Select or circle, + to attach, Ideas and the microphone. |
| 3 | Export the test. Shown once the variant has a step. |
| 4 | Steps. One card for each step of the current variant. |
Create a variant#
- Open the page Go to the page of your site you want to change, then open the Henkan Variant side panel.
- Point at it Select an element or circle an area. Skip this for page-wide changes.
- Describe the change Type or dictate one clear sentence with the element, the change and any condition. For example: "Show the free delivery threshold in a thin bar above the header".
- Let Variant check it The change appears on the page. Variant then compares the result with your request on a screenshot and corrects what it missed.
- Refine Ask for adjustments in new messages, such as "use our dark green" or "hide it on mobile". Each message adds a step.
- Export When the variant is right, export the code. See Export the code.
The panel at a glance#
From extension 0.13.0, the panel asks one question at a time:
- On a new page, it asks What do you want to test on this page? and suggests ideas for the page.
- Once you pick an element, it shows the element's name and asks what it should become.
- Once the variant has a step, Original / Variant appears at the top.
The ··· menu#
Everything you use less often is in the ··· menu at the top right:
| Item | What it does |
|---|---|
| New variant | Starts a new variant on the page. |
| Page screenshot | Captures the visible screen, the full page, or before / after. |
| Keep an element as a reference | Saves a component to reuse its structure elsewhere. |
| Scan this site | Builds the site's profile. See Sites page. |
| Export the test | Gets the final code. |
| Open in the app | Opens the variant in the web app. |
| Settings | Model and connection (⌘,). |
With the Henkan app connected, the right model is picked for each task.
Ways to make a request#
| Action | What it does |
|---|---|
| Select | Click an element of the page to target it precisely. |
| Circle | Draw around an area to point at several elements at once. |
| Describe | Explain the change in a sentence, as you would to a developer. |
| Dictate | Press the microphone and speak: your request is transcribed. |
| + | Attach an Image or screenshot (or paste or drop it), a Figma link, or Like a reference… to reuse a component you kept. |
| Ideas | Get 3 illustrated ideas for the page or the picked element; Code this idea builds one. For up to five researched ideas, see Generate ideas. |
| Export the test | Copy the final code for your A/B testing tool. |
The element you select is attached to your request (3). In the web app, attached elements show as small chips above your message in the variant's conversation.
What Variant does for you#
Builds in your design#
Variant reads the page's design: CSS variables, fonts, colours and the structure of the visible page. The change then uses your existing styles instead of generic ones.
Checks its own work#
After applying a change, Variant reviews the result visually and fixes any problem it finds. In the web app, that step is marked Corrected after visual review, with the list of issues fixed.
Asks when something is unclear#
If your request can be read in several ways, Variant asks a Clarification question with suggested answers. Your answer is kept in the conversation as Selected answer.
Keeps working on dynamic sites#
Sites built with React or similar frameworks sometimes redraw the page, and the change disappears. Ask Variant to "reapply the change when the page changes": the code then watches the page and applies the change again.
Each step is a card#
Each request becomes a card with what you asked and what changed.
| On the card | What it does |
|---|---|
| Verified | Shown once the change was checked on the page. |
| Copy | Copies the step's code. |
| Cancel | Removes the step. |
| Details | Shows the request, the attached elements, the automatic corrections and the code. |
A question from Henkan is a card with its answers as buttons. An error is a card with Try again. While Henkan works, the send button becomes a stop button.
Fix the test#
From extension 0.14.0, after a step the panel fixes that version instead of starting a new change. The field says Fixing version N and its button Fix version N; Start a new change instead is just below.
- Say if it works Under the last step, Does this version work for you? offers Looks good or To fix.
- Mark the elements To fix (or Notes in the field) turns on notes. Click what is wrong on the page: each element gets a numbered pin, red To fix or green To keep, and a line where you write the note.
- Add a screenshot Paste, drop or attach one if it helps.
- Send the fix Fix version N sends your notes (with where each element is), the images and your text in one request.
Henkan only adds the code that corrects this version and leaves what is marked to keep untouched. The result becomes version N+1; its card lists the fixes and offers Back to version N.
With two versions or more, V1, V2, V3 show an earlier version on the page. Start again from version N removes the later ones.
Resume a conversation#
On a page with no conversation, the panel (extension 0.13.3 or later) offers Resume above the ideas. It lists:
- This browser. The page's last variant, kept for 14 days, even after Chrome is closed.
- Your workspace. With the app connected, the page's latest variants, made on another computer or by a teammate.
Choosing one brings its steps back as cards, applies them on the page and keeps saving to the same variant in the app.
From extension 0.14.1, ··· › Resume a conversation lists them at any time, even with a conversation open. You see the conversations kept in this browser for every page (newest first) and the app's variants for this page. One from another page opens that page first, then resumes.
Steps added in the Studio#
Steps added in the app's Studio (Build) are saved in the variant straight away. When you open the variant's page with the side panel (extension 0.10.1 or later), it picks them up, applies them and tells you how many it retrieved. Your next requests come after them.
After each step, the extension also saves an editable copy of the page for the Studio. While it loads every image, the page scrolls down and back up by itself for a few seconds.
Keep a component as a reference#
Reuse the structure of a component you like on another site, such as a search bar, a product gallery or a booking summary. This needs the extension connected to the app (0.11.0 or later).
- Open the sheet Choose ··· › Keep an element as a reference (from 0.13.0; before, a Keep as reference tab at the top). It opens over the panel; ✕ brings the panel back.
- Pick the component On any site, click it on the page; ↑ takes the parent block.
- Name it The panel shows what was picked, a Name field and What we keep: its structure, its behaviour (suggestions, date picker, counter…) and a picture for side-by-side comparison. Its colours, fonts, logo and wording are not used.
- Save it Select Save to my references to add it to your workspace's references.
To use it, pick + › Like a reference… in the side panel (0.13.0), or Like… in the Studio. The reference is attached to your next request as Like · its name, and Henkan takes its structure and behaviour with your site's look.
The page's HTML is cleaned (no scripts) before it is sent, and it never runs in the app.
Dictation#
Dictation uses Chrome's built-in speech recognition, only while the microphone button is active. Chrome cannot ask for microphone access from the side panel, so the first time, a tab opens once to ask for permission. After that, dictation works directly in the panel.
Figma mockups#
Attach a mockup as an image, or paste a Figma link. With a link, the frame image is fetched from Figma with your own Figma token.
Mockups are sent with your request as visual references. The web app shows how many were attached to each message.
Limits that apply to requests#
| Limit | Value |
|---|---|
| Request size, screenshots included | 12 MB |
| Requests per person | 30 per minute |
| Monthly requests | Set per workspace, see Usage and limits |
When you reach a limit, the request is refused with an explanation, for example "Too many requests. Please wait a few seconds."