Compoder is an open-source AI-powered engine designed to generate frontend component code. It empowers frontend engineers to create custom AI-driven code generators tailored to specific technology stacks, component libraries, and development scenarios, streamlining the creation of UI elements.

How It Works

Compoder's core is a customizable codegen engine that allows users to define generators based on technology frameworks (React, Vue), component libraries (Mui, Antd, Shadcn UI), specific use cases (landing pages, forms), code specifications, and AI models (OpenAI, Claude). It translates text or image prompts into component code, supports iterative code development, offers online fine-tuning within an integrated editor, and provides a real-time preview sandbox for immediate feedback.

Quick Start & Requirements

Local development requires Node.js v18.x+, pnpm v9.x+, and Docker with Docker Compose. After cloning the repository, install dependencies with pnpm install. Start the MongoDB database via docker compose up -d, configure environment variables by copying .env.template to .env, and set up model provider and codegen configurations. Launch the documentation server with pnpm storybook and the main application with pnpm dev. Sandbox renderers for Antd, Shadcn UI, Mui, and Element Plus are available in the artifacts directory. Detailed usage is in CONTRIBUTING.md.

Highlighted Details

• Highly customizable AI-powered component code generation.
• Supports prompt-to-code functionality using text or images.
• Features online code fine-tuning and real-time preview sandboxes.
• Roadmap includes Code-to-Figma, Figma-to-Code, and a Codegen Template Marketplace.

Maintenance & Community

Compoder is described as being in an "early rapid iteration stage," welcoming contributors. Community support and feedback are primarily channeled through GitHub Discussions and GitHub Issues. A WeChat group is also available for updates and networking.

Licensing & Compatibility

The project is released under the "Compoder Open Source License," which is stated to be "essentially Apache 2.0 with some additional restrictions." Specific compatibility notes for commercial use or closed-source linking are not detailed, necessitating a review of the license's additional clauses.

Limitations & Caveats

The project is in an early development phase, indicating potential for rapid changes and instability. The custom license includes restrictions beyond the standard Apache 2.0, which may impact commercial adoption. Official Docker images for deployment are still under development.