Creating a Codegen Feature: A Generalized Guide

Overview

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.

pnpm dlx create-next-app@latest --ts browserbase-codegen 

pnpm add -D shadcn
pnpm add react-spinners

pnpm exec shadcn init
pnpm exec shadcn add separator tabs textarea button label input toast

Along with the dependencies above, you will also need:

• Anthropic account & API key
• Browserbase account & API key

You should add these values as variables in your .env.development.local file:

ANTHROPIC_API_KEY=
BROWSERBASE_API_KEY=

1. User Interface

Let’s start by building out a simple UI with our installed components for inputting prompts and displaying generated code.

Here are some key features we should consider for the UI:

• Support multi-line input for complex prompts
• Provide clear visual feedback for different states
• User-editable code input to make it possible to extend existing Playwright scripts