At Reactiv we empower Shopify brands to ship mobile apps for their stores. Part of this is our Reactiv Dashboard, a Shopify plugin where brands can design and build their apps via a drag and drop interface we call the studio. As agentic experiences began to take off, it was obvious to us that we could streamline a large amount of the work involved in building apps with an AI agent in the dashboard.
Most AI features in SaaS dashboards feel like afterthoughts. A chatbot bolted onto the side. A magic wand button that generates something you can’t edit. The AI and the UI live in parallel universes — and the user ends up mediating between them. We wanted to avoid these pitfalls in our dashboard AI agent. AI had to have access to the same tools as the user when it came to building apps. If it didn’t, the two would end up fighting over the designs of their apps, rather than collaborating on building amazing experiences.
We set three rules for the Reactiv Studio Agent:
- Treat the agent as a first class citizen in our dashboard - anything a user can do, the agent should also be able to do
- Immediacy - Agent operations should be fast and immediately visible to the user, allowing quick iterative workflows when designing apps with AI assistance.
- Interchangeability - The user should be able to work collaboratively with the agent, manual edits should be possible in addition to AI changes.
In one word, our Studio Agent had to be seamless. By integrating with shared tools for manipulating state, the user experience would feel natural in both manual and agentic flows. There were two key components to this: State Management, and CopilotKit and frontend AI tools.
State Management
The end product of a user’s work in the dashboard is a Reactiv Config File. This is a json file describing the user’s app that will be ingested by our mobile apps to create a merchant’s custom experiences. It is made up of Screens, Sections, and Blocks where a screen represents a screen (duh), sections describe the components on that screen (carousel, featured products, etc) and blocks make up the content of sections (images, links, etc).
Now I’ll admit, there was some tech debt in our system here: scattered React context, multiple competing reducers, and conflicting sources of truth for what makes a valid config. Giving an AI access to this meant we had to tidy up or we were doomed to fail. The solution: Zustand and atomic actions. We refactored our config library to use Zustand, a lightweight state management library with clearly defined actions for modifying state.
Zustand represents state in a “store”, an object consumers can easily subscribe to. The store can then be mutated via actions, functions that perform operations on the store state.
We use Zod and typescript to strongly type action payloads and validate the full config, preventing any invalid mutations. Zod descriptions allow us to tag our schemas with details for the Studio Agent to use when inferring what data it needs to provide. All together this creates a robust system that prevents invalid configs from being produced. Then, on the frontend, both the user and the Studio Agent are interacting on the same store, with the same tools — when a user adds a carousel to the dashboard via the UI, the same addSection action is called as when the agent adds a carousel. Furthermore we built history tracking and an undo/redo stack into the store, allowing the user to undo AI changes just like their own, since both go through the same store.
This Zustand store would come to be the foundation of empowering AI operations at Reactiv. Our frontend maps Zustand actions 1:1 with frontend tools, and our config MCP uses it under the hood to manage our state mutations when building on the backend. You can read more about how we leveraged these patterns on the backend here: How Reactiv Built an AI Scheduler on AWS Bedrock AgentCore
Frontend tools + CopilotKit
Connecting our dashboard state to the Studio Agent required a bridge between Zustand and the LLM. We landed on using CopilotKit, a library for integrating agentic workflows with React apps. It allows you to define “tools”, the actions the AI can take, and “readable context”, the parts of your application state you want the AI to be aware of.
This mapped wonderfully onto our Zustand store — the store was registered as readable state via the useCopilotReadable hook, and the actions registered as CopilotKit tools via useCopilotAction. Wiring it up was simple as all our Zustand actions were well typed and self validating, and if the Studio Agent ever attempts a tool call with a bad payload our validation returns a clear error, allowing it to adapt and try again rather than returning to the user with an error.
Once the pattern was established, expansion was easy — we now have six tool categories: config editing, Shopify storefront lookups, image generation, analytics, web scraping, push notifications. Image generation has a human-in-the-loop flow where the Studio Agent generates an image and the user approves/rejects before it’s placed. Analytics lets users ask natural language questions about their app performance. The tool hook pattern means adding a new capability is just writing a new hook.
The real power is in how the Studio Agent is able to look at its toolkit and combine tool uses to respond to complex prompts. For example:
“Build me a hero carousel with my top performing products and generate hero images for each of them.”
The agent will use our Shopify and analytics tools to find and fetch a store’s top products, our image generation tools to create hero images, and our config tools to build the hero carousel section itself.
Looking Forward
We’ve built a strong foundation for AI in the Reactiv Dashboard, but there’s a lot more to come. CopilotKit’s ability to hook into React state means the Studio Agent doesn’t have to stop at the studio — the same pattern can extend to the rest of the dashboard.
A few things we’re excited about: letting the agent navigate the user directly to the screen they need, generating copy on the fly inside our forms, and kicking off cross-surface actions like drafting a push notification from a conversation about analytics. Each of these is just another hook, another tool registered alongside the existing ones.
And that’s the part that gets more interesting over time. The hero carousel example earlier combined four of our tool categories — Shopify, analytics, image gen, config — to respond to a single prompt. Every new tool we add doesn’t just bolt on a capability, it multiplies with everything already there. The Studio Agent started as a builder assistant but it’s on its way to being a co-pilot for the whole dashboard.
