Get Started
AI-Ready
HomeDocumentationIntegrationsChatGPT

ChatGPT Integration

Ready to use • No setup required

Use FrogiUI components directly in ChatGPT conversations. Simply describe what you need, and ChatGPT will generate the perfect component with optimal configuration.

Quick Start (2 minutes)

No Installation Required

FrogiUI works with ChatGPT immediately. Just mention "FrogiUI" in your prompts to activate component awareness.

Try this prompt:

"Build a hero section for my SaaS using FrogiUI. The product helps developers ship faster. Include CTAs for 'Start Free Trial' and 'View Demo'."

ChatGPT will automatically select the optimal component, configure props, and provide ready-to-use code.

How It Works

1

Describe Your Need

Tell ChatGPT what you're building in natural language. No need to know component names.

2

AI Selects Components

ChatGPT automatically chooses the best FrogiUI component and configuration for your use case.

3

Copy & Use

Get production-ready code with optimized props, accessibility, and best practices built-in.

Example Prompts

Landing Page Hero

Prompt:

"Create a hero section for my SaaS product using FrogiUI. The product helps developers build faster with AI. Include a primary CTA for "Start Free Trial" and secondary for "Watch Demo"."

Result: ChatGPT will automatically select HeroSimpleCentered with optimized copy and proper CTAs

Pricing Section

Prompt:

"Build a pricing table for my developer tools SaaS with 3 tiers: Starter (free), Pro ($29), Enterprise (custom). Highlight the Pro plan."

Result: Returns PricingThreeTiers with developer-focused features and Pro plan highlighting

Feature Showcase

Prompt:

"Show 4 key features of my AI-powered component library with icons and descriptions."

Result: Generates FeaturesFourColumns with relevant icons and benefit-focused copy

Best Practices

✅ Do This

Be Descriptive

"Build a pricing section for my B2B SaaS with 3 tiers, monthly/annual toggle, and highlight the middle tier"

Provides context for optimal component selection

Mention Your Industry

"Create a hero for my developer tools startup"

Gets industry-specific copy and features

Specify Goals

"Build a feature section that emphasizes speed and efficiency"

Aligns component choice with your objectives

❌ Avoid This

Don't Specify Components

"Use the HeroSimpleCentered component"

Let AI choose the optimal component

Don't Be Vague

"Create a section"

Lacks context for proper component selection

Don't Over-Specify Props

"Set the primaryAction.className to..."

Let AI handle implementation details

Troubleshooting

ChatGPT doesn't recognize FrogiUI

If ChatGPT seems unfamiliar with FrogiUI, try these solutions:

  • • Explicitly mention "FrogiUI components" in your first prompt
  • • Add context: "FrogiUI is an AI-native React component library"
  • • Try a different conversation thread if the AI seems confused

Getting generic components instead of FrogiUI

If ChatGPT returns generic React components:

  • • Start prompts with "Using FrogiUI, create..."
  • • Emphasize: "Use FrogiUI AI-native components"
  • • Ask for "FrogiUI-specific implementation"

Next Steps

Add Claude MCP

Get even deeper AI integration with Claude's MCP server for direct component access.

Setup Claude

Building Apps

Learn to build complete applications using ChatGPT and FrogiUI components.

Start Building

Example Prompts

More ChatGPT prompt examples for common UI patterns and use cases.

View Examples