# Context-First Workflow UX — Enforce n8n Context Before AI Chat

## 📌 Idea
Build a "Context-First" UX flow that **forces** the user to have an active n8n workflow open before they can use ChatGPT/Gemini to edit it. This ensures the AI always knows which workflow to modify, preventing blind edits.

## 🗂 Codebase Scope
- **Root:** `D:\cnf\n8n_ai_agent`
- **Total files:** ~8 files affected
- **Affected:** `src/bg/`, `src/pages/Popup.vue`, `src/superassistant/`
- **Languages:** TypeScript, Vue
- **Size:** M

## 📊 Current State Analysis
- ✅ SuperAssistant content script already injects into 9 AI platforms (ChatGPT, Gemini, etc.)
- ✅ MCP Bridge already relays tool calls from content → background → McpService
- ✅ Adapters have `insertText()` and `submitForm()` methods for ChatGPT/Gemini
- ❌ **Missing:** No mechanism to capture active n8n workflow context
- ❌ **Missing:** No UX gate to prevent using ChatGPT without a workflow selected
- ❌ **Missing:** No context injection (workflow JSON) into AI chat input

## 🧩 Problem It Solves
Without knowing the `workflow_id`, the AI agent has no target — it can't know which workflow to update. The current flow would let users click "Run" on a tool call that has no workflow context, leading to errors or wrong updates.

## 💡 Core Concept
**UX Flow:**
1. User opens n8n workflow page → clicks Extension icon
2. Popup detects n8n tab → extracts `workflow_id` from URL → fetches workflow JSON via McpService
3. Popup shows workflow name + "Edit with ChatGPT" / "Edit with Gemini" buttons
4. User clicks → Extension opens AI chat tab → auto-injects context prompt with workflow JSON
5. AI responds with function_call → SuperAssistant renders Run button → executes on the correct workflow

**Key Technical Pieces:**
- Background state: `activeWorkflowContext` stored in `chrome.storage.session`
- Popup: URL detection + workflow fetch + platform launcher
- Content script: On load, ask background for context → inject into chat input
- MCP Bridge: Automatically attaches `workflowId` to tool calls

## 🔗 References
- Previous Phase: `plan/done/04_mcp_superassistant_merge_done.md`
- McpService: `src/services/McpService.ts` (has n8n API connection)
- Adapters: `src/superassistant/adapters.ts` (has insertText for ChatGPT/Gemini)

## 📋 Next Actions
- [ ] Feasibility evaluation (workflow-impossible)
- [ ] Build Popup UX for context capture
- [ ] Build context injection into content script
- [ ] Build workflow state management in background

---
_Captured: 2026-04-28 | Type: Codebase-Aware_
