Skip to content

Build1 publisher3 min readPublished

Shopify's Helix has LLMs port a 300-plus-screen app one reviewed checkpoint at a time

Shopify's Helix ports its 300-plus-screen app off React Native in small LLM-built checkpoints, each held behind four gates. The design assumes the model's first attempt is wrong, so most of the adoption cost sits in test harnesses and a written architecture.

The Engineer · Build desk

Illustration accompanying Shopify's Helix has LLMs port a 300-plus-screen app one reviewed checkpoint at a time

What happened

  • Shopify is moving its mobile apps from React Native back to native Swift and Kotlin, and has already rebuilt and published Shop in 12 weeks.
  • For the Shopify App, its largest at more than 300 screens, Shopify built Helix, a set of LLM tools and skills that follow an opinionated native architecture.
  • An engineer points Helix at a screen, and it reads the React Native code and proposes ordered checkpoints that the engineer approves in minutes.
  • Each checkpoint must pass tests, a visual match with the React Native app, two adversarial code reviews and engineer approval before it is committed.
  • Helix remembers feedback from every review, and Shopify says the loop becomes more autonomous as a migration goes on.

Compiled by The EngineerSomething wrong?How this is made

Why it matters

  • cost Copying the approach starts with building a CLI that exposes each screen's state and actions, since the behavior gate has nothing to test against without one.
  • constraint Tests generated from the React Native code make the old app's behavior the target, so any fix to that behavior has to be planned as separate work after the port.
  • cost An agent with unlimited retries against gates it cannot override has no ceiling on model spend or elapsed time for a checkpoint that keeps failing.

Shopify summed up the design in one line. "Helix builds a loop where an imperfect attempt cannot move forward until it becomes a good result," the company wrote [18]. When a gate fails, the agent takes the feedback, fixes the code and runs the check again [14]. It may retry as many times as it needs to. It may not override a failed check because it thinks the result is good enough [14].

Most of the human judgement goes in before any code exists. The first checkpoint is usually the screen skeleton and the second is a deliberately small section. Later ones grow only after the early decisions pass review [11]. Each is described in a few words. "We'd rather give someone one decision they can make as opposed to ten pages they will skim," Shopify wrote [16]. Anyone who has approved a large generated diff after reading its first file will recognise the problem. In my view the plan review is the best idea in Helix, because a bad slice order is cheapest to fix while it is still a short list.

Small slices also change what the model reads. A checkpoint fits in a small context window, so the agent reads the relevant part of the React Native code directly and skips the large spec file [12]. "The reference is the spec," the post says [12]. Shopify contrasts this with tools that turn gathered information into specs and task files, implement everything at once and hope the first result works [6].

The behavior gate runs on a command-line harness. Shopify's CLI exposes the same screen state and actions as the app. Its example is a home screen exposing analytics information and actions for navigating to other parts of the app [15]. The agent studies how the reference app works, replicates it and validates the result through CLI behavior tests [15]. A subagent writes those test cases from the reference code as integration tests from the user's perspective. Shopify says the tests are also used to push the agent toward edge cases outside the happy path [13].

The code reviews need a standard to hold code to. Shopify says it documented its opinionated architecture thoroughly so reviewers have one to enforce [17].

Shopify's stated reason for building guardrails at all is that LLMs are capable but hard to get consistent, maintainable results from out of the box [4]. The evidence that this design works at scale is still one company's account. The 12-week figure belongs to Shop [2]. The Shopify App, with more than 300 screens, is the migration now under way [3]. Shopify did not give a screen count for Shop or any Helix figures for gate failure rates or time per checkpoint, so the Shop timeline cannot be scaled into a schedule for the larger app.

What to watch

  • Shopify publishing gate failure rates, retry counts or time per screen from the Shopify App migration.
  • Whether the 300-plus-screen Shopify App ships natively on a timeline comparable to Shop's 12 weeks.
  • How Helix handles React Native behavior Shopify wants changed during the port, given the tests are generated from the old code.
Loading claim ledger
Loading source directory links
Loading share composer
Loading topic controls
Loading related stories