Skip to main content

AI Assistant

The AI assistant is the core of INSTROC, enabling you to build applications through natural conversation.

How It Works​

The AI assistant uses advanced language models to understand your intent and generate code:

  1. You describe what you want in plain English
  2. AI interprets your request and determines the best approach
  3. Code is generated including React components, styles, and logic
  4. Changes appear instantly in the live preview

Starting a Conversation​

Initial Generation​

When starting a new project with AI, provide a clear description:

Create a landing page for a fitness app with:
- Hero section with headline and CTA
- Features section with 4 cards
- Pricing with 3 tiers
- Testimonials carousel
- Footer with social links

The AI will generate the entire page structure.

Iterative Refinement​

Continue the conversation to make changes:

Make the hero section taller and add a background gradient
Change the pricing section to use cards instead of a table
Add animations when the page loads

Best Practices​

Be Specific​

The more detail you provide, the better the results:

Less effective:

Add a form

More effective:

Add a contact form with fields for name, email, phone,
and message. Include validation and a submit button
that says "Get in Touch"

Reference Elements​

Mention specific elements when making changes:

In the features section, change the icons to use
outline style instead of filled

Describe Intent​

Explain what you're trying to achieve:

I want users to immediately understand that this is a
premium product. Make the design feel more luxurious
with gold accents and elegant typography.

Use Examples​

Reference familiar designs when helpful:

Style the pricing section similar to Stripe's
pricing page with the popular plan highlighted

AI Capabilities​

What AI Can Do​

  • Generate pages - Full page layouts from descriptions
  • Create components - Buttons, cards, forms, navbars
  • Style elements - Colors, spacing, typography, animations
  • Add functionality - Form validation, interactions, state
  • Modify existing code - Update specific parts of your app
  • Fix issues - Debug problems and resolve errors

Current Limitations​

  • Complex business logic may need manual refinement
  • Third-party API integrations require specific credentials
  • Very precise pixel-perfect designs work better in visual editor
  • Real-time data fetching needs backend configuration

Context Awareness​

The AI maintains context throughout your session:

Conversation History​

Previous messages inform current responses. The AI remembers what you've discussed.

Current Selection​

When you select an element in the visual editor, AI knows which element you're referring to.

Project Structure​

AI understands your project's pages, components, and organization.

Design Patterns​

AI learns your preferences and maintains consistency across the project.

Tips for Better Results​

1. Start Broad, Then Refine​

Begin with overall structure, then iterate on details.

2. One Change at a Time​

For complex changes, break them into smaller requests.

3. Use Natural Language​

Talk to the AI like you would a designer or developer.

4. Provide Feedback​

If something isn't right, describe what you expected and what's wrong.

5. Reference Visual Elements​

"The second card in the features section" is clearer than "that card."

Troubleshooting​

AI Not Understanding​

If the AI misinterprets your request:

  • Rephrase using different words
  • Be more specific about the element
  • Describe what you see vs. what you want

Unexpected Changes​

If AI changes too much:

  • Use Undo to revert
  • Be more specific about what to change
  • Mention "only change" to limit scope

Inconsistent Results​

For more consistent output:

  • Reference your existing design elements
  • Provide specific values (colors, sizes)
  • Build incrementally rather than all at once