UI Builder Cookbook
This cookbook demonstrates how to use Benchify to fix issues in LLM-generated UI code. We’ll build a UI component generator powered by OpenAI, and use Benchify to automatically repair any issues in the generated code, then preview the results using E2B sandboxes. If you prefer to work with the complete implementation rather than building from scratch, you can find the full source code in the UI Builder Cookbook repository on GitHub.Setup
For this cookbook, we’ll need:- A Next.js 15 application with Tailwind CSS v4 and shadcn/ui
- OpenAI API for generating UI components
- E2B SDK for sandboxed code execution
- Benchify API for code repair
.env.local
file:
Schema Definitions
Let’s define our schemas for API requests and responses:OpenAI Integration
Next, let’s implement the OpenAI client for generating UI components:Benchify Integration
Now, let’s set up the Benchify client to repair our generated code:Creating an E2B Template
Before we can use E2B for sandboxed previews, we need to create a custom template that supports Vite, React, and Tailwind CSS v4. E2B templates are Docker containers configured for specific development environments.1. Create the Dockerfile
First, create a directory structure for our template:e2b.Dockerfile
in the templates/vite-support
directory:
- Uses Node.js 21 as the base image
- Sets up a Vite project with React and TypeScript
- Configures Tailwind CSS v4 with the necessary plugins
- Exposes port 5173 for Vite’s development server
- Makes the
/app
directory writable so we can add files at runtime
2. Build and Push the Template
Once you’ve created the Dockerfile, use the E2B CLI to build and push your template:3. Verify the Template
To verify that your template was successfully pushed and is available:lib/e2b.ts
file.
E2B Integration for Sandbox Previews
Let’s implement the E2B integration for sandboxed previews:API Route for Generation
Now, let’s implement the API route to handle component generation:Frontend Components
Let’s implement the UI components for our application: First, the main page:Common Issues Fixed by Benchify
The Benchify Fixer API excels at fixing common issues in LLM-generated UI components:- Missing Imports: Automatically adds required imports that were omitted by the LLM, such as React hooks or shadcn/ui components.
- TypeScript Errors: Resolves type mismatches, missing type annotations, and incorrect interface implementations.
- Syntax Fixes: Corrects JavaScript and TypeScript syntax errors, including missing brackets, parentheses, and semicolons.
- React-Specific Issues: Fixes common React problems like invalid JSX, improper hook usage, and component structure issues.
- Tailwind Syntax: Updates outdated Tailwind class naming conventions to match the latest Tailwind v4 syntax.
Direct Pipeline from LLM to Benchify
Our implementation demonstrates a streamlined approach for connecting LLM-generated code directly to Benchify for repair:- Generation: Use OpenAI to generate UI components based on user descriptions
- Validation: Use Zod schemas to validate the structure of generated code
- Repair: Send the validated code directly to Benchify’s API for automatic repair
- Preview: Deploy the repaired code to an E2B sandbox for live preview
- Simplicity: The direct pipeline reduces complexity and maintenance overhead
- Type Safety: Using Zod schemas ensures type safety throughout the process
- Reliability: Benchify automatically handles common issues, improving the success rate of generated components
- Immediate Feedback: Users can see both the repaired code and a live preview in seconds
Conclusion
This cookbook demonstrates how to build a powerful UI component generator by integrating:- AI Generation: OpenAI for creating initial UI components based on user descriptions
- Automatic Repair: Benchify for fixing common issues in LLM-generated code
- Live Preview: E2B for providing sandboxed previews of the repaired components