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.
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:
You should add these values as variables in your .env file:
ANTHROPIC_API_KEY=
BROWSERBASE_API_KEY=
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: