Collaborative Agents for More Precise UI Generation
HedgeKit is a schema-driven frontend code generation platform that leverages multiple AI models to help developers build React components and web applications faster. It features live preview, intelligent project planning, and collaborative AI agents that work together to create cohesive user interfaces.
- Multiple AI Providers: Supports OpenAI GPT, Claude Sonnet 4, Claude Opus 4, and Vercel v0
- Agent Orchestration: Intelligent workflow automation with automatic tool chaining
- Action Budget System: Smart resource management to optimize AI usage
- AI-Powered Component Builder: Generate React components from natural language descriptions
- Multiple Generation Methods: Choose between OpenAI GPT or Vercel v0 for component creation
- Live Code Preview: See your components rendered in real-time as they're generated
- AI Image Generation: Create images and logos using AI
- CDN Integration: Automatic upload to BunnyCDN for fast global delivery
- Asset Organization: Built-in image manager with editing capabilities
- AI Project Planner: Break down projects into phases, milestones, and actionable tasks
- Task Tracking: Monitor progress with status updates and completion tracking
- Execution CTAs: One-click actions to execute tasks or start development sessions
- Unified Preview: See all components and scenes in one place
- Multiple Preview Modes: Fast preview, compiled preview, and static preview options
- Screenshot Capture: Capture and analyze component screenshots for quality assessment
- Multi-Project Support: Manage multiple projects with different configurations
- Schema-Driven Architecture: Define project structure with TypeScript schemas
- Version Control Ready: Clean project structure optimized for Git workflows
Check out the HedgeKit UI Prototype on v0.dev to see the design and user experience concepts behind the platform. And the initial planning and generation exchange on YouTube
- Node.js 18+ (
.nvmrcfile included) - npm or yarn
- API keys for AI providers (at least one):
- OpenAI API key (
VITE_OPEN_AI_KEY) - Anthropic API key (
VITE_ANTHROPIC_KEY) - Vercel token (
VITE_VERCEL_TOKEN) for v0 generation
- OpenAI API key (
- Clone the repository:
git clone https://github.com/yourusername/hedgekit.git
cd hedgekit- Install dependencies:
npm install- Set up environment variables:
cp .env.example .envEdit .env and add your API keys:
VITE_OPEN_AI_KEY=your_openai_key
VITE_ANTHROPIC_KEY=your_anthropic_key
VITE_VERCEL_TOKEN=your_vercel_token
VITE_BUNNY_CDN_API_KEY=your_bunny_cdn_key (optional)- Start the development server:
npm run dev- Launch HedgeKit and click "Create New Project"
- Enter project details:
- Name and description
- Framework (React)
- Choose a theme preset or customize colors
- Click "Create Project"
- Navigate to the Build Tools tab
- In the Component Generator:
- Select generation method (OpenAI or v0)
- Describe your component in natural language
- Click "Generate"
- The component will appear in the Project tab with live preview
- Click the chat icon to open the Agent Sidebar
- Type your request, for example:
- "Create a user profile card with avatar and social stats"
- "Generate a project plan for a recipe sharing app"
- "Build a navigation menu with dropdown support"
- The agent will execute tools and create artifacts automatically
- Go to the Plan tab
- Click "Generate Project Plan" or ask the agent
- Review the generated phases, milestones, and tasks
- Use action buttons to:
- Start a development session
- Execute specific tasks
- Review and update the plan
HedgeKit is built with modern web technologies:
- Frontend Framework: React 19 with TypeScript
- Build Tool: Vite 6 for fast development
- Styling: Tailwind CSS with shadcn/ui components
- State Management: React hooks and contexts
- Code Editor: CodeMirror 6
- AI Integration: Multiple provider abstraction layer
AgentOrchestrator: Manages AI providers and tool executionComponentGenerator: Handles component creation logicProjectManager: Multi-project state managementUnifiedPreview: Live component rendering systemAgentTools: Extensible tool system for AI actions
npm run testnpm run typechecknpm run lintnpm run buildWe welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Create an Issue for bug reports
- Join our Discord for community support
- Check the Wiki for documentation
Made with ❤️ by the HedgeKit Team during: