This is a modern web application that implements a chat interface for interacting with an AI sales assistant named Lex. The assistant helps customers with car dealership inquiries, providing information about weather, dealership locations, and appointment scheduling.
- Frontend Framework: Next.js 14 with App Router
- Language: TypeScript
- State Management: Redux Toolkit with RTK Query
- Styling: Tailwind CSS
- UI Components: Custom-built components with Tailwind
- API Integration: Server-Sent Events (SSE)
- Development: Docker and Docker Compose
- Code Quality: ESLint and Prettier
The test evaluates your ability to:
- Consume a Server-Sent Events (SSE) API
- Handle different types of streaming events
- Create custom UI components for different tool outputs
- Implement a responsive and user-friendly chat interface
- Work with Docker for development
The repository is organized into two main directories:
backend/: A FastAPI application that serves the AI agentfrontend/: Next.js application implementing the chat interface
frontend/
├── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # Reusable UI components
│ ├── store/ # Redux store configuration
│ ├── styles/ # Global styles and Tailwind
│ └── types/ # TypeScript type definitions
├── public/ # Static assets
└── Dockerfile # Frontend container configuration
This section outlines the original requirements and features that were expected to be implemented:
-
Chat Interface Requirements
- Real-time message streaming capability
- Chat history management
- Support for Markdown formatting
- Loading states and error handling
-
Tool Integration Requirements
- Weather information display
- Dealership address lookup
- Interactive appointment scheduling
- Visual feedback for tool usage
-
Design Requirements
- Mobile-first approach
- Adaptive layout
- Touch-friendly interface
This section details the actual implementations and enhancements made to the project:
-
Enhanced Chat Interface
- Implemented real-time message streaming using SSE
- Built persistent chat history with Redux Toolkit
- Added robust Markdown rendering with syntax highlighting
- Implemented comprehensive error handling with user-friendly notifications
- Added typing indicators and message status updates
-
Advanced Tool Integration
- Created modular tool components with TypeScript
- Implemented real-time weather information display with animations
- Built interactive dealership map integration
- Developed dynamic appointment scheduling system with availability checking
- Added loading and success states for tool interactions
-
Responsive Design Implementation
- Developed fully responsive layout using Tailwind CSS
- Implemented smooth transitions and animations
- Added touch gestures for mobile interactions
- Optimized UI for various screen sizes and orientations
-
Performance Optimizations
- Implemented efficient SSE connection management with automatic reconnection
- Optimized component re-renders using React.memo and useMemo
- Added code-splitting and lazy loading for better initial load time
- Implemented proper cleanup of SSE connections and event listeners
The backend provides a single endpoint:
POST /query: Accepts a user query and session ID, returns an SSE stream of responses
The backend streams different types of events:
chunk: Text chunks from the AI assistanttool_use: When the AI decides to use a tool (function call)tool_output: The result of a tool executionend: Signals the end of the response stream
The AI assistant can use the following tools:
get_weather: Provides weather information for a cityget_dealership_address: Returns the address of a dealershipcheck_appointment_availability: Checks available appointment slotsschedule_appointment: Books an appointment for a test drive
- Create a chat interface where users can send messages to the AI assistant
- Maintain a session ID for conversation history
- Display AI responses in real-time as they stream in
- Create custom UI components for each tool output:
- Weather information
- Dealership address
- Appointment availability (time slots)
- Appointment confirmation
- Show visual indicators when tools are being used
- Handle the complete conversation flow
- Use a modern JavaScript framework (Next, React, Vue, Angular, etc.)
- Implement an SSE client to consume the streaming API
- Create reusable components
- Implement responsive design
- Use Docker for development
- Write clean, maintainable code with appropriate comments
- First go to https://console.groq.com/playground and create an account.
- Then go to https://console.groq.com/keys and create a new key.
- Place the key in the
backend/.envfile. There is already a .env.example file that you can use as a template.
You have two options to run the backend:
cd backend
docker build -t SuperCar-assistant-backend .
docker run -p 8000:8000 SuperCar-assistant-backendcd infrastructure
docker-compose up backend- Create your frontend application in the
frontend/directory - Create a Dockerfile similar to the example provided
- Configure your application to connect to the backend API at
http://localhost:8000
Once your frontend is ready, you can run the entire stack:
cd infrastructure
docker-compose upYour solution will be evaluated based on:
- Functionality: Does it meet all the requirements?
- Code Quality: Is the code clean, well-organized, and maintainable?
- UI/UX Design: Is the interface intuitive and responsive?
- Component Design: Are the custom components for tool outputs well-designed?
- Error Handling: Does it gracefully handle errors and edge cases?
- Performance: Is the application responsive and efficient?
Please submit your solution as a Git repository with:
- Your complete frontend code
- A README explaining how to run your solution
- Any additional documentation you think is relevant
- Focus on creating a smooth, intuitive user experience
- Pay special attention to how you handle the different event types
- Create visually distinct components for different tool outputs
- Consider the user flow and how to make the conversation feel natural
- Test your solution thoroughly with different conversation scenarios
Good luck!