18 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies (bun install)
2 | node_modules
3 |
4 | # output
5 | out
6 | dist
7 | *.tgz
8 |
9 | # code coverage
10 | coverage
11 | *.lcov
12 |
13 | # logs
14 | logs
15 | _.log
16 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
17 |
18 | # dotenv environment variable files
19 | .env
20 | .env.development.local
21 | .env.test.local
22 | .env.production.local
23 | .env.local
24 |
25 | # caches
26 | .eslintcache
27 | .cache
28 | *.tsbuildinfo
29 |
30 | # IntelliJ based IDEs
31 | .idea
32 |
33 | # Finder (MacOS) folder config
34 | .DS_Store
35 |
36 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
37 |
38 | # dependencies
39 | /node_modules
40 | /.pnp
41 | .pnp.*
42 | .yarn/*
43 | !.yarn/patches
44 | !.yarn/plugins
45 | !.yarn/releases
46 | !.yarn/versions
47 |
48 | # testing
49 | /coverage
50 |
51 | # next.js
52 | /.next/
53 | /out/
54 | .next
55 |
56 | # production
57 | /build
58 |
59 | # misc
60 | .DS_Store
61 | *.pem
62 |
63 | # debug
64 | npm-debug.log*
65 | yarn-debug.log*
66 | yarn-error.log*
67 | .pnpm-debug.log*
68 |
69 | # env files (can opt-in for committing if needed)
70 | .env*
71 |
72 | # vercel
73 | .vercel
74 |
75 | # typescript
76 | *.tsbuildinfo
77 | next-env.d.ts
78 |
--------------------------------------------------------------------------------
/frontend/src/app/editor/IDE.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Editor from "@monaco-editor/react";
4 |
5 | export default function IDE() {
6 | const handleSubmit = async () => {};
7 |
8 | return (
9 |
19 |
30 |
31 |
20 | {messages.map((message) => (
21 |
29 |
10 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/frontend/src/app/editor/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from "react";
2 | import { AiFillFileText } from "react-icons/ai";
3 | import { FcFile, FcFolder, FcOpenedFolder, FcPicture } from "react-icons/fc";
4 | import {
5 | SiCss3,
6 | SiHtml5,
7 | SiJavascript,
8 | SiJson,
9 | SiTypescript,
10 | } from "react-icons/si";
11 |
12 | function getIconHelper() {
13 | const cache = new Map
11 |
34 |
35 |
27 |
39 |
28 |
37 |
29 |
36 | 30 | Your Projects 31 |
32 |33 | Manage and access your December projects. 34 |
35 |
4 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 |
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 |
23 | ## Learn More
24 |
25 | To learn more about Next.js, take a look at the following resources:
26 |
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 |
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 |
32 | ## Deploy on Vercel
33 |
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 |
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 |
--------------------------------------------------------------------------------
/backend/src/services/export.ts:
--------------------------------------------------------------------------------
1 | import { exec } from "child_process";
2 | import fs from "fs/promises";
3 | import path from "path";
4 | import { promisify } from "util";
5 |
6 | const execAsync = promisify(exec);
7 |
8 | export async function exportContainerCode(
9 | containerId: string
10 | ): Promise
5 |
33 |
6 |
32 |
7 |
18 |
19 | 20 | Crypto Dashboard 21 |
22 |23 | Your crypto trading interface will be rendered here 24 |
25 |
26 |
31 | • Real-time market data
27 |• Interactive trading charts
28 |• Portfolio management
29 |• Price alerts & notifications
30 |
17 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/frontend/src/app/projects/components/ProjectsLayout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { ReactNode } from "react";
5 |
6 | interface ProjectsLayoutProps {
7 | children: ReactNode;
8 | }
9 |
10 | export const ProjectsLayout = ({ children }: ProjectsLayoutProps) => {
11 | return (
12 |
13 |
14 |
23 |
24 |
25 |
26 |
75 | );
76 | };
77 |
--------------------------------------------------------------------------------
/frontend/src/app/editor/utils/FileManager.tsx:
--------------------------------------------------------------------------------
1 | export enum Type {
2 | FILE,
3 | DIRECTORY,
4 | DUMMY,
5 | }
6 |
7 | interface CommonProps {
8 | id: string;
9 | type: Type;
10 | name: string;
11 | parentId: string | undefined;
12 | depth: number;
13 | }
14 |
15 | export interface File extends CommonProps {
16 | content: string;
17 | path?: string;
18 | }
19 |
20 | export interface Directory extends CommonProps {
21 | files: File[];
22 | dirs: Directory[];
23 | }
24 |
25 | export function buildFileTree(data: any): Directory {
26 | const dirs = [...data.directories];
27 | const files = [...data.modules];
28 | const cache = new Map
27 |
52 |
53 |
74 | {children}
54 |
55 |
73 |
58 |
65 | );
66 | }
67 |
68 | let language = selectedFile.name.split(".").pop();
69 |
70 | if (language === "js" || language === "jsx") language = "javascript";
71 | else if (language === "ts" || language === "tsx") language = "typescript";
72 |
73 | return (
74 |
59 |
64 | No file selected
60 |
61 | Select a file from the sidebar to start editing
62 |
63 |
75 |
102 | );
103 | };
104 |
--------------------------------------------------------------------------------
/frontend/src/app/projects/components/CreateProjectCard.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Plus } from "lucide-react";
4 | import { useState } from "react";
5 | import { createContainer } from "../../../lib/backend/api";
6 |
7 | interface CreateProjectCardProps {
8 | onProjectCreated: () => void;
9 | }
10 |
11 | export const CreateProjectCard = ({
12 | onProjectCreated,
13 | }: CreateProjectCardProps) => {
14 | const [isCreating, setIsCreating] = useState(false);
15 |
16 | const handleCreateProject = async () => {
17 | setIsCreating(true);
18 | try {
19 | await createContainer();
20 | onProjectCreated();
21 | } catch (error) {
22 | console.error("Failed to create project:", error);
23 | } finally {
24 | setIsCreating(false);
25 | }
26 | };
27 |
28 | return (
29 |
33 |
34 |
35 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/frontend/src/app/editor/components/FileTree.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Directory, File, sortDir, sortFile } from "../utils/FileManager";
3 | import { getIcon } from "./Icon";
4 |
5 | interface FileTreeProps {
6 | rootDir: Directory;
7 | selectedFile: File | undefined;
8 | onSelect: (file: File) => void;
9 | }
10 |
11 | export const FileTree = (props: FileTreeProps) => {
12 | return
36 | {isCreating ? (
37 |
77 |
38 |
54 | ) : (
55 |
39 |
44 |
40 |
41 |
42 |
43 |
45 |
46 | Creating project... (the first time will take a bit longer due
47 | to container setup)
48 |
49 |
50 | Setting up your container
51 |
52 |
53 |
56 |
75 | )}
76 |
57 |
62 |
58 |
60 |
61 |
63 |
64 | Create New Project
65 |
66 |
67 | Start a new Next.js application
68 |
69 | 70 | with Docker containerization 71 | 72 | 73 |
74 | 69 | 70 | with Docker containerization 71 | 72 | 73 |
24 | {props.directory.dirs.sort(sortDir).map((dir) => (
25 |
26 |
32 | ))}
33 | {props.directory.files.sort(sortFile).map((file) => (
34 |
35 | props.onSelect(file)}
39 | />
40 |
41 | ))}
42 |
43 | );
44 | };
45 |
46 | const FileDiv = ({
47 | file,
48 | icon,
49 | selectedFile,
50 | onClick,
51 | }: {
52 | file: File | Directory;
53 | icon?: string;
54 | selectedFile: File | undefined;
55 | onClick: () => void;
56 | }) => {
57 | const isSelected = (selectedFile && selectedFile.id === file.id) as boolean;
58 | const depth = file.depth;
59 |
60 | return (
61 |
68 |
71 | );
72 | };
73 |
74 | const DirDiv = ({
75 | directory,
76 | selectedFile,
77 | onSelect,
78 | }: {
79 | directory: Directory;
80 | selectedFile: File | undefined;
81 | onSelect: (file: File) => void;
82 | }) => {
83 | let defaultOpen = false;
84 | if (selectedFile) defaultOpen = isChildSelected(directory, selectedFile);
85 | const [open, setOpen] = useState(defaultOpen);
86 |
87 | return (
88 | <>
89 |
62 |
109 | );
110 | };
111 |
--------------------------------------------------------------------------------
/frontend/src/app/editor/components/Code.tsx:
--------------------------------------------------------------------------------
1 | import Editor from "@monaco-editor/react";
2 | import { File } from "../utils/FileManager";
3 |
4 | interface CodeProps {
5 | selectedFile: File | undefined;
6 | onChange: (value: string | undefined) => void;
7 | }
8 |
9 | export const Code = ({ selectedFile, onChange }: CodeProps) => {
10 | const handleEditorDidMount = (editor: any, monaco: any) => {
11 | monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
12 | noSemanticValidation: true,
13 | noSyntaxValidation: true,
14 | noSuggestionDiagnostics: true,
15 | });
16 |
17 | monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
18 | noSemanticValidation: true,
19 | noSyntaxValidation: true,
20 | noSuggestionDiagnostics: true,
21 | });
22 |
23 | monaco.languages.html.htmlDefaults.setOptions({
24 | validate: false,
25 | });
26 |
27 | monaco.languages.css.cssDefaults.setOptions({
28 | validate: false,
29 | });
30 |
31 | monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
32 | validate: false,
33 | });
34 |
35 | monaco.editor.defineTheme("no-errors", {
36 | base: "vs-dark",
37 | inherit: true,
38 | rules: [],
39 | colors: {
40 | "editorError.foreground": "#00000000",
41 | "editorError.background": "#00000000",
42 | "editorWarning.foreground": "#00000000",
43 | "editorWarning.background": "#00000000",
44 | "editorInfo.foreground": "#00000000",
45 | "editorInfo.background": "#00000000",
46 | "editorSquiggles.error": "#00000000",
47 | "editorSquiggles.warning": "#00000000",
48 | "editorSquiggles.info": "#00000000",
49 | },
50 | });
51 |
52 | monaco.editor.setTheme("no-errors");
53 | };
54 |
55 | if (!selectedFile) {
56 | return (
57 |
63 |
70 |
71 |
64 |
69 | Templates
65 |66 | Get started instantly with popular frameworks and tools. 67 |
68 |
72 | {templates.map((template) => (
73 |
106 | ))}
107 |
108 |
58 |
65 | );
66 | }
67 |
68 | let language = selectedFile.name.split(".").pop();
69 |
70 | if (language === "js" || language === "jsx") language = "javascript";
71 | else if (language === "ts" || language === "tsx") language = "typescript";
72 |
73 | return (
74 |
59 |
64 | No file selected
60 |
61 | Select a file from the sidebar to start editing
62 |
63 |
75 |
114 | );
115 | };
116 |
--------------------------------------------------------------------------------
/frontend/src/app/create/components/CreateDashboard.tsx:
--------------------------------------------------------------------------------
1 | //@ts-nocheck
2 | "use client";
3 |
4 | import { useEffect, useRef, useState } from "react";
5 | import { ChatSidebar } from "./ChatSidebar";
6 | import { CryptoPlaceholder } from "./CryptoPlaceholder";
7 | import { TopNavigation } from "./TopNavigation";
8 |
9 | export const CreateDashboard = () => {
10 | const [messages, setMessages] = useState([
11 | {
12 | id: 1,
13 | type: "user",
14 | content: "what is this project about?",
15 | timestamp: "15:20 on May 26, 2025",
16 | },
17 | {
18 | id: 2,
19 | type: "bot",
20 | content: `This is a **Crypto Dashboard** web application that provides a comprehensive view of cryptocurrency market data and portfolio tracking. Here's what the project includes:
21 |
22 | ## Main Features:
23 | 1. **Market Statistics** - Displays key crypto market metrics and data
24 | 2. **Interactive Charts** - Features a TradingView widget showing Bitcoin price charts with professional trading tools
25 | 3. **Portfolio Performance** - Shows Bitcoin performance over the last 6 months using a custom line chart built with Recharts
26 | 4. **Cryptocurrency List** - Displays a list of various cryptocurrencies with their current data
27 |
28 | ## Technical Stack:
29 | - **React** with TypeScript for the frontend
30 | - **Tailwind CSS** for styling with a dark theme
31 | - **Shadcn/UI** components for consistent UI elements
32 | - **TanStack Query** for data fetching and caching
33 | - **Recharts** for custom chart visualizations
34 | - **TradingView Widget** for professional trading charts
35 | - **CoinGecko API** for real-time cryptocurrency data
36 |
37 | ## Design:
38 | The dashboard features a modern dark theme with a glassmorphism design (glass-card styling), purple accent colors, and smooth animations. The layout is responsive and organized in a grid system that adapts to different screen sizes.
39 |
40 | The app fetches live Bitcoin price data and displays it in multiple formats - both as a professional trading chart and as a simplified performance chart showing the 6-month trend.`,
41 | timestamp: "15:20 on May 26, 2025",
42 | },
43 | ]);
44 |
45 | const [inputValue, setInputValue] = useState("");
46 | const [sidebarOpen, setSidebarOpen] = useState(true);
47 | const messagesEndRef = useRef(null);
48 | const textareaRef = useRef(null);
49 |
50 | const scrollToBottom = () => {
51 | messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
52 | };
53 |
54 | useEffect(() => {
55 | scrollToBottom();
56 | }, [messages]);
57 |
58 | const handleSendMessage = () => {
59 | if (!inputValue.trim()) return;
60 |
61 | const newMessage = {
62 | id: messages.length + 1,
63 | type: "user",
64 | content: inputValue,
65 | timestamp: new Date().toLocaleString(),
66 | };
67 |
68 | setMessages((prev) => [...prev, newMessage]);
69 | setInputValue("");
70 |
71 | setTimeout(() => {
72 | const botResponse = {
73 | id: messages.length + 2,
74 | type: "bot",
75 | content:
76 | "This is a mock response. In a real application, this would connect to your backend API or AI service.",
77 | timestamp: new Date().toLocaleString(),
78 | };
79 | setMessages((prev) => [...prev, botResponse]);
80 | }, 1000);
81 | };
82 |
83 | const handleTextareaKeyDown = (e) => {
84 | if (e.key === "Enter" && !e.shiftKey) {
85 | e.preventDefault();
86 | handleSendMessage();
87 | }
88 | };
89 |
90 | const formatMessageContent = (content) => {
91 | return content.split("\n").map((line, index) => {
92 | if (line.startsWith("## ")) {
93 | return (
94 |
76 |
113 |
77 |
112 | 95 | {line.substring(3)} 96 |
97 | ); 98 | } 99 | if (line.startsWith("# ")) { 100 | return ( 101 |102 | {line.substring(2)} 103 |
104 | ); 105 | } 106 | if (line.startsWith("- ")) { 107 | return ( 108 |125 | {parts.map((part, i) => 126 | i % 2 === 1 ? {part} : part 127 | )} 128 |
129 | ); 130 | } 131 | return line ? ( 132 |133 | {line} 134 |
135 | ) : ( 136 |137 | ); 138 | }); 139 | }; 140 | 141 | return ( 142 |
143 |
167 | );
168 | };
169 |
170 | export default CreateDashboard;
171 |
--------------------------------------------------------------------------------
/frontend/src/app/projects/components/TopNavigation.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | ChevronLeft,
5 | Code2,
6 | ExternalLink,
7 | Eye,
8 | Globe,
9 | Menu,
10 | Monitor,
11 | RefreshCw,
12 | Smartphone,
13 | } from "lucide-react";
14 | import { useEffect, useState } from "react";
15 |
16 | interface TopNavigationProps {
17 | sidebarOpen: boolean;
18 | setSidebarOpen: (open: boolean) => void;
19 | viewMode?: "preview" | "editor";
20 | setViewMode?: (mode: "preview" | "editor") => void;
21 | isDesktopView?: boolean;
22 | setIsDesktopView?: (isDesktop: boolean) => void;
23 | containerId?: string;
24 | }
25 |
26 | export const TopNavigation = ({
27 | sidebarOpen,
28 | setSidebarOpen,
29 | viewMode,
30 | setViewMode,
31 | isDesktopView = true,
32 | setIsDesktopView,
33 | containerId,
34 | }: TopNavigationProps) => {
35 | const [containerUrl, setContainerUrl] = useState
144 |
166 |
150 | {sidebarOpen && (
151 |
165 |
77 |
173 | );
174 | };
175 |
--------------------------------------------------------------------------------
/frontend/src/lib/backend/api.ts:
--------------------------------------------------------------------------------
1 | const API_BASE_URL = "http://localhost:4000";
2 |
3 | export interface Container {
4 | id: string;
5 | name: string;
6 | status: string;
7 | image: string;
8 | created: string;
9 | assignedPort: number | null;
10 | url: string | null;
11 | ports: Array<{
12 | private: number;
13 | public: number;
14 | type: string;
15 | }>;
16 | labels: Record
78 |
172 |
79 |
91 |
92 |
93 |
97 |
171 |
98 |
105 |
112 |
113 |
114 |
115 | {setIsDesktopView && (
116 |
126 | )}
127 |
128 | {viewMode && setViewMode && (
129 |
163 |
164 |
130 |
137 |
138 |
149 |
160 |
161 | )}
162 |
165 |
169 |
170 |
50 |
51 |
52 |
53 |
54 |
164 | );
165 | };
166 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
55 |
86 |
87 |
163 |
88 |
143 |
144 |
162 |
89 |
142 |
90 |
98 |
99 | 91 | Community Projects 92 |
93 |94 | Discover amazing projects built by the December community. Get 95 | inspired, fork, and build upon the work of others. 96 |
97 |
100 |
141 | 101 | Featured Projects 102 |
103 |
104 | {featuredProjects.map((project) => (
105 |
140 | handleProjectSelect(project)}
109 | >
110 |
138 | ))}
139 |
111 |
112 |
116 |
117 |
120 |
126 |
127 |
121 |
125 |
122 | {project.icon}
123 |
124 |
128 |
137 |
129 |
133 | 130 | {project.name} 131 |
132 |134 | {project.description} 135 |
136 |
4 |
5 |
22 |
23 | Say hi to December ☃️
6 | 7 |
8 | December is an open-source alternative to AI-powered development platforms like Loveable, Replit, and Bolt that you can run locally with your own API keys, ensuring complete privacy and significant cost savings.
9 |
10 |
11 | December lets you build full-stack applications from simple text prompts using AI.
12 |
13 |
14 | Get started
15 | ·
16 | Report Bug
17 | ·
18 | Request Feature
19 |
20 |
24 |
25 |
26 | ## Features
27 |
28 | ✅ AI-powered project creation from natural language prompts
29 | ✅ Containerized Next.js applications with Docker
30 | ✅ Live preview with mobile and desktop views
31 | ✅ Full-featured Monaco code editor with file management
32 | ✅ Real-time chat assistant for development help
33 | ✅ Project export and deployment capabilities
34 |
35 | ## Roadmap
36 |
37 | 🔄 LLM streaming support
38 | 🔄 Document & image attachments
39 | 🔄 Improved fault tolerance
40 | 🔄 Comprehensive test coverage
41 | 🔄 Multi-framework support (beyond Next.js)
42 |
43 | ## Get started
44 |
45 | 1. Clone the repo
46 |
47 | ```sh
48 | git clone https://github.com/ntegrals/december
49 | ```
50 |
51 | 2. Get an API Key from any OpenAI sdk compatible provider (e.g. OpenAI, Claude, Ollama, OpenRouter, etc.) and set it in the `config.ts` file.
52 |
53 | The start.sh script will automatically copy over the file into the backend folder.
54 |
55 | I highly recommend using Sonnet-4 from Anthropic as it is the best coding model available right now.
56 |
57 | ```sh
58 | baseUrl: "https://openrouter.ai/api/v1",
59 |
60 | apiKey:
61 | "sk-...",
62 |
63 | model: "anthropic/claude-sonnet-4",
64 | temperature: 0.7,
65 | ```
66 |
67 | 3. Install docker (Docker Desktop is the easiest way to get started)
68 |
69 | - [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop/)
70 | - [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop/)
71 | - [Docker Engine for Linux](https://docs.docker.com/engine/install/)
72 |
73 | Make sure you have Docker running and the Docker CLI installed before proceeding.
74 |
75 | 4. Run the start script to set up the environment
76 |
77 | ```sh
78 | sh start.sh
79 | ```
80 |
81 | 5. The application will start in development mode, and you can access it at [http://localhost:3000](http://localhost:3000).
82 |
83 | The backend will run on port 4000, and the frontend will run on port 3000.
84 |
85 | You can now start building your applications with December! 🥳
86 |
87 |
90 |
91 | ## Motivation
92 |
93 | AI-powered development platforms have revolutionized how we build applications. They allow developers to go from idea to working application in seconds, but most solutions are closed-source or require expensive subscriptions.
94 |
95 | Until recently, building a local alternative that matched the speed and capabilities of platforms like Loveable, Replit, or Bolt seemed challenging. The recent advances in AI and containerization technologies have made it possible to build a fast, local development environment that gives you full control over your code and API usage.
96 |
97 | I would love for this repo to become the go-to place for people who want to run their own AI-powered development environment. I've been working on this project for a while now and I'm really excited to share it with you.
98 |
99 | ## Why run December locally?
100 |
101 | Building applications shouldn't require expensive subscriptions or sacrificing your privacy. December gives you the power of platforms like Loveable, Replit, and Bolt without the downsides:
102 |
103 | - **Full Control & Privacy** - Your code, ideas, and projects never leave your machine. No cloud storage, no data mining, no vendor lock-in
104 | - **Your API Keys, Your Costs** - Use your own OpenAI API key and pay only for what you use. No monthly subscriptions or usage limits imposed by third parties
105 | - **Complete Feature Access** - No paywalls, premium tiers, or artificial limitations. Every feature is available from day one
106 |
107 | Most cloud-based AI development platforms charge $20-100+ per month while limiting your usage and storing your intellectual property on their servers. With December, a $5 OpenAI API credit can generate dozens of complete applications, and you keep full ownership of everything you create.
108 |
109 | The local-first approach means you can work offline, modify the platform itself, and never worry about service outages or policy changes affecting your projects. Your development environment evolves with your needs, not a company's business model.
110 |
111 | December proves that you don't need to choose between powerful AI assistance and maintaining control over your work. Run it locally, use your own API keys, and build without boundaries.
112 |
113 | ## Contact
114 |
115 | Hi! Thanks for checking out and using this project. If you are interested in discussing your project, require mentorship, consider hiring me, or just wanna chat - I'm happy to talk.
116 |
117 | You can send me an email to get in touch: j.schoen@mail.com or message me on Twitter: [@julianschoen](https://twitter.com/julianschoen)
118 |
119 | Thanks and have an awesome day 👋
120 |
121 | ## Disclaimer
122 |
123 | December, is an experimental application and is provided "as-is" without any warranty, express or implied. By using this software, you agree to assume all risks associated with its use, including but not limited to data loss, system failure, or any other issues that may arise.
124 |
125 | The developers and contributors of this project do not accept any responsibility or liability for any losses, damages, or other consequences that may occur as a result of using this software. You are solely responsible for any decisions and actions taken based on the information provided by December.
126 |
127 | Please note that the use of the large language models can be expensive due to its token usage. By utilizing this project, you acknowledge that you are responsible for monitoring and managing your own token usage and the associated costs. It is highly recommended to check your API usage regularly and set up any necessary limits or alerts to prevent unexpected charges.
128 |
129 | By using December, you agree to indemnify, defend, and hold harmless the developers, contributors, and any affiliated parties from and against any and all claims, damages, losses, liabilities, costs, and expenses (including reasonable attorneys' fees) arising from your use of this software or your violation of these terms.
130 |
131 |
132 |
133 | ## License
134 |
135 | Distributed under the MIT License. See `LICENSE` for more information.
136 |
--------------------------------------------------------------------------------
/backend/src/services/llm.ts:
--------------------------------------------------------------------------------
1 | import OpenAI from "openai";
2 | import { config } from "../../config";
3 | import prompt from "../utils/prompt.txt";
4 | import * as dockerService from "./docker";
5 | import * as fileService from "./file";
6 |
7 | const openai = new OpenAI({
8 | apiKey: config.aiSdk.apiKey,
9 | baseURL: config.aiSdk.baseUrl || "https://api.openai.com/v1",
10 | });
11 |
12 | export interface Message {
13 | id: string;
14 | role: "user" | "assistant";
15 | content: string;
16 | timestamp: string;
17 | attachments?: Attachment[];
18 | }
19 |
20 | export interface Attachment {
21 | type: "image" | "document";
22 | data: string;
23 | name: string;
24 | mimeType: string;
25 | size: number;
26 | }
27 |
28 | export interface ChatSession {
29 | id: string;
30 | containerId: string;
31 | messages: Message[];
32 | createdAt: string;
33 | updatedAt: string;
34 | }
35 |
36 | const chatSessions = new Map
49 |
50 |
55 | );
56 | }
57 |
58 | if (error) {
59 | return (
60 |
51 |
52 | Loading preview...
53 |
54 |
61 |
62 |
69 | );
70 | }
71 |
72 | if (!container) {
73 | return (
74 |
63 |
68 |
64 | Preview Error
65 |
66 | {error}
67 |
75 |
76 |
80 | );
81 | }
82 |
83 | if (container.status !== "running" || !container.url) {
84 | return (
85 |
77 |
79 | Container not found
78 |
86 |
87 |
112 | );
113 | }
114 |
115 | const previewContainer = (
116 |
88 |
111 |
89 |
100 |
101 | 102 | Container Not Running 103 |
104 |105 | Start the container to see the live preview 106 |
107 |
108 | Status: {container.status}
109 |
110 |
117 |
118 |
139 | );
140 |
141 | if (isDesktopView) {
142 | return previewContainer;
143 | }
144 |
145 | return (
146 |
119 |
132 |
138 |
120 |
121 |
122 |
123 |
124 |
125 | {container.url}
126 |
127 |
128 |
129 | Live
130 |
131 |
147 |
170 | );
171 | };
172 |
--------------------------------------------------------------------------------
/backend/src/routes/containers.ts:
--------------------------------------------------------------------------------
1 | import express from "express";
2 | import { v4 as uuidv4 } from "uuid";
3 | import * as dockerService from "../services/docker";
4 | import * as exportService from "../services/export";
5 | import * as fileService from "../services/file";
6 | import * as packageService from "../services/package";
7 |
8 | const router = express.Router();
9 |
10 | router.get("/", async (req, res) => {
11 | try {
12 | const containers = await dockerService.listProjectContainers();
13 |
14 | res.json({
15 | success: true,
16 | containers,
17 | });
18 | } catch (error) {
19 | res.status(500).json({
20 | success: false,
21 | error: error instanceof Error ? error.message : "Unknown error",
22 | });
23 | }
24 | });
25 |
26 | router.post("/create", async (req, res) => {
27 | const containerId = uuidv4();
28 |
29 | try {
30 | const imageName = await dockerService.buildImage(containerId);
31 | const { container, port } = await dockerService.createContainer(
32 | imageName,
33 | containerId
34 | );
35 |
36 | res.json({
37 | success: true,
38 | containerId: container.id,
39 | container: {
40 | id: containerId,
41 | containerId: container.id,
42 | status: "running",
43 | port: port,
44 | url: `http://localhost:${port}`,
45 | createdAt: new Date().toISOString(),
46 | type: "Next.js App",
47 | },
48 | });
49 | } catch (error) {
50 | await dockerService.cleanupImage(containerId);
51 |
52 | res.status(500).json({
53 | success: false,
54 | error: error instanceof Error ? error.message : "Unknown error",
55 | });
56 | }
57 | });
58 |
59 | router.post("/:containerId/start", async (req, res) => {
60 | const { containerId } = req.params;
61 |
62 | try {
63 | const { port } = await dockerService.startContainer(containerId);
64 |
65 | res.json({
66 | success: true,
67 | containerId,
68 | port,
69 | url: `http://localhost:${port}`,
70 | status: "running",
71 | message: "Container started successfully",
72 | });
73 | } catch (error) {
74 | res.status(500).json({
75 | success: false,
76 | error: error instanceof Error ? error.message : "Unknown error",
77 | });
78 | }
79 | });
80 |
81 | router.post("/:containerId/stop", async (req, res) => {
82 | const { containerId } = req.params;
83 |
84 | try {
85 | await dockerService.stopContainer(containerId);
86 |
87 | res.json({
88 | success: true,
89 | containerId,
90 | status: "stopped",
91 | message: "Container stopped successfully",
92 | });
93 | } catch (error) {
94 | res.status(500).json({
95 | success: false,
96 | error: error instanceof Error ? error.message : "Unknown error",
97 | });
98 | }
99 | });
100 |
101 | router.delete("/:containerId", async (req, res) => {
102 | const { containerId } = req.params;
103 |
104 | try {
105 | await dockerService.deleteContainer(containerId);
106 |
107 | res.json({
108 | success: true,
109 | containerId,
110 | message: "Container deleted successfully",
111 | });
112 | } catch (error) {
113 | res.status(500).json({
114 | success: false,
115 | error: error instanceof Error ? error.message : "Unknown error",
116 | });
117 | }
118 | });
119 |
120 | router.get("/:containerId/files", async (req, res) => {
121 | const { containerId } = req.params;
122 | const { path: containerPath = "/app/my-nextjs-app" } = req.query;
123 |
124 | try {
125 | const files = await fileService.listFiles(
126 | dockerService.docker,
127 | containerId,
128 | containerPath as string
129 | );
130 |
131 | res.json({
132 | success: true,
133 | path: containerPath,
134 | files,
135 | });
136 | } catch (error) {
137 | res.status(500).json({
138 | success: false,
139 | error: error instanceof Error ? error.message : "Unknown error",
140 | });
141 | }
142 | });
143 |
144 | router.get("/:containerId/file-tree", async (req, res) => {
145 | const { containerId } = req.params;
146 |
147 | try {
148 | const fileTree = await fileService.getFileTree(
149 | dockerService.docker,
150 | containerId
151 | );
152 |
153 | res.json({
154 | success: true,
155 | fileTree,
156 | });
157 | } catch (error) {
158 | res.status(500).json({
159 | success: false,
160 | error: error instanceof Error ? error.message : "Unknown error",
161 | });
162 | }
163 | });
164 |
165 | router.get("/:containerId/file-content-tree", async (req, res) => {
166 | const { containerId } = req.params;
167 |
168 | try {
169 | const fileContentTree = await fileService.getFileContentTree(
170 | dockerService.docker,
171 | containerId
172 | );
173 |
174 | res.json({
175 | success: true,
176 | fileContentTree,
177 | });
178 | } catch (error) {
179 | res.status(500).json({
180 | success: false,
181 | error: error instanceof Error ? error.message : "Unknown error",
182 | });
183 | }
184 | });
185 |
186 | //@ts-ignore
187 | router.get("/:containerId/file", async (req, res) => {
188 | const { containerId } = req.params;
189 | const { path: filePath } = req.query;
190 |
191 | if (!filePath) {
192 | return res.status(400).json({
193 | success: false,
194 | error: "File path is required",
195 | });
196 | }
197 |
198 | try {
199 | const content = await fileService.readFile(
200 | dockerService.docker,
201 | containerId,
202 | filePath as string
203 | );
204 |
205 | res.json({
206 | success: true,
207 | content,
208 | });
209 | } catch (error) {
210 | res.status(500).json({
211 | success: false,
212 | error: error instanceof Error ? error.message : "Unknown error",
213 | });
214 | }
215 | });
216 |
217 | router.put("/:containerId/files", async (req, res) => {
218 | const { containerId } = req.params;
219 | const { path: filePath, content } = req.body;
220 |
221 | try {
222 | await fileService.writeFile(containerId, filePath, content);
223 |
224 | res.json({
225 | success: true,
226 | message: "File updated successfully",
227 | });
228 | } catch (error) {
229 | res.status(500).json({
230 | success: false,
231 | error: error instanceof Error ? error.message : "Unknown error",
232 | });
233 | }
234 | });
235 |
236 | router.put("/:containerId/files/rename", async (req, res) => {
237 | const { containerId } = req.params;
238 | const { oldPath, newPath } = req.body;
239 |
240 | try {
241 | await fileService.renameFile(containerId, oldPath, newPath);
242 |
243 | res.json({
244 | success: true,
245 | message: "File renamed successfully",
246 | });
247 | } catch (error) {
248 | res.status(500).json({
249 | success: false,
250 | error: error instanceof Error ? error.message : "Unknown error",
251 | });
252 | }
253 | });
254 |
255 | router.delete("/:containerId/files", async (req, res) => {
256 | const { containerId } = req.params;
257 | const { path: filePath } = req.body;
258 |
259 | try {
260 | await fileService.removeFile(containerId, filePath);
261 |
262 | res.json({
263 | success: true,
264 | message: "File removed successfully",
265 | });
266 | } catch (error) {
267 | res.status(500).json({
268 | success: false,
269 | error: error instanceof Error ? error.message : "Unknown error",
270 | });
271 | }
272 | });
273 |
274 | router.post("/:containerId/dependencies", async (req, res) => {
275 | const { containerId } = req.params;
276 | const { packageName, isDev = false } = req.body;
277 |
278 | try {
279 | const output = await packageService.addDependency(
280 | containerId,
281 | packageName,
282 | isDev
283 | );
284 |
285 | res.json({
286 | success: true,
287 | message: "Dependency added successfully",
288 | output,
289 | });
290 | } catch (error) {
291 | res.status(500).json({
292 | success: false,
293 | error: error instanceof Error ? error.message : "Unknown error",
294 | });
295 | }
296 | });
297 |
298 | //@ts-ignore
299 | router.get("/:containerId/export", async (req, res) => {
300 | const { containerId } = req.params;
301 |
302 | try {
303 | const zipBuffer = await exportService.exportContainerCode(containerId);
304 |
305 | res.setHeader("Content-Type", "application/zip");
306 | res.setHeader(
307 | "Content-Disposition",
308 | `attachment; filename="nextjs-project-${containerId.slice(0, 8)}.zip"`
309 | );
310 | res.setHeader("Content-Length", zipBuffer.length);
311 |
312 | res.send(zipBuffer);
313 | } catch (error) {
314 | res.status(500).json({
315 | success: false,
316 | error: error instanceof Error ? error.message : "Unknown error",
317 | });
318 | }
319 | });
320 |
321 | export default router;
322 |
--------------------------------------------------------------------------------
/frontend/src/app/create/components/ChatInput.tsx:
--------------------------------------------------------------------------------
1 | import { FileText, Image, Paperclip, Send, X } from "lucide-react";
2 | import { useRef, useState } from "react";
3 | import { toast } from "react-hot-toast";
4 |
5 | interface ChatInputProps {
6 | inputValue: string;
7 | setInputValue: (value: string) => void;
8 | onSendMessage: (attachments?: File[]) => void;
9 | textareaRef: React.RefObject
155 |
156 |
169 |
157 |
158 |
159 |
168 |
160 |
166 |
167 |
129 | {allFiles.length > 0 && (
130 |
131 |
164 | )}
165 |
166 |
132 | Attached files ({allFiles.length})
133 | Total: {getTotalSize()}
134 |
135 |
136 | {allFiles.map((file, index) => (
137 |
163 |
141 | {getFileIcon(file)}
142 |
161 | ))}
162 |
143 |
147 | {file.name}
148 |
149 |
150 | {formatFileSize(file.size)}
151 |
152 |
153 |
160 |
167 |
168 |
169 |
170 |
171 |