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.
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.
Let's build a full-stack application with:
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:
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.
The application uses a simple but effective database schema:
This structure allows for efficient retrieval of chat history and user data.
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_keyDeploy to Vercel with the following command:
vercelThis 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.
next-auth to next-auth/next for getServerSession[...nextauth]/route.ts file for App RouterSUPABASE_SERVICE_ROLE_KEY for server-side operationsMake 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."