MoodUI

AI-friendly UI spec + React renderer. Generate modern React components with AI and use them instantly.

Features

• 🚀 Generate UI components from natural language prompts
• 📦 Save directly to your repository
• 🔄 Live preview of generated components
• 🎨 Reusable icon library with 17+ built-in icons
• 💻 CLI & Web UI support
• 🤖 Multiple LLM providers: Gemini, Ollama, OpenAI-compatible
• 🔧 Programmatic API for integration into your workflows

Installation

npm install @kohryan/moodui

Quick Start

1. Generate Component via CLI

First, set up your API key (e.g., GEMINI_API_KEY):

export GEMINI_API_KEY=your_api_key_here

Then generate a component:

npx @kohryan/moodui generate \
  --model gemini-3-flash-preview \
  --component MoodTracker \
  --out src/components/MoodTracker.tsx \
  "Create a mood tracker UI: title, mood input, Save button"

2. Launch Web UI

For a visual interface:

npx @kohryan/moodui ui

This will open a browser window with the MoodUI playground where you can:

• Write prompts and generate components
• Preview results live
• Copy, download, or save components directly to your project
• Browse the reusable icon library

Usage

Programmatic Usage

You can also use MoodUI programmatically in your code:

import { generateReactFromPrompt } from '@kohryan/moodui';

const result = await generateReactFromPrompt({
  provider: 'gemini',
  model: 'gemini-3-flash-preview',
  apiKey: 'your_api_key',
  prompt: 'Create a simple login UI with email, password, and login button',
  componentName: 'LoginPage'
});

console.log('Generated code:', result.code);
console.log('MoodUISpec:', result.spec);

Using Generated Components

Import and use the generated component in your React app:

import { MoodTracker } from './components/MoodTracker';

export default function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>My Mood Tracker</h1>
      <MoodTracker onAction={(actionId) => {
        console.log('Action triggered:', actionId);
        // Handle actions like "save_mood", "clear", etc.
      }} />
    </div>
  );
}

CLI Reference

moodui <command>

Commands:
  generate [options] <prompt...>  Generate component via CLI
  ui                             Launch Web UI for generating components
  help, --help, -h              Show this help message

Generate Options:
  --provider gemini|ollama|openai-compatible   default: gemini
  --model <name>                               required (default for gemini: gemini-3-flash-preview)
  --out <path>                                 full path to output file (including directory), default: src/generated/MoodScreen.tsx
  --component <name>                           component name, default: MoodScreen
  --prompt <text>                              optional (or pass as positional args)
  --temperature <number>
  --maxAttempts <number>
  --baseUrl <url>

Env:
  GEMINI_API_KEY
  OPENAI_COMPATIBLE_BASE_URL
  OPENAI_COMPATIBLE_API_KEY

Providers

Gemini

GEMINI_API_KEY=your_key npx @kohryan/moodui generate \
  --model gemini-3-flash-preview \
  --component SalesDashboard \
  "Create a SaaS dashboard with stat cards and charts"

Ollama

npx @kohryan/moodui generate \
  --provider ollama \
  --model llama2 \
  --component TodoList \
  "Create a todo list with add, remove, and complete functionality"

OpenAI-compatible

OPENAI_COMPATIBLE_API_KEY=your_key \
OPENAI_COMPATIBLE_BASE_URL=https://api.example.com \
npx @kohryan/moodui generate \
  --provider openai-compatible \
  --model gpt-4 \
  --component EcommerceProductPage \
  "Create an e-commerce product page with product details and add to cart button"

Reusable Icons

MoodUI includes a built-in icon library with these names:

• sparkles, search, settings, user, mail
• heart, home, plus, check, arrow-right
• calendar, bell, star, chart-bar, message-circle, shield

Use them in your prompts like: "Use sparkles, heart, and check icons"

Examples

Check out the examples directory for working demos.

API Reference

generateReactFromPrompt(options)

Generates a React component from a prompt.

Options:

• provider: "gemini" | "ollama" | "openai-compatible" - LLM provider
• model: string - Model name
• prompt: string - UI description in natural language
• componentName?: string - Name of the generated component
• apiKey?: string - API key (required for gemini and openai-compatible)
• baseUrl?: string - Base URL for the API
• temperature?: number - Temperature for generation
• maxAttempts?: number - Max attempts to generate valid spec

Returns: Promise<GenerateReactFromPromptResult>

• spec: MoodUISpec - The generated UI specification
• code: string - The generated React component code
• raw: string - Raw LLM response

MoodUIRuntime

Renders a MoodUISpec to React components.

Props:

• spec: MoodUISpec - The UI specification to render
• onAction?: (actionId: string) => void - Callback for button actions

MoodUISpec

MoodUISpec is a JSON schema for describing UIs. It supports these node types:

• box: Container with flex layout
• text: Text content (supports h1-h6, p, etc.)
• button: Interactive button with actionId
• input: Input field
• image: Image element
• icon: Reusable icon from the library
• spacer: Simple spacing element

License

MIT