A Next.js frontend for an AI-powered coding assistant, inspired by tools like v0.dev and bolt.new. This repository contains the frontend implementation discussed in the tutorial "Building Your Own AI Coding Assistant".
This frontend application provides the user interface for interacting with an AI coding assistant that can:
- Generate code from natural language prompts
- Display real-time code generation
- Show file structure and component organization
- Preview deployed code in a sandboxed environment with E2B
The backend implementation, which handles the AI model and code generation, is covered in detail in the accompanying tutorial.
- 🎯 Clean, intuitive chat interface
- 📝 Real-time code streaming and display
- 🌳 File tree visualization
- 🔍 Realtime Code preview
- 🚀 Instant preview deployment with E2B
- 💾 Local storage for conversation history
- Next.js 14
- TypeScript
- Tailwind CSS
- shadcn/ui
- WebSocket for real-time communication
Before running this frontend, ensure you have:
- Node.js 18.0.0 or higher
- A running backend instance (see the tutorial for setup instructions)
- Environment variables configured
- Clone the repository:
git clone https://github.com/CerebriumAI/example-ai-coding-agent.git
cd exampe-ai-coding-agent- Install dependencies:
npm install
# or
yarn install- Configure environment variables:
Create a .env file:
CEREBRIUM_SOCKET_URL=your_backend_websocket_url
- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
This frontend is designed to work with the AI coding assistant backend described in the tutorial "Building Your Own AI Coding Assistant". The tutorial covers:
- Setting up a FastAPI backend with WebSocket support
- Implementing an AI model for code generation
- Deploying code to a sandboxed environment
- Real-time communication between frontend and backend
To set up the complete system, follow the tutorial to implement the backend before connecting it to this frontend.