Rebuilding Our Dashboard with Myop (and AI)
TL;DR: We wanted a new look and feel for our Component Dashboard. So, instead of tons of PRs getting rejected, we let our UI Design and Product team build it for us with AI in an isolated Myop component. As devs, we made sure the props and architecture for data flow was pristine and just handed them the reins to build the component itself.
Introduction
Myop rebuilt its own complex Component Dashboard (built in React), using Myop itself, turning a complex, developer-coded screen into a shared surface where designers and product can safely collaborate on real production UI code. With the help of basic AI tools, the result is now a fully functional and pixel-perfect dashboard whose logic remains strictly under developer control, while layout, DOM, and visual behavior can be iterated quickly by non-developers and LLMs in realtime.
Watch how we did it here:
From Fragile Dashboard to Collaboration Bottleneck
Myop's Component Dashboard started as a classic "power user" React page: dense lists of components, variants, filters, search, and routing all wired together by deeply nested components, and based on direction from Product and Design. It definitely worked, but every attempt by designers or product managers to "just tweak the UI" risked breaking filters, URLs, or data handling, leading to rejected pull requests and a growing backlog of small-but-important UI/UX improvements.
As the team experimented with AI-generated UI as well, it became clear that dropping LLM-produced JSX straight into the codebase would only amplify the problem.
The Component Container Idea
So, we decided to use our own tool to solve our problem! Novel concept, right?
This is where the true value of Myop shines through: Our dev team separated what truly needed to stay in developer hands from what could safely be delegated to citizen devs.
The dev team introduced a React "component container" layer in the codebase. A thin, type-safe boundary where the host app owns all props, data flow, authentication, routing, and event handling, while the visual implementation lives outside the main codebase as a Myop component.
With this model, the container passes structured data into the component and listens for high-level events coming out, such as "CTA clicked," "filter changed," or "search submitted", then triggers real application actions like navigation, updating URL state, or persisting filters.
Letting Myop Render Its Own UI
With the container pattern in place, Myop used its own platform to rebuild the dashboard UI as a hosted Myop component. The host React app now exposes only the logic: data loading, permission checks, routing, and all the rules that make the dashboard behave correctly, while the actual HTML structure, layout, and visual interactions are defined inside Myop's UI environment.
Our designers and product leads, using an LLM, iterated on the component until it matched the desired pixel-perfect design, without ever touching the core React code or risking regressions in business logic.
How the Rebuilt Dashboard Behaves
From a user's point of view, the new dashboard feels like a handcrafted React page: filters work, search feels instant, state persists across navigation, and routing behaves exactly as expected. Under the hood, when a user types into a filter or clicks a component card, the Myop component emits a structured event, and the container decides what to do. Actions such as update query params, refetch data, or change views which are using the same patterns developers already trust. The UI can change daily as product and design refine layouts or animations, yet the safety-critical logic stays unchanged and testable in the host codebase.
What This Unlocked for the Team
Rebuilding our own product's dashboard with Myop validated our platform's core promise that developers keep absolute control over logic and safety, while UI iteration becomes a shared responsibility across the organization.
Citizen developers and designers can now ship real React-connected components without needing deep familiarity with the app's routing or data layer, and AI tools can generate or refactor UI structures that plug directly into production through Myop's containers. For us, using Myop on Myop turned a once-fragile, developer-only screen into a proven use case that AI- and designer-driven UI can coexist with rigorous engineering standards.