🚀 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:
Dream up a project idea
Watch as AI crafts a detailed project blueprint
Have a chat with the AI to refine the details
See complete files materialize like magic! ✨
🎯 The Core Concept
Here's the secret sauce:
🗣️ You describe your dream project
🤖 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)
💬 You chat with the AI to refine everything
⚡ DeepBuild transforms those ideas into real, working code!
Here's a peek at the prompts making the magic happen:
export const BRIEF_SYSTEM_PROMPT = `
You are DeepBuild, an elite software engineer...
...
Remember: Always wrap your response in <final_json> 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 <final_json> 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:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<FileProvider>{children}</FileProvider>
</body>
</html>
);
}
We're all in on Tailwind for styling, with dark mode support baked right into globals.css 🌙
2. 📊 Main Dashboard
The dashboard is your command center! Here's where you can:
export default function Dashboard() {
// Hooks, state, event handlers here...
// ...
return (
<div className="container py-8 px-12">
{/* Header + new project button */}
{/* List of projects as ProjectCard */}
{/* Settings dialog */}
</div>
);
}
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:
<div className="flex-1 flex">
<div className="w-64 border-r border-border bg-muted/30">
<FileTree
files={project.files}
selectedFile={selectedFile}
onFileSelect={setSelectedFile}
onFileRefresh={handleFileRefresh}
/>
</div>
<div className="flex-1 border-r border-border">
{selectedFile ? (
<Editor
file={selectedFile}
language={getLanguageFromPath(selectedFile.path)}
/>
) : (
<div className="h-full flex items-center justify-center text-muted-foreground">
Select a file to view or edit
</div>
)}
</div>
<div className="w-96 flex flex-col h-full">
<ProjectChat
// ...
/>
</div>
</div>
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:
class FileManager {
private db: IDBDatabase | null = null;
constructor() {
this.initDB();
}
async saveProject(name: string, brief: ProjectBrief): Promise<string> {
}
}
No server required - everything stays right in your browser! 🏠
5. 🤖 Prompts and AI Hooks
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 <final_json> tags to extract the structured data we need:
const response = await sendChatMessage(apiMessages);
const match = response.match(/<final_json>([^]*?)<\/final_json>/);
let parsedResponse = null;
if (match) {
parsedResponse = JSON.parse(match[1].trim());
} else {
parsedResponse = JSON.parse(response);
}
⚡ Example: Creating a New Project
Here's what happens when you hit that "New Project" button:
📝 You enter your Project Name and describe your vision
🤖 DeepBuild sends your description to the AI with our special BRIEF_SYSTEM_PROMPT:
const briefResponse = await sendMessage(
`Create a project brief for the following utility app: ${description}`,
'brief'
);
🎁 The AI returns structured JSON with everything we need
💾 We store it all in IndexedDB with a fresh projectId
💬 You can then chat with the AI to generate each file
Here's the code that kicks it all off:
const response = await sendMessage(
`Create a project brief for a ${description}. Include implementation details...`,
'brief'
);
const match = response.match(/<final_json>([^]*?)<\/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:
🎯 New AI prompts: Got ideas for framework-specific prompts?
🛠️ Error handling: Help us make the system more robust
💅 UI/UX improvements: Add new language support, better diffs, or other dev-friendly features
🔌 Plugins: Help us build a system for specialized generators (Docker, AWS, etc.)
🤝 How to Contribute
📦 Clone the repo and get those dependencies installed
🌱 Create your feature branch
✨ Make your magic happen
🚀 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:
💭 Dream up your project
🤖 Let AI craft the plan
🔨 Guide the process until your codebase is ready!
Got questions? Want to collaborate? Drop me a line! 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
