Instagram Modernized Its UI with an AI-Native Architecture, Cutting Token Costs by 33%

Instagram Direct migrated its Android UI from the legacy Android View system to Jetpack Compose, creating an AI-native UI codebase that is easier for AI coding agents to understand, modify, and maintain. According to Instagram engineers, the migration reduced UI code volume by 50% and token costs per AI agent session by 33%.

One of Instagram engineers' key claims is that "designing an AI-native architecture led to significant wins". Rather than taking a piecemeal approach where agents are prompted to migrate individual components, the emphasis should be on evaluating whether the underlying architecture makes correct implementations easy to produce. In fact, as the engineers point out, "AI tools often take the path of least resistance", which is likely to introduce "subtle bugs, tech debt and performance regressions".

Optimizing the codebase for AI, Instagram engineers explain, means establishing correct architectural boundaries around state management, predictable behavior, and which development patterns makes it so that the least resistance path for agents is the one that leads to the best conversion. Instead of simply letting the AI patch design gaps, the goal is to design the codebase with an understanding of how AI agents actually modify code:

AI agents naturally take the path of least resistance, so the design should make that path lead to correct, high-quality code, while making poor design decisions hard and expensive to express.

Another key principle is minimizing context dependency, which means that rather than requiring AI agents to rely on codebase-specific knowledge, they favor established best practices and familiar patterns that help them produce more reliable results.

The migration was carried through without disrupting the wider team's work, allowing engineers to continue shipping new features. AI-assisted workflows were standardized to promote consistency and ensure alignment with shared architectural conventions and best practices across the team.

With this approach, the Jetpack Compose migration reduced UI code volume by 50%, while cutting AI agent execution time by 35%, token costs per agent session by 33%, and engineer–agent exchanges by 32%.

A major challenge was ensuring that the migration did not introduce performance regressions. The team focused on three key production metrics: time to interact, i.e., the time it takes for a screen to become usable after opening it; time to fully load, i.e., the time for all screen content to load; and scroll performance, i.e., measuring how smoothly screen contents scrolls.

These metrics are tracked at runtime in production, making it possible to run A/B tests comparing the migrated Compose UI against the legacy UI and evaluate the performance impact of this effort.

One significant finding for Instagram engineers was that performance could not be assessed reliably until entires screens were ported to Compose, eliminating any remaining legacy Views that could distort performance measurements.

This means Compose UI components should be abstracted away from the framework they are enclosed in while still being compatible with both RecyclerView and LazyColumn at the same time. Equally important is the ability to switch between the two at runtime via feature flags, to enable A/B testing.

Eventually, the team replaced the legacy RecyclerView, initially retained as a container for the new Compose-based composables, with LazyColumn, Compose native solution for efficiently rendering scrollable lists.

As a final note, the migration also improved startup performance in other areas in the app. This was partly because Compose has a runtime warmup cost that is incurred only once per app session, allowing other Compose-based screens to benefit from the runtime already being initialized rather than paying that cost again.