A Chrome Extension that captures frontend context and exports it as LLM-optimized markdown. Works with OpenCode, GitHub Copilot, Claude Code, Cursor, and every other AI coding tool.
ClankerContext captures everything your AI coding tool needs to understand and fix frontend issues.
Point and click to capture the exact HTML of any element. The AI sees exactly what you're working with.
Grabs robust CSS selectors using data-testid, ARIA labels, IDs, and smart path-based fallbacks.
Captures JavaScript errors with full stack traces. The AI understands exactly what went wrong.
Logs failed API calls with status codes and URLs. Perfect for debugging API integration issues.
One-click export to LLM-optimized markdown. Copy to clipboard or download as a file.
Does nothing until you click "Start listening". Pause anytime. No background activity whatsoever.
Instantly copy element HTML and selectors to clipboard. No session needed, no issue to log.
Edit prompt templates to match your workflow. Use Mustache tokens for dynamic content.
Send context directly to OpenCode or VSCode. Auto-discover instances, auto-send on log.
ClankerContext exports raw markdown that any AI assistant can understand. No integrations needed — just paste or import.
ClankerContext is a 100% client-side application. No data is ever sent to any server. There's no telemetry, no analytics, no tracking — nothing. All captured data stays in your browser's IndexedDB until you export or clear it.
Don't take our word for it — the entire codebase is open source. Audit it yourself.
Click the extension icon and hit "Start listening" to begin monitoring console errors and network requests.
Click "Modify with AI" or "Fix with AI", describe what you want, then click on the relevant element.
Copy to clipboard, download as a file, or send directly to OpenCode/VSCode. Use Quick Select for instant element capture without logging.
Yes! ClankerContext works with any AI coding tool that accepts text input. It exports standard markdown containing HTML snippets, CSS selectors, console errors with stack traces, and failed network requests. Just paste the exported markdown into Claude Code, Cursor, GitHub Copilot, Kilo Code, OpenCode, Windsurf, Aider, or any other AI assistant. No special integrations required.
Absolutely not. ClankerContext is a 100% client-side Chrome extension. There are no servers, no APIs, no backend whatsoever. All data is stored locally in your browser's IndexedDB and is never transmitted anywhere. There's zero telemetry, zero analytics, zero tracking. The extension is completely open source, so you can verify this yourself by reading the code.
No, it's completely free. ClankerContext is open source software released under the MIT license. There are no premium tiers, no subscriptions, no hidden costs. You get all features for free, forever.
No account required. Just install the extension and start using it immediately. There's no sign-up, no login, no email required. The extension works entirely offline and doesn't need any external services.
When you select an element, ClankerContext captures: the element's HTML (with surrounding context), a robust CSS selector for identifying the element, the current page URL, all console errors and exceptions that occurred during your session (with full stack traces), and any failed network requests (non-2XX status codes). This gives AI coding tools complete context to understand and fix frontend issues.
Not at all. ClankerContext has zero footprint until you explicitly click "Start listening". Even when active, it uses Chrome's built-in DevTools Protocol for efficient error capture. You can pause monitoring anytime, which completely stops all background activity. The extension is designed to stay out of your way.
ClankerContext uses a smart prioritization system: it first looks for data-testid
attributes (most reliable), then unique IDs, then ARIA labels, and finally falls back to
path-based selectors using tag names and nth-child positions. This ensures AI tools get
selectors that are both specific and resilient to minor DOM changes.
Quick Select is lightweight—click the pointer icon, select element(s), and the HTML and selectors are instantly copied to your clipboard. No session required, no issue stored. Logging an issue creates a full context report that includes your description, console errors with stack traces, failed network requests, and uses your custom prompt template. Use Quick Select for quick reference; log issues for comprehensive debugging context.
Yes! Go to Settings > Prompts to edit the Fix and Enhancement templates.
Templates use Mustache syntax with tokens like {{issue.user_prompt}},
{{elements_markdown}}, {{console_errors_markdown}}, and conditional
blocks like {{#console_errors_present}}...{{/console_errors_present}}.
You can also configure custom HTML attributes in Settings to capture additional context.
Install ClankerContext and start giving your AI tools the context they deserve.
Free forever. No account required.