Interacting with Vly

Effective communication with vly.ai's AI agent is key to building great applications quickly. This guide covers how to get the best results from your interactions.

Understanding the AI agent

Agent capabilities

The AI agent can:

Generate complete applications from descriptions
Modify existing code with precision
Understand context from previous conversations
Make architectural decisions based on best practices
Integrate multiple technologies seamlessly

Agent limitations

The AI agent works best when you:

Provide clear requirements rather than vague requests
Break complex features into smaller, manageable parts
Give feedback on generated code and functionality
Specify preferences for design and implementation choices

Effective prompting techniques

Be specific and descriptive

Instead of vague requests, provide detailed descriptions:

Good examples:

"Add a user authentication system with email/password login, registration form with email verification, and a protected dashboard page"

"Create a product grid layout with 3 columns on desktop, 2 on tablet, and 1 on mobile. Each product card should show image, title, price, and an 'Add to Cart' button"

"Implement a real-time chat feature where users can send messages, see typing indicators, and receive notifications for new messages"

Less effective:

"Add login stuff"
"Make a product page"  
"Add chat"

Reference existing elements

When modifying your application, reference specific components or features:

"Modify the navigation bar to include a user dropdown menu next to the login button"

"Update the ProductCard component to display a sale badge when the product is discounted"

"Change the color scheme in the Header component to use a darker background"

Provide context and goals

Explain the purpose behind your request:

"Add a loading spinner to the product search results because users need visual feedback when searching through large catalogs"

"Implement form validation on the contact form to reduce spam and ensure we get valid email addresses"

"Create a responsive mobile menu because the current navigation doesn't work well on phones"

Working with assets

Uploading and referencing files

Go to the Assets tab
Upload files (images, documents, etc. up to 15MB each)
Reference assets in your prompts using @filename

Example usage:

"Use @logo.png as the header logo and @hero-image.jpg as the background for the landing page"

"Create a product gallery using the images @product1.jpg, @product2.jpg, and @product3.jpg"

"Add the content from @terms-of-service.pdf to a new legal page"

Asset organization tips

Upload related files together for batch processing
Use descriptive filenames that clearly indicate content
Consider file formats appropriate for web use
Group similar assets to make referencing easier

Managing conversations

Following up on requests

You can build on previous requests:

Initial: "Create a blog post listing page"
Follow-up: "Add pagination to show 10 posts per page"
Follow-up: "Include search functionality to filter posts by title"

Correcting misunderstandings

If the AI agent misunderstands your request:

"Actually, I meant the sidebar should be on the left side, not the right"
"The login form should be a modal popup, not a separate page"
"I want the buttons to be rounded, not square"

Interrupting during generation

You can interrupt the agent while it's working:

Type additional requirements while the agent is thinking
Provide clarifications if you see the direction isn't right
Add constraints or preferences you forgot to mention

Advanced interaction patterns

Progressive enhancement

Build features incrementally:

1. "Create a basic contact form with name, email, and message fields"
2. "Add client-side validation to the contact form"
3. "Include a success message and email notification when the form is submitted"
4. "Add a file attachment option for support requests"

Conditional logic

Specify behavior for different scenarios:

"Show a welcome message for new users, but display recent activity for returning users"

"If the user is an admin, show management controls in the sidebar"

"Display different pricing tiers based on whether the user has a subscription"

Integration requests

Ask for third-party integrations:

"Integrate with Stripe for payment processing on the checkout page"

"Add Google Analytics tracking to monitor page views and user behavior"

"Connect to a weather API to show current conditions on the dashboard"

Troubleshooting interactions

When requests aren't working

If the AI agent isn't producing the expected results:

Be more specific about your requirements
Break down complex requests into smaller parts
Provide examples of what you want to achieve
Reference existing similar functionality in your app

Getting back on track

If the conversation goes off course:

"Let's focus on the user authentication feature first, we can add the chat later"

"I think there was a misunderstanding. What I meant was..."

"Can you show me what you've built so far before we continue?"

Best practices summary

Start with clear, specific descriptions
Reference existing components and files
Upload assets before referencing them
Build features incrementally
Provide feedback and corrections promptly
Ask questions if something isn't clear
Test frequently during development

Mastering these interaction patterns will help you build applications faster and with fewer iterations. The AI agent learns from your feedback, so clear communication leads to better results.

Interacting with Vly

On this page