# Building DeepBuild # 🚀 DeepBuild: Where AI Meets Code Magic! Hey there, code enthusiasts! Martin Bowling here! 👋 Today I'm pulling back the curtain on **DeepBuild**, our AI-powered software wizard. Get ready for a fun journey through the codebase where I'll show you how everything ticks, why we made certain choices, and how you can join the party with your own contributions! --- ## 🤔 What Is DeepBuild? Think of DeepBuild as your AI-powered coding companion that can spawn entire software projects from scratch! We've mixed together some awesome ingredients: * ⚛️ **Next.js** (powering our slick front end and serverless API routes) * 📝 **TypeScript** (because who doesn't love type safety?) * 🎨 **Tailwind CSS** (for that pixel-perfect styling) * 🪝 **Custom React hooks** and context providers (keeping our state game strong) * 💾 **IndexedDB** (via a custom file manager) to store and manage project data in your browser When you put it all together, users can: 1. Dream up a project idea 2. Watch as AI crafts a detailed project blueprint 3. Have a chat with the AI to refine the details 4. See complete files materialize like magic! ✨ --- ## 🎯 The Core Concept Here's the secret sauce: 1. 🗣️ **You** describe your dream project 2. 🤖 **The AI** cooks up some JSON containing: * 📋 A **Project Brief** (the grand plan) * ❓ **Clarifying questions** (getting those details just right) * 📁 A **file structure** (the blueprint) 3. 💬 **You** chat with the AI to refine everything 4. ⚡ **DeepBuild** transforms those ideas into real, working code! Here's a peek at the prompts making the magic happen: ```ts export const BRIEF_SYSTEM_PROMPT = ` You are DeepBuild, an elite software engineer... ... Remember: Always wrap your response in tags and ensure it's valid JSON. `; export const IMPLEMENTATION_SYSTEM_PROMPT = ` You are DeepBuild, an elite software engineer... ... Remember: Always wrap your response in tags and ensure it's valid JSON. `; ``` --- ## 🏗️ A Tour of the Code ### 1\. 🎨 Root Layout & Global Styles * **File:** `app/layout.tsx` * **File:** `app/globals.css` Our `layout.tsx` is where the magic begins! It sets up the main HTML structure and brings in our `FileProvider` context: ```tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` We're all in on **Tailwind** for styling, with dark mode support baked right into `globals.css` 🌙 ### 2\. 📊 Main Dashboard * **File:** `app/page.tsx` The dashboard is your command center! Here's where you can: * 🆕 Create shiny new projects * 🗑️ Clean up old ones * 📦 Export as `.zip` files * ⚙️ Tweak your AI settings ```tsx export default function Dashboard() { // Hooks, state, event handlers here... // ... return (

{/* Header + new project button */} {/* List of projects as ProjectCard */} {/* Settings dialog */}

); } ``` ### 3\. 🧩 Components Galore Our `components/` folder is where all the real action happens! Here's what we're working with: * 🎴 `ProjectCard.tsx`: Shows off each project with its current status * 🆕 `NewProjectModal.tsx`: A sleek dialog for birthing new projects * 🖼️ `ProjectView.tsx`: The main stage where all the magic happens * ✏️ `Editor.tsx`: Powered by `@monaco-editor/react` for that pro-level coding experience Check out how we tie everything together in `ProjectView.tsx`: ```tsx

{selectedFile ? ( ) : (

Select a file to view or edit

)}

``` ### 4\. 💾 IndexedDB 'FileManager' * **File:** `lib/fileOperations.ts` We're keeping it local with IndexedDB for data storage! Our `FileManager` class handles all the heavy lifting: ```ts class FileManager { private db: IDBDatabase | null = null; constructor() { this.initDB(); } async saveProject(name: string, brief: ProjectBrief): Promise { // Creates a new project + files in IndexedDB } // ... } ``` No server required - everything stays right in your browser! 🏠 ### 5\. 🤖 Prompts and AI Hooks * **File:** `hooks/useChat.ts` The AI communication happens through `sendChatMessage()` in `lib/api.ts`. We can talk to either the **DeepSeek** or **Hyperbolic** model, depending on your preferences. We scan responses for those special `` tags to extract the structured data we need: ```ts const response = await sendChatMessage(apiMessages); const match = response.match(/([^]*?)<\/final_json>/); let parsedResponse = null; if (match) { parsedResponse = JSON.parse(match[1].trim()); } else { parsedResponse = JSON.parse(response); // fallback } ``` --- ## ⚡ Example: Creating a New Project Here's what happens when you hit that "New Project" button: 1. 📝 **You** enter your **Project Name** and describe your vision 2. 🤖 **DeepBuild** sends your description to the AI with our special `BRIEF_SYSTEM_PROMPT`: ```ts const briefResponse = await sendMessage( `Create a project brief for the following utility app: ${description}`, 'brief' ); ``` 3. 🎁 The AI returns structured JSON with everything we need 4. 💾 We store it all in IndexedDB with a fresh `projectId` 5. 💬 You can then chat with the AI to generate each file Here's the code that kicks it all off: ```tsx const response = await sendMessage( `Create a project brief for a ${description}. Include implementation details...`, 'brief' ); const match = response.match(/([^]*?)<\/final_json>/); // ... const parsedResponse = JSON.parse(match[1].trim()); // Then we create the project in IndexedDB via fileManager.saveProject ``` --- ## 🌟 Contributing to DeepBuild Ready to help make DeepBuild even more awesome? Here are some cool ways to contribute: 1. 🎯 **New AI prompts**: Got ideas for framework-specific prompts? 2. 🛠️ **Error handling**: Help us make the system more robust 3. 💅 **UI/UX improvements**: Add new language support, better diffs, or other dev-friendly features 4. 🔌 **Plugins**: Help us build a system for specialized generators (Docker, AWS, etc.) ## 🤝 How to Contribute 1. 📦 **Clone** the repo and get those dependencies installed 2. 🌱 **Create** your feature branch 3. ✨ **Make** your magic happen 4. 🚀 **Open** a pull request and let our CI pipeline do its thing! We're on a mission to make software generation not just possible, but absolutely delightful! Join us in building the future of AI-assisted development. ## 🎬 Wrapping Up And there you have it, friends! That's the inside scoop on how **DeepBuild** works its magic. Remember: 1. 💭 Dream up your project 2. 🤖 Let AI craft the plan 3. 🔨 Guide the process until your codebase is ready! Got questions? Want to collaborate? [Drop me a line](mailto:martin@martinbowling.com)! And don't forget to smash that ⭐ button if you're thinking about contributing! Thanks for joining me on this code adventure! Now go forth and build something awesome! **🚀 Martin Bowling** ## 🔗 Quick Links * 🚀 **Try DeepBuild**: * Template: [DeepBuild on Replit](https://replit.com/@MartinBowling/deepbuild?v=1) * Hosted Version: [deepbuild.app](http://deepbuild.app) * 💻 **Source Code**: [GitHub Repository](https://github.com/martinbowling/deepbuild) * 🤖 **Powered By**: * [DeepSeek AI](https://deepseek.ai) - State-of-the-art code generation * [Hyperbolic Labs](https://hyperbolic.io) - Decentralized inference * [Replit](https://replit.com) - Development platform and hosting %[https://replit.com/@MartinBowling/deepbuild]