Getting Started

MagicalDope generates production-ready UI components from natural language prompts. This guide walks you through installation and your first generation.

Installation

npm install magicaldope

Or with yarn:

yarn add magicaldope

Configuration

Create a magicaldope.config.js in your project root:

export default {
  framework: "react",
  styling: "tailwind",
  tokens: "./design-tokens.json",
  output: "./src/components/generated",
};

Generate Your First Component

import { generate } from 'magicaldope';

const result = await generate({
  prompt: "hero section with gradient background and CTA button",
});

console.log(result.code);
// Outputs a complete React component with Tailwind classes

CLI Usage

npx magicaldope generate "navigation bar with logo and mobile menu"

The CLI writes the component to your configured output directory and prints the file path.

Next Steps