Technical Assignment: Build a Chatbot for HTML & CSS Generation
*Objective Develop a chatbot application that generates well-structured HTML and CSS code within a single file and provides a live preview. The core use case is to facilitate rapid MVP creation for landing pages.
*Tech Stack Requirements Candidates must use the following technologies: Framework: Next.js Language: TypeScript UI Components: Tailwind CSS, ShadcnUI Authentication: NextAuth.js Database: PostgreSQL (Supabase or NeonDB) with Prisma or Drizzle GenAI API Provider: Any of the candidate’s choice with Vercel’s AI SDK Hosting: Vercel
*Functional Requirements Authentication System Implement a login and signup page using NextAuth.js. Support authentication via email/password or social logins (optional). Chat Interface Create a chat page where users can input prompts. Integrate a chatbot powered by a GenAI API. HTML & CSS Code Generation The chatbot should generate complete HTML and CSS code in response to user prompts. Display a live preview of the generated code within the chat interface. Provide the option to download the generated HTML file (optional) . System Prompt Optimization Fine-tune the chatbot to optimize outputs for landing page generation.
*Bonus Points: Landing Page Optimization: Incorporate features that enhance chatbot responses specifically for landing page creation (e.g., predefined templates or structure suggestions). System Prompt Optimization: Implement strategies to optimize the system prompts for better code generation quality and user satisfaction.
*Non-Functional Requirements Follow best practices for TypeScript. Maintain responsive and user-friendly UI/UX. Ensure secure and scalable authentication using NextAuth.js.
*Evaluation Criteria Code quality, readability, and structure. UI/UX design and responsiveness. Proper use of the specified tech stack. Creativity and quality of the chatbot's responses. Successful rendering of generated HTML and CSS in the live preview.
Building a Chatbot for HTML & CSS Generation
I'll create a comprehensive solution for generating HTML and CSS code with a live preview using Next.js, TypeScript, and the Vercel AI SDK. This application will help users rapidly create landing page MVPs through a chat interface.
Project Overview
Let's build a full-stack application with:
- Authentication using NextAuth.js and Supabase
- Chat interface with AI-powered code generation
- Live preview of generated HTML/CSS code
- Database storage for chat history and user data
Key Features
1. Authentication System
- Complete login and signup flows using NextAuth.js with Supabase
- Secure JWT-based authentication
- Protected routes for authenticated users
2. Chat Interface
- Real-time chat with AI using the Vercel AI SDK 12
- Message history persistence in Supabase database
- Optimized system prompts for HTML/CSS generation
3. Code Generation & Preview
- AI-powered HTML and CSS generation for landing pages
- Live preview of generated code in an iframe
- Code copying and downloading functionality
- Tab interface to switch between preview and code views
4. Database Integration
- Supabase PostgreSQL database for user profiles and chat history
- Schema for storing user data and message history
- API endpoints for saving and retrieving chat data
Technical Implementation Details
AI Integration
The application uses the Vercel AI SDK with OpenAI to generate HTML and CSS code. The system prompt is specifically optimized for landing page creation, instructing the model to:
- Generate complete, self-contained HTML with inline CSS
- Create responsive and modern designs
- Follow accessibility best practices
- Include relevant placeholder content
- Structure the code for easy understanding with comments
const result = streamText({
model: openai('gpt-4o'),
system: `You are an expert web developer specializing in creating landing pages...`,
messages,
});The AI SDK handles streaming the response back to the client, providing a real-time experience as the code is generated 1.
Database Schema
The application uses a simple but effective database schema:
- profiles - Stores user information linked to Supabase Auth
- chat_history - Stores chat messages for each user
This structure allows for efficient retrieval of chat history and user data.
How to Use
- Sign up or log in to access the chat interface
- Describe the landing page you want to create (e.g., "Create a landing page for a fitness app with a hero section, features, and pricing")
- View the generated code and preview in real-time
- Download or copy the HTML file for use in your projects
Deployment Instructions
Set up environment variables:
NEXTAUTH_SECRET=your_secret_key NEXTAUTH_URL=your_deployment_url NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key OPENAI_API_KEY=your_openai_api_key- Run the database setup script to create the necessary tables in Supabase
Deploy to Vercel with the following command:
vercel
This application demonstrates a complete implementation of the technical assignment, showcasing the integration of Next.js, TypeScript, Tailwind CSS, ShadcnUI, NextAuth.js, Supabase, and the Vercel AI SDK to create a powerful HTML and CSS generation tool.
To configure the generation, complete these steps:
The code returns the following error:
The "next-auth" module does not provide an export named "getServerSession".
Revise the code to address the error.
I was previewing: /
I'll fix the NextAuth.js import error and update the authentication implementation to work with the current version of NextAuth.js.
Key Changes Made
- Fixed NextAuth.js imports: Changed from
next-authtonext-auth/nextforgetServerSession - Simplified Supabase integration: Removed the server-side Supabase client wrapper and used direct client creation
- Added NextAuth API route: Created the required
[...nextauth]/route.tsfile for App Router - Added TypeScript declarations: Created type definitions for NextAuth to ensure proper typing
- Updated environment variables: Now uses
SUPABASE_SERVICE_ROLE_KEYfor server-side operations
Required Environment Variables
Make sure you have these environment variables set:
NEXTAUTH_SECRET=your_secret_key
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
OPENAI_API_KEY=your_openai_api_keyThe main fix was updating the NextAuth.js import to use next-auth/next instead of just next-auth for the getServerSession function, and simplifying the Supabase integration to work more reliably across different environments.
For http://localhost:3000/api/chat API, I typed Create a modern hero page for a Healthcare website. The request status was 200, but its response was 3:"An error occurred."