AI Integration

AI-Generated Bug Reports

VibeCheck uses AI vision to analyze your screenshots and automatically generate bug report titles and detailed steps to reproduce. No more writing these manually — just capture a screenshot, and AI fills in the details for you.

How it works

1. Capture a screenshot (with or without annotations)
2. Click the AI Generate button
3. AI analyzes the screenshot and generates:
   • A descriptive title for the bug report
   • Steps to reproduce the issue
4. Review and edit the generated text if needed
5. Save the bug report

What AI detects

The AI analyzes the visual content of your screenshot to identify:

• UI issues — broken layouts, misaligned elements, missing content
• Error messages — visible error dialogs, toast notifications, validation errors
• Unexpected states — loading spinners stuck, empty states, wrong data displayed
• Form problems — incorrect field values, validation issues

Tips

• Annotate first — adding arrows or highlights to the screenshot helps AI focus on the right area
• Review the output — AI-generated text is a starting point; adjust it to add any context the AI might miss
• Works best with clear bugs — the more visually obvious the issue, the better the AI description

---

Using tracks with AI tools

VibeCheck tracks can also be used with AI coding assistants to accelerate debugging. Share a track URL with Claude Code, Cursor, or other AI tools and let the AI analyze the bug report data.

How it works

VibeCheck tracks contain structured data (console logs, network requests, error messages) that AI tools can parse and analyze. When you share a track URL with an AI assistant, it can:

• Identify the root cause from error messages and stack traces
• Suggest fixes based on the console and network data
• Explain the bug in the context of your codebase
• Generate reproduction code from the captured request data

Using with Claude Code

Share the track URL directly in your Claude Code conversation:

Here's the bug report: https://app.vibecheck-qa.com/tracks/abc123

The user is seeing a 500 error when submitting the order form.
Can you help identify the root cause?

Claude Code will fetch the track data and analyze the console errors, network requests, and user actions to help diagnose the issue.

Using with Cursor

Paste the track URL in Cursor's chat. The AI can analyze the bug data and suggest code changes in the context of your open project.

What AI tools can access

When given a track URL, AI tools can read:

• Console log messages and error stack traces
• Network request URLs, methods, status codes, and response bodies
• User action timeline
• Environment information (browser, OS)

Tips

• Include context — tell the AI what the expected behavior should be
• Reference your code — mention relevant file names or functions
• Ask specific questions — "What's causing the 500 error on POST /api/orders?" is better than "Fix this bug"
• Combine with your codebase — AI tools work best when they can see both the bug data and your source code

---

MCP Server

For deeper integration with AI tools, set up the VibeCheck MCP server. It gives AI assistants like Claude Code and Cursor direct access to your bug report data — including console logs, network requests, performance metrics, and user actions — without needing to manually share URLs.