A/Z Test

Empty Developer Platform
Generate, Iterate, Render, Add Component for A/Z Test
A/Z Test Analytics Dashboard
Rendered Variant of a Component #1
Rendered Variant of a Component #2
Rendered Variant of a Component #3
Rendered Variant of a Component #4
Rendered Variant of a Component #5
Rendered Variant of a Component #1

Inspiration

We've launched multiple apps in the past and always followed the build->feedback->iterate pipeline. Recent releases such as Cursor IDE and Claude Artifacts have made development (and this pipeline) much easier, but these are only external amplifications. GenAI has the potential to disrupt how every website and app is tailored for you specifically, and we want to be that disruption. We set out to automate this iteration pipeline by creating dynamic components. A dev can generate any component fathomable, get its variations, expose them all to sections of the user base, get feedback and iterate automatically, all without writing a single line code.

What it does

A/Z Test is a library that uses gen AI to automatically create dynamic Next.js components. You can use our platform to customize this base component to be anything (carousel, card etc.), generate different variants (functionality, colors, layouts etc.) of it and deploy these variants to discrete sections of your user base. We provide live telemetry tracking that helps A/B tests for you and iterates in a hands-free loop. You can see which variants are performing well, and they keep getting boosted to the rest of your user base.

How we built it

We built A/Z Test using a combination of Next.js, React, and TypeScript for the core functionality, ensuring high performance and scalability. To enable rapid component generation, we integrated the shadcn/ui library with gen AI to create flexible and reusable UI components. The key to A/Z Test is the ability to seamlessly generate different variants of components, which can then be tested against each other using an A/B testing approach. We also developed a backend system supported by Posthog that collects and analyzes data to determine which variants perform best, providing actionable insights to developers.

Challenges we ran into

One of the main challenges we faced was ensuring that the generative AI could create components that not only varied in appearance and functionality but also maintained the high standards of quality needed for production environments. Another challenge was implementing a system to collect reliable and meaningful performance metrics for each variant, while also making sure that this process didn’t introduce significant overhead or affect the user experience negatively. Additionally, integrating the ShadCN library with our AI models to generate dynamic components was more complex than anticipated, requiring extensive optimization.

Accomplishments that we're proud of

We’re proud of successfully building a library that abstracts the complexity of creating and testing component variants, allowing developers to focus more on creativity and innovation and less on repetitive tasks. One of our biggest accomplishments was the seamless integration of generative AI with a frontend framework like Next.js, providing real-time, persistent component rendering across different use cases. We’re also proud of the metrics system we built, which provides developers with clear insights to make data-driven decisions about their component designs.

We managed to create a very scalable solution that can effectively A/B test a huge number of website variations to find the correct fit for everyone. For example, if a developer created 10 components, each with 3 variants using our library, the developer can effectively test out 59,049 different website variations.

What we learned

Throughout this project, we learned a lot about the complexities of integrating gen AI with frontend frameworks reliably. We gained a deeper understanding of how to optimize component generation while maintaining flexibility and quality. Additionally, we learned how to gather, analyze, and present performance metrics in a way that helps developers make informed decisions. This project also taught us the importance of user feedback and how A/B testing can be used to iteratively improve UI/UX design.

What's next for A/Z Test

The next step for A/Z Test is to enhance the flexibility of the library by supporting more advanced use cases, such as dynamic data fetching and integration with third-party APIs. We’re also planning to expand the number of libraries and frameworks that the developer can leverage via gen AI and the types of metrics developers can track, offering more granular insights into user interactions. Additionally, we’ll be working on improving the AI model to generate even more sophisticated components and layouts. In the long term, we envision A/Z Test becoming an essential tool for frontend developers, allowing them to easily create, test, and refine their UI components in real-time with the power of gen AI.