Oct 29, 2024
In this short guide we share a framework for building a natural language to Playwright code generator for any website. Our example uses a NextJS app with Browserbase, but the principles can be adapted for many different programming languages and frameworks.
Prerequisites
First of all let’s create a new NextJS app using create-next-app
and add the necessary dependencies.
"Today people are running experiments manually on their websites to try to make them better in some way... Usually that's in the form of conversion rate, or some engagement, or some type of metric… We’re now building an AI-accelerated version of this."
- Josh Payne, Co-founder, Coframe
The Struggle of Website Optimization
For Coframe, managing browser infrastructure became a significant bottleneck that drained resources from their core mission of building AI-powered website optimization. What started as simple playwright scripting quickly evolved into a technical nightmare, with their team spending countless hours trying to maintain reliable browser automation. Turning what should have been straightforward website improvements into a complex infrastructure challenge.
“I probably spent, like, 12 hours in total just banging my head against the wall with these playwright scripts... it was barely working, it wasn't even working in a docker environment like I wanted it to.”
Before finding a solution, Coframe struggled with technical and operational challenges such as:
Writing and maintaining complex Playwright scripts and proxies that required significant engineering effort
Running manual website experiments that demanded coordination between engineers, designers, and marketers
Spending valuable development time on browser automation infrastructure instead of improving their AI website optimization
Scaling their data collection and parallel processing for website analysis and code extraction
Managing browser-based tools that required Chrome extensions, creating a subpar user experience
Transforming Tedious Experiments into Self-Improving Websites
Instead of wrestling with manual Playwright scripts and proxy configurations, Browserbase became a solution that could handle complex browser operations not only for their data creation and website analysis, but for go-to-market initiatives as well.
The solution transformed how Coframe's team operates, providing a reliable and scalable approach that eliminated their browser automation headaches. This enabled them to run parallel browser tasks at scale, extract website code efficiently, and process massive amounts of data to train their own generative AI model.
"We were able to run tons of workers at the same time instead of having to wait... and Browserbase significantly helped with that. Fast forward, I was just able to copy the documentation and have it write me what I needed and it worked out of the box... a 1000 times improvement in terms of time saved.”
This breakthrough allowed the Coframe team to channel their energy into what matters most: developing AI that makes websites self-improve, delivering automated optimization that would typically require countless hours from engineers, designers, and marketers.
The impact was immediate and significant across several key areas:
Accelerated Data Set Creation
The implementation of parallel processing dramatically accelerated their ability to gather, analyze, and create website data, transforming what was previously a time-consuming manual process into an efficient operation for producing new website sections.
”We actually worked with OpenAI to create a model that is specifically better at generating visually grounded code UI code, or website code. We extract code used to produce the sections of the websites, the styles and so forth, and use Browserbase to grab those websites do what we need to do at scale and in parallel.”
Enhancing User Experience
The team is now positioned to eliminate the need for Chrome extensions, creating a more seamless experience for their customers through live browser streaming capabilities.
"People today have to use a Chrome extension to make use of our visual editor. And that's kind of a subpar experience having to download a Chrome extension. What we're really hoping is using Browserbase we can have the user go and actually use Coframe without having to download that extension."
Reliable Solutions Drive on Browserbase
Delivering a clean and efficient platform allows Coframe to focus on their core mission of AI-powered website optimization. This approach to browser automation has been crucial in helping Coframe maintain momentum in expanding the fast-moving AI and website optimization space.
"We're really excited for the multi-region coverage from Browserbase... That'll be really awesome. So, we'll be able to use it in more parts of Coframe when that happens."
A Platform That Enables Future Growth
By implementing Browserbase, Coframe has revolutionized the website optimization process for businesses. Their platform has fundamentally changed how companies approach website improvements and A/B testing. What once required tedious coordination between engineers, designers, and marketers can now be automated through AI, enabling their clients to continuously improve their websites while maintaining high performance.
"I think that it's just like a clean solution. It's like one of those great clean products. And I would certainly recommend it being kind of the product for what you guys are doing. It just makes so much sense."
This transformation has positioned Coframe to revolutionize how websites improve themselves, automating the optimization process that traditionally consumed countless hours of manual effort.
© 2024 Browserbase. All rights reserved.