AI Setup

Learn how to effectively use Nurav UI with AI Agents to speed up your development workflow.Copy Markdown

Overview

Nurav UI is designed with modern AI-first development in mind. Because our components are provided as raw source code, giving your AI agent (ChatGPT, Claude, Gemini, etc.) the right context ensures it generates perfect, hallucination-free code that integrates seamlessly with our library.

How to use with AI Agents

To get the most out of an AI assistant, follow these simple steps:

1. Copy the Documentation

Go to any component page and navigate to the Manual Setup section. Copy the source code provided in the code block.

2. Provide Context

Paste the code into your AI's prompt. We recommend using a prompt like this:

"I am using Nurav UI. Here is the source code for the [Component Name]. Based on this implementation, help me create a custom version that [your request here]."

3. Save Tokens & Reduce Hallucinations

By providing the source code directly:

Zero Hallucinations: The AI won't guess prop names or internal logic. It sees exactly how the component is built.
Context Awareness: The AI will understand that we use libraries like motion (Framer Motion) and @hugeicons/react, allowing it to suggest compatible animations and icons.
Efficiency: You only need to share the relevant component code, keeping your "context window" clean and saving tokens.

Why this works

Most AI models are trained on public data that might be outdated. Nurav UI evolves quickly. By providing the exact MDX source or component code from the documentation:

Internal Logic: The AI understands how the component handles state (e.g., how useSound syncs with localStorage).
Style Consistency: It will maintain the same Tailwind CSS patterns and design tokens used throughout Nurav UI.
Optimized Code: It will know to re-use our internal utility hooks instead of reinventing them.

Best Practices

Multiple Components: If you are building a complex section (like a pricing page with a custom footer), provide the source code for both.
Dependencies: Mention that you have the library's core dependencies installed (Lucide, Framer Motion, HugeIcons) to avoid redundant installation instructions.
Registry Awareness: If you prefer the AI to use the Shadcn CLI path, let it know your @nurav-ui alias is configured.

Pro Tip: You can even paste the entire .mdx content of a documentation page into an AI. AI models are excellent at parsing Markdown and will understand the usage examples, props tables, and installation steps perfectly.

Nurav UI