SnappySnag Documentation
SnappySnag is an in-app visual bug reporting and AI auto-fix suggestion SDK for Flutter. With a single shake or tap, users capture screenshots, drop itemized numbered pins (1–5), and instantly receive AI-powered code fix suggestions and ready-to-use prompts for any AI coding agent (Cursor, Windsurf, Claude, Copilot, etc.) on your dashboard.
Multi-Point Pins
Normalized vector preservation without destructive stamping. Drop 1–5 pins with separate repro notes.
AI Agent Auto-Fix
Widget hierarchy dumps paired with Gemini AI to generate copy-ready prompts for Cursor, Claude, Windsurf, etc.
3-Tier Roles & Safety
Owner, Developer, and Tester. Testers submit reports without consuming your project AI credits.
Quickstart (3 Simple Steps)
Integrate into your existing Flutter application in under 3 minutes.
Add Dependency
flutter pub add snappy_snagGet Your Project API Key
Create a project on the SnappySnag Dashboard (https://snappysnag.com/dashboard) and copy your live API Key (e.g. snag_live_...).
Configure main.dart
Call initialize() in main() and set navigatorKey and builder on MaterialApp.
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:snappy_snag/snappy_snag.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// 1. SDKの初期化（本番・テスト問わずこの1行で安全に動作）
SnappySnag().initialize(
apiKey: 'snag_live_your_api_key_here',
showTriggerButton: true, // フローティングボタンを表示
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// 2. SnappySnagのナビゲーターキーを設定
navigatorKey: SnappySnag.defaultNavigatorKey,
// 3. builder で SnappySnagOverlay をラップ
builder: (context, child) => SnappySnagOverlay(
child: child ?? const SizedBox.shrink(),
),
home: const MyHomePage(),
);
}
}Ecosystem & Tool Category Comparison
SnappySnag operates independently and can be used alongside existing crash reporting systems, bridging the gap between visual bug reports and AI code fixes.
| Category / Feature | SnappySnag (AI × Visual) | Crash Monitoring SDKs | Legacy Feedback SDKs |
|---|---|---|---|
| Primary Focus | Visual bugs, UI glitches, design inconsistencies & feature requests | Fatal app crashes, unhandled exceptions & stack traces | General user inquiries & basic screenshots |
| AI Agent Integration | Ready-to-use prompts for Cursor, Claude & Copilot | ✕ Raw stack traces only | △ Basic text summarization only |
| Pin Annotations | Up to 5 numbered pins (vector coordinate preservation) | ✕ None (automatic passive dump) | △ Destructive drawing stamps / freeform arrows |
| Widget Tree Dumper | 10-layer widget traversal with auto PII redaction | ✕ None | △ Native UIView hierarchy only |
| Coexistence | - | ○ Works seamlessly together (independent) | ○ Choose based on your workflow |
Multi-Point Pin Annotations
Traditional feedback tools often deface screenshots with rough drawings or require multiple screenshots for separate bugs. SnappySnag allows users to tap anywhere to drop up to 5 numbered pins (①–⑤) with targeted comments.
Pin positions are stored as normalized vector percentages (x, y ratios) rather than burned into the screenshot. Dashboard users can toggle pins on/off and inspect original high-resolution pixels cleanly.
3-Tier Roles & AI Credit Safety
Strict permission boundaries designed for client work, contractors, and mixed internal/external teams.
Project Owner
- Full project & member management
- Pin inclusion / exclusion triage
- AI auto-fix generation & credit consumption
Developer
- View all pins & technical details
- Triage pins (include/exclude)
- Execute AI fixes & copy agent prompts
Tester
- Submit new feedback & pins from app
- View approved pin feedback
- 🛡️ Cannot consume AI credits (Safe)
Configuration API Reference
| Option | Type | Default | Description |
|---|---|---|---|
| apiKey | String | Required | Project API key starting with snag_live_... |
| mode | SnappySnagMode | user | Operation mode: user (clean user feedback) or dev (shows duplicate warnings & tickets for QA). |
| showTriggerButton | bool | false | Whether to display the floating overlay capture button. |
| enabled | bool | true | Master switch. When false, suppresses overlay and shake listeners completely. |
| user | SnappySnagUser? | null | User identity (email, id, name). Matches dashboard member permissions. |
| packageName | String? | null | Locks API Key requests to your registered bundle identifier. |
| enableWidgetTree | bool | true | Traverses Flutter UI tree (up to 10 levels) with automatic PII redaction. |
| enableLogging | bool | false | Suppresses verbose console logs during development. |
Production & Testing Strategies
SnappySnag supports both in-app public user feedback collection and internal QA testing workflows.
Works out-of-the-box in production releases. Floating buttons default to hidden, and Release mode automatically suppresses internal duplicate warnings & tickets. Calling startFeedbackMode from your settings menu is the industry standard.
// 設定やヘルプメニューから呼び出し:
ListTile(
leading: const Icon(Icons.feedback_outlined),
title: const Text('ご意見・不具合を報告'),
onTap: () => SnappySnag.startFeedbackMode(context: context),
)If company policy dictates that the SDK must be completely dormant in public store releases, pass a boolean flag to enabled. The simplest method is !kReleaseMode, or use --dart-define for TestFlight builds.
// パターン1: リリースビルドで完全自動停止（コード1行）
SnappySnag().initialize(
apiKey: 'YOUR_API_KEY',
enabled: !kReleaseMode,
);
// パターン2: TestFlightのみ有効化したい場合
// flutter build ipa --dart-define=ENABLE_SNAPPY_SNAG=true
const bool isTestFlight = bool.fromEnvironment('ENABLE_SNAPPY_SNAG', defaultValue: false);
SnappySnag().initialize(
apiKey: 'YOUR_API_KEY',
enabled: isTestFlight,
);Real-time Slack & Discord Notifications
Instantly broadcast feedback reports to your Slack or Discord channels. Interactive cards include direct deep links to open the ticket immediately on the web dashboard.
- Create an Incoming Webhook in your Slack workspace.
- Paste URL into Project Settings > Notifications tab.
- Click 'Send Test' to verify connection (auto-saves on success).
- Create a Webhook under Discord Channel Settings > Integrations.
- Paste URL into Project Settings > Notifications tab.
- Click 'Send Test' to verify connection (auto-saves on success).
Security & Project Language Localization
All Webhook URLs are encrypted with AES-256-GCM. Notification titles, labels, and formats are automatically localized according to your Project Language (Japanese / English) settings.
Frequently Asked Questions
Common questions about integration, safety, ecosystem coexistence, and AI agent usage.
Q.How does it differ from Sentry or Firebase Crashlytics? Can they be used together?
Yes, they can be used together seamlessly. Sentry and Crashlytics capture fatal crashes and stack traces passively. SnappySnag captures non-crash visual glitches, layout bugs, and human feedback with multi-point pins, pairing with AI coding agents to fix them immediately. They operate independently without conflict.
Q.Is it safe to deploy in live production App Store and Google Play builds?
Yes. In release builds, internal duplicate tickets and QA dialogs are automatically suppressed. The floating button is hidden by default. You can safely expose it as an in-app feedback channel via SnappySnag.startFeedbackMode(context) from your settings or help menu.
Q.Which AI coding agents support the generated fix prompts?
Cursor, Windsurf, Claude (Artifacts/Projects), GitHub Copilot, and ChatGPT. Any modern LLM or AI coding agent that accepts Markdown prompts can utilize the structured repro guides.
Q.What happens when free tier AI credits run out?
Feedback capture, multi-pin drop, and GitHub Issue sync remain 100% free and unlimited. To continue using AI auto-fix code suggestions without upgrading, simply bring your own Gemini API key (BYOK) in the project settings.
Q.Are passwords and Personally Identifiable Information (PII) protected?
Yes. SnappySnag's widget tree dumper automatically filters out password fields and sensitive input types. Testers can also draw redaction boxes over sensitive screen elements before submission.