Kiwi
Kiwi

Kiwi for Chromatic

Have the agent on a Kiwi step publish a Storybook to Chromatic with the Chromatic CLI and report the visual changes it found.

  • Your agent works in Chromatic through its own connection. Kiwi does not call Chromatic and never holds its credentials.
  • A workflow skill can list Chromatic among the tools it requires. When you supply your agent's available tools to a skill check and Chromatic is not among them, the check reports SK15-UNSUPPORTED-TOOL.
  • A project Admin can add links to Chromatic, with notes, under Connections and bind them to the steps that use them. The agent reads them with list_connections.
  • The agent can report the tools and plugins it ran with, including its Chromatic connection, with report_configuration.
  • The agent submits links to its work in Chromatic as the step's outputs. People review them, and sign-off stays with the people your workflow names.

What your agent can do in Chromatic

  • Build and publish a Storybook and capture snapshots for visual tests with one command.
  • Test only the stories affected by changed files with --only-changed.
  • Tell visual changes from errors by the exit code: 1 for changes, 2 for build errors and 3 for a failed build.
  • Return as soon as the upload finishes with --exit-once-uploaded.

Set up

  1. Connect your agent to Kiwi

    Add Kiwi's hosted MCP server, https://kiwiflow.io/mcp, to your coding agent.

    Coding agentsQuickstart

  2. Connect your agent to Chromatic

    Install the Chromatic command-line tool where your agent runs. The credentials stay with your agent.

    npx chromatic --project-token <your-project-token>

    Chromatic documentation

  3. Example skill

    Publish instructions like these as a workflow skill that lists Chromatic among its required tools.

    Start from the branch and the Storybook named in the assignment.
Run the Chromatic CLI and read its exit code and the build link it prints.
Submit the build link and the number of changed snapshots as outputs.
Leave visual changes for the assigned reviewer to decide in Chromatic.
If the Storybook build fails, stop and report a blocker to the step owner.
Get startedRead the setup guide