Creating a Codegen Feature: A Generalized Guide

Overview

This guide provides a framework for implementing a codegen feature in a NextJS application that generates code based on natural language prompts. While our example uses a NextJS app to generate Playwright JS code, these principles can be adapted for various programming languages and frameworks.

Prerequisites

First off let’s create a new NextJS app using create-next-app and add the necessary dependencies:

pnpm create next-app --ts browserbase-codegen 

pnpm add -D shadcn-ui
pnpm add react-spinners

pnpm exec shadcn-ui init
pnpm exec shadcn-ui 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 file:

ANTHROPIC_API_KEY=
BROWSERBASE_API_KEY=

1. User Interface

First, we’ll design a friendly UI with our newly installed Shadcn 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