Summary

Shadify is an open-source project that transforms plain English UI descriptions into live, interactive shadcn/ui components, exportable as clean React code. It targets developers seeking to accelerate UI prototyping and development by automating the generation of accessible, polished web interfaces. The core benefit lies in its ability to produce functional component structures rather than just text, streamlining the design-to-code workflow.

How It Works

The project employs a sophisticated, multi-service architecture. A React/Vite frontend captures user UI descriptions in natural language. These requests are processed by a CopilotKit runtime, which streams structured UI data to the browser in real-time. The backend agent, powered by LangGraph, handles reasoning, conversation memory, and tool use (including web search and site extraction via Tavily). This agent intelligently composes UIs by selecting and assembling actual shadcn/ui components, ensuring the generated output is accessible, adheres to best practices, and uses the same components developers integrate into their own projects. This approach offers a novel way for AI to generate tangible UI elements.

Quick Start & Requirements

• Installation: pnpm install
• Prerequisites: OpenAI API key (for runtime and agent services) and Tavily API key (for agent service). These are configured via .env files in apps/runtime/ and apps/agent/.
• Development Servers: UI runs at localhost:5173, Runtime on localhost:4000, and Agent on localhost:8123.
• Deployment: Managed via a single render.yaml file.

Highlighted Details

• AI-generated live, interactive shadcn/ui pages from natural language.
• Exportable clean React code for generated components.
• Real-time structured UI streaming via CopilotKit.
• LangGraph-powered agent with search and reasoning capabilities.

Maintenance & Community

No specific details on contributors, sponsorships, or community channels were provided in the README.

Licensing & Compatibility

• License: MIT.
• Compatibility: The MIT license permits broad use, including commercial applications and integration into closed-source projects.

Limitations & Caveats

Setup requires obtaining and configuring multiple API keys (OpenAI, Tavily). The development environment is structured as a pnpm monorepo with three distinct services, which may add complexity for initial setup. The README does not specify performance benchmarks or potential limitations of the AI's generation accuracy or scope.