👁️ Vision & Web Search

​

What Can the AI See?

• Images (PNG, JPEG, GIF, WebP)
• Videos (through URL links)
• Web pages (content and structure)
• Screenshots
• Diagrams and mockups

​

How It Works

1. Fetch the content
2. Analyze it (vision for images/videos, text extraction for web pages)
3. Use that context to answer your question

​

For Images and Videos

You: Take a look at this design mockup: https://example.com/mockup.png
     Can you recreate this UI in Flutter?

• Analyze the image
• Understand the layout, colors, and components
• Generate the corresponding Flutter code

• Image URLs: .png, .jpg, .jpeg, .gif, .webp
• Video URLs: Direct video links

​

For Web Pages

You: Read this documentation: https://supabase.com/docs/guides/auth
     and help me implement authentication in my app

• Fetch the web page content
• Extract relevant information
• Use it to provide accurate, up-to-date answers

​

Common Use Cases

​

1. Design Implementation

Here's our new login screen design: https://figma.com/file/xyz
Implement this in Flutter with proper animations

​

2. Bug Reports with Screenshots

I'm getting this error: https://i.imgur.com/error123.png
What's wrong?

​

3. Documentation Research

Check out https://dart.dev/guides/language/effective-dart
and refactor my code following these best practices

​

4. Code from Diagrams

Convert this database schema to Supabase tables: https://example.com/schema.png

​

5. Real-time Information

Search for the latest Flutter 3.28 breaking changes and update my code

​

Tips for Best Results

​

1. Be Specific About What You Want

Look at this UI: https://example.com/ui.png
Recreate the navigation bar component with the exact colors and spacing

Make something like this: https://example.com/ui.png

​

2. Combine Multiple Sources

Compare these two implementations:
- https://example.com/approach-a.png
- https://example.com/approach-b.png

Which is better for my use case?

​

3. Reference Documentation

Following the guidelines from https://docs.flutter.dev/ui/widgets
create a custom widget for my product card

​

4. Use Recent Sources

What are the latest Supabase Edge Functions best practices in 2025?

​

What the AI Can Analyze

​

From Images

• UI/UX Design: Layouts, colors, typography, spacing
• Diagrams: Architecture, flows, schemas
• Code Screenshots: Error messages, stack traces, code snippets
• Charts/Graphs: Data visualization patterns
• Mockups: Design specifications

​

From Videos

• Tutorials: Step-by-step instructions
• Demos: Feature implementations
• Presentations: Technical concepts
• Screen Recordings: Bug reproductions

​

From Web Pages

• Documentation: API references, guides, tutorials
• Articles: Best practices, comparisons, solutions
• Stack Overflow: Error solutions, code examples
• GitHub: README files, code examples, issues
• Blog Posts: Technical tutorials, announcements

​

Privacy & Security

​

What Gets Shared

• The AI fetches public content from that URL
• For images/videos: Visual analysis is performed
• For web pages: Text content is extracted and analyzed

​

What Stays Private

• The AI only accesses public URLs you explicitly provide
• Your local files are never uploaded (unless you explicitly share them)
• No automatic web searches happen without your request

​

Best Practices

• Share public documentation and resources
• Use image hosting services for screenshots
• Reference public GitHub repositories

• Share URLs containing sensitive information
• Include authentication tokens in URLs
• Link to private company resources (unless intentional)

​

Limitations

​

Images & Videos

• Images & Videos consumes a large amount of tokens
• Videos are analyzed via URL context, not frame-by-frame
• Animated content may be analyzed as static frames

​

Web Search

• Results reflect current web content (not real-time data feeds)
• Some paywalled or authentication-required sites may not be accessible
• Search quality depends on query specificity
• Web search can increase the token usage, depending on the amount of content fetched

​

General

• The AI can’t interact with dynamic web content (buttons, forms)
• Can’t access content behind authentication (unless you have MCP servers configured)
• Some websites may block automated access

​

Advanced: Combining Vision with MCP Servers

You: Look at this database design: https://example.com/schema.png

     Then query my Supabase database and tell me what changes
     I need to make to match this design

1. Analyze the schema image (Vision)
2. Query your actual database (Supabase MCP)
3. Compare and generate migration scripts

You: Check the latest commit in the repository
     and compare it with this screenshot of the error: https://i.imgur.com/bug.png

1. Read the error from the image (Vision)
2. Fetch recent commits (GitHub MCP)
3. Identify the likely cause

​

Troubleshooting

​

Image Not Loading

1. Verify the URL is publicly accessible
2. Check the image format is supported
3. Ensure the link is direct (ends in .png, .jpg, etc.)
4. Try re-uploading to a different host (Imgur, GitHub, etc.)

​

Web Page Not Accessible

1. Check if the page requires authentication
2. Verify the URL is correct and accessible
3. Some sites block automated access—try sharing the relevant text instead
4. Check if the page is behind a paywall

​

Search Results Not Relevant

1. Be more specific in your query
2. Include technical terms and version numbers
3. Mention the year if you need recent information
4. Try multiple search attempts with refined queries

​

Examples

​

Example 1: Recreate UI from Screenshot

https://dribbble.com/shots/example-ui
Create this login screen in Flutter

// Analyzes the image and generates:
class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF1A1A2E), // Extracted from image
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Logo matching the design...
            // Input fields with matching styling...
            // Button with exact colors and shadows...
          ],
        ),
      ),
    );
  }
}

​

Example 2: Debug with Error Screenshot

I'm getting this error: https://i.imgur.com/flutter-error.png
What's the issue?

The error shows a "Null check operator used on a null value" in your
UserProfile widget at line 45. This happens because:

1. The 'user' object is null when the widget builds
2. You're using '!' operator which assumes non-null

Fix by adding null safety:
[Provides corrected code]

​

Example 3: Learn from Documentation

Read https://supabase.com/docs/guides/realtime
and add real-time subscriptions to my chat app

Based on the Supabase Realtime documentation, here's how to implement
real-time chat:

[Provides implementation using correct Supabase Realtime API]

​

Example 4: Compare Approaches

Compare these two state management approaches:
- https://riverpod.dev/docs/concepts/providers
- https://docs.flutter.dev/data-and-backend/state-mgmt/simple

Which should I use for my e-commerce app?

After reviewing both approaches:

Riverpod (Provider 2.0):
- Better for complex apps with many dependencies
- Excellent testing support
- Compile-time safety
- More boilerplate

Provider (Simple):
- Good for small to medium apps
- Easier learning curve
- Less boilerplate
- Flutter team's recommendation for beginners

For your e-commerce app, I recommend Riverpod because:
[Detailed reasoning and implementation guide]

​

Conclusion

​

Related Documentation

• Getting Started - Platform basics
• MCP Servers - Extend with custom integrations
• AI Agents - Customize AI behavior