### Prompt Engineering Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/getting-started.md

Illustrates effective prompt engineering techniques for AI models, emphasizing specificity, providing context, and using examples for better results.

```Prompt Engineering
Bad:  "Analyze this"
Good: "Analyze the sentiment and identify the main topic in 1-2 sentences"

Bad:  "Translate this"
Good: "Translate this English text to Spanish, maintaining formal tone"

Classify this review as Positive, Negative, or Neutral.

Examples:
"Great product!" → Positive
"Terrible service" → Negative
"It's okay" → Neutral

Review: {input}
```

--------------------------------

### Tutorial: Create Text Analyzer App

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/getting-started.md

Step-by-step guide to building a simple text analysis application in Opal AI, including adding input, sentiment analysis, key points extraction, and output formatting nodes.

```Opal AI Workflow
1. Click "Create New" → Choose "Blank Workflow"

2. Add "Text Input" node
   Label: "Text to Analyze"
   Set as multiline input

3. Add "AI Model" node
   Connect to Text Input
   Configure prompt:
     Analyze the sentiment of this text:
     {input}

     Return: Positive, Negative, or Neutral

4. Add another "AI Model" node
   Connect to Text Input
   Configure prompt:
     Extract 3 key points from this text:
     {input}

     Format as bullet points.

5. Add "Output" node
   Connect both AI models
   Configure template:
     Sentiment: {sentiment}

     Key Points:
     {keypoints}

6. Click "Test" button, enter sample text, review results.
7. Name your app, add description, choose sharing settings, click "Save".
```

--------------------------------

### Natural Language App Description

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/getting-started.md

Example of describing an AI application's functionality using natural language, demonstrating how Opal AI can interpret user requests.

```Natural Language
"Create an app that takes a URL, fetches the content,
summarizes it, and translates the summary to Spanish"

"Add a step that extracts key statistics"
"Make the summary shorter"
"Also translate to French"
"Add error handling for invalid URLs"
```

--------------------------------

### Example Chrome Extension Queries

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CHROME_DOCS_INTEGRATION.md

A collection of example user queries that would trigger the AI assistant to provide Chrome Extension documentation and solutions.

```text
"How do I create a Chrome Extension manifest?"
"Show me how to use chrome.storage API"
"How to send messages between content script and background?"
"Fix 'Could not establish connection' error"
"How to request permissions at runtime?"
"Create a Chrome Extension popup"
"Debug service worker in Chrome Extension"
```

--------------------------------

### Context7 Integration - Get Library Docs (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CONTEXT7_SETUP.md

Demonstrates how to use the Context7Integration class to fetch documentation for a specific library, like Next.js. It allows specifying topics and the number of tokens for the documentation retrieval. This requires an API key for higher rate limits.

```javascript
const context7 = new Context7Integration(apiKey);
const docs = await context7.getLibraryDocs('/vercel/next.js', {
    topic: 'routing',
    tokens: 5000
});
```

--------------------------------

### Running GitHub MCP Server

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MCP_SETUP_COMPLETE.md

Command to start the GitHub MCP server. This server provides tools for repository management, issue/PR automation, CI/CD, code analysis, and more.

```bash
npx @modelcontextprotocol/server-github
```

--------------------------------

### AI Assistant Workflow Explanation

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

Details the step-by-step process of how the n8n AI Assistant handles user messages, from capturing input to sending responses via OpenAI or n8n.

```text
1. **User sends message** → Floating widget captures it
2. **Message sent to background.js** → Via Chrome messaging
3. **Background tries n8n workflow** → If configured
4. **Falls back to OpenAI API** → Direct API call
5. **Response displayed** → In the chat window
```

--------------------------------

### Troubleshooting: AI Not Responding

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

A checklist for diagnosing why the AI assistant might not be responding, covering API key issues, internet connection, and extension loading problems.

```text
1. **API Key Missing**
   - Message: "Please configure your OpenAI API key..."
   - Solution: Add your OpenAI API key in settings

2. **Invalid API Key**
   - Message: "I need a valid OpenAI API key..."
   - Solution: Check your API key is correct and has credits

3. **No Internet Connection**
   - Message: "Error connecting to OpenAI..."
   - Solution: Check your internet connection

4. **Extension Not Loaded**
   - No floating button visible
   - Solution: Reload the extension in chrome://extensions/
```

--------------------------------

### Example n8n CLI Queries

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/N8N_DOCS_INTEGRATION.md

Illustrative examples of user queries that would trigger the n8n documentation lookup within the AI Assistant.

```plaintext
"How do I create a webhook in n8n?"
"Show me an n8n workflow that processes form data"
"How to use expressions in n8n to transform data?"
"Create an n8n automation for Slack notifications"
"Debug my n8n workflow execution error"
"Best practices for n8n error handling"
```

--------------------------------

### Common Workflow Patterns

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/getting-started.md

Visual representations of fundamental workflow patterns used in Opal AI, including sequential, parallel, conditional logic, and loop patterns.

```Workflow Patterns
Sequential Processing
Input → Process A → Process B → Output

Parallel Processing
       ┌→ Process A ─┐
Input ─┤             ├→ Combine → Output
       └→ Process B ─┘

Conditional Logic
Input → Condition → Yes → Process A → Output
                  → No  → Process B → Output

Loop Pattern
Input → Process → Check → Not Done → Process (loop)
                        → Done → Output
```

--------------------------------

### Troubleshooting: Common Issues & Fixes

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

A table summarizing common problems with the n8n AI Assistant and their corresponding fixes, including chat not opening, missing buttons, and message sending errors.

```text
| Issue | Symptom | Fix |
|---|---|---|
| Chat not opening | Button clicks don't work | Refresh the page |
| No floating button | Widget missing | Check if extension is enabled |
| Messages not sending | Nothing happens on send | Open console (F12) check for errors |
| API errors | Error messages in chat | Verify API key in settings |
```

--------------------------------

### Manifest V3 Example with Storage and Tabs Permissions

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CHROME_DOCS_INTEGRATION.md

An example of a Chrome Extension Manifest V3 file requesting storage and tabs permissions. This is a fundamental configuration for many extensions.

```json
{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "permissions": [
    "storage",
    "tabs"
  ]
}
```

--------------------------------

### n8n Integration Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

Optional configuration steps for integrating the AI assistant with a local n8n instance. This involves setting webhook and integration server URLs in the extension's settings.

```text
1. Set "n8n Webhook URL" in settings
2. Set "Integration Server URL" to `http://localhost:3000`
3. The assistant will try n8n workflows first
```

--------------------------------

### Running Playwright MCP Server

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MCP_SETUP_COMPLETE.md

Command to start the Playwright MCP server. This server enables browser automation, web scraping, screenshot capture, page interaction, and UI testing.

```bash
npx @playwright/mcp@latest
```

--------------------------------

### Browser Console Debugging

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

Guidance on how to use the browser's developer console (F12) to find error messages and troubleshoot issues with the n8n AI Assistant.

```text
1. Check the browser console (F12 → Console tab)
2. Look for error messages in red
3. Verify all settings are saved
4. Try reloading the extension
5. Refresh the webpage
```

--------------------------------

### Integration Server: Run/Develop

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Commands to start the Integration Server. 'npm start' runs the server, while 'npm run dev' enables development mode with automatic code reloading.

```bash
npm start
# or for development with auto-reload
npm run dev
```

--------------------------------

### Chrome Extension Developer Mode Activation

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

Instructions to enable developer mode in Chrome extensions to load unpacked extensions. This is a prerequisite for installing custom Chrome extensions.

```text
1. Open Chrome and go to `chrome://extensions/`
2. Enable "Developer mode" (top right toggle)
3. Click "Load unpacked"
4. Select the folder: `D:\Chrome Extention n8n`
```

--------------------------------

### Integration Server: Install Dependencies

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Installs Node.js dependencies for the Integration Server. This is required to run the server and its associated services.

```bash
cd integration-server
npm install
```

--------------------------------

### Desktop Assistant: Run/Develop

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Commands to start the Desktop Assistant application. 'npm start' runs the production build, while 'npm run dev' enables development mode with auto-reloading.

```bash
npm start
# or for development
npm run dev
```

--------------------------------

### Run Opal Workflow with Puppeteer (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

An example using Puppeteer to automate browser interaction with an Opal workflow. It navigates to a workflow URL, inputs data, triggers execution, and captures the output.

```javascript
const puppeteer = require('puppeteer');

async function runOpalWorkflow(workflowUrl, inputData) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to Opal workflow
  await page.goto(workflowUrl);

  // Input data
  await page.type('#input-field', inputData);

  // Run workflow
  await page.click('#run-button');

  // Wait for results
  await page.waitForSelector('#output');

  // Extract results
  const result = await page.$eval('#output', el => el.textContent);

  await browser.close();
  return result;
}
```

--------------------------------

### Desktop Assistant: Build for Distribution

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Builds the Desktop Assistant application for distribution. The compiled installers will be placed in the '/dist' directory.

```bash
npm run build
# Creates installers in /dist
```

--------------------------------

### Claude CLI MCP Server Management Commands

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MCP_SETUP_COMPLETE.md

A set of commands for managing MCP servers using the Claude CLI. These include listing, adding, removing, and getting details for configured servers.

```bash
# List all configured servers
claude mcp list

# Add a new server
claude mcp add <name> <command> [args...]

# Remove a server
claude mcp remove <name>

# Get server details  
claude mcp get <name>
```

--------------------------------

### OpenAI API Key Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/AI_ASSISTANT_SETUP.md

Steps to configure the OpenAI API key within the n8n AI Assistant extension settings. This is crucial for the AI to function, requiring a valid API key and verification.

```text
1. Click the extension icon in toolbar
2. Click "⚙️ Settings / API Keys" button
3. Enter your OpenAI API key in the "OpenAI API Key" field
4. Click "Test OpenAI Connection" to verify it works
5. Click "Save Settings"
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CLAUDE.md

Installs all necessary project dependencies using npm. This is a foundational step before running other development commands.

```bash
npm install
```

--------------------------------

### Desktop Assistant: Install Dependencies

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Installs Node.js dependencies for the Desktop Assistant (Electron) application. This is a necessary step before running or building the application.

```bash
cd desktop-assistant
npm install
```

--------------------------------

### Desktop Assistant Development Commands (Bash)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Command to start the development server for the Desktop Assistant, which includes auto-reloading capabilities.

```bash
cd desktop-assistant
npm run dev  # Runs with auto-reload
```

--------------------------------

### Execute Query and Insert Data in PostgreSQL with n8n

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Demonstrates interacting with a PostgreSQL database using n8n nodes. Includes examples for executing a SELECT query with parameters and inserting new data into a table, specifying schema, columns, and return fields.

```javascript
{
  "name": "Postgres",
  "type": "n8n-nodes-base.postgres",
  "parameters": {
    "operation": "executeQuery",
    "query": "SELECT * FROM users WHERE status = $1",
    "additionalFields": {
      "queryParams": "active",
      "mode": "independently", // or "transaction"
      "retryOnFail": true,
      "continueOnFail": false
    }
  }
}

// Insert operation
{
  "operation": "insert",
  "schema": "public",
  "table": "users",
  "columns": "name,email,status",
  "returnFields": "*"
}
```

--------------------------------

### Complete Chrome Extension Manifest V3 Example

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/chrome-extension-docs/manifest-v3.md

A comprehensive example of a Chrome Extension manifest file using Manifest Version 3, demonstrating various configurations like permissions, background scripts, content scripts, action UI, and more.

```json
{
  "manifest_version": 3,
  "name": "Complete Extension Example",
  "version": "1.0.0",
  "description": "A complete Chrome Extension example",

  "minimum_chrome_version": "102",

  "permissions": [
    "storage",
    "tabs",
    "activeTab",
    "notifications",
    "contextMenus",
    "scripting",
    "alarms"
  ],

  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],

  "background": {
    "service_worker": "background.js",
    "type": "module"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"],
      "run_at": "document_idle"
    }
  ],

  "action": {
    "default_popup": "popup.html",
    "default_title": "Click to open popup",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },

  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },

  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },

  "web_accessible_resources": [
    {
      "resources": ["inject.js", "styles/*.css"],
      "matches": ["<all_urls>"]
    }
  ],

  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      }
    },
    "run-command": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Run custom command"
    }
  },

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}
```

--------------------------------

### n8n Workflow Pattern Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/core-concepts.md

Provides examples of common workflow patterns in n8n, including ETL (Extract, Transform, Load), Webhook Processing, Scheduled Tasks, Error Handling, and Conditional Routing, shown as sequence diagrams.

```text
1. ETL (Extract, Transform, Load)
```
API → Transform → Database
```

2. Webhook Processing
```
Webhook → Validate → Process → Response
```

3. Scheduled Tasks
```
Schedule → Fetch → Process → Notify
```

4. Error Handling
```
Main Flow → Error → Notification
```

5. Conditional Routing
```
Input → IF → Route A
          ↓
        Route B
```
```

--------------------------------

### Manifest V3 Match Patterns Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/chrome-extension-docs/manifest-v3.md

Provides examples of 'match patterns' used in Manifest V3 for specifying URLs where content scripts should be injected or permissions should apply.

```json
// Examples of match patterns
"matches": [
  "http://*/*",           // All HTTP sites
  "https://*.google.com/*", // All Google subdomains
  "*://mail.google.com/*", // Gmail on any protocol
  "<all_urls>"            // All URLs (requires broad host permission)
]
```

--------------------------------

### Integration Server Development Commands (Bash)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Command to start the development server for the Integration Server, utilizing nodemon for automatic reloading upon file changes.

```bash
cd integration-server
npm run dev  # Uses nodemon for auto-reload
```

--------------------------------

### Conceptual Analytics Tracking (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

A JavaScript example illustrating how to track workflow performance and errors using a conceptual analytics object. It shows functions for tracking workflow executions with details like ID, input, output, and duration, as well as logging errors.

```javascript
// Conceptual analytics integration
const analytics = {
  trackWorkflowRun: (workflowId, input, output, duration) => {
    // Send to analytics platform
    gtag('event', 'workflow_execution', {
      workflow_id: workflowId,
      execution_time: duration,
      success: true
    });
  },

  trackError: (workflowId, error) => {
    // Log errors for monitoring
    console.error(`Workflow ${workflowId} failed:`, error);
  }
};
```

--------------------------------

### Desktop Assistant: Environment Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Configuration example for the Desktop Assistant's environment variables. It includes API keys for OpenAI, ElevenLabs, and Google Cloud services.

```env
OPENAI_API_KEY=your_openai_key
ELEVENLABS_API_KEY=your_elevenlabs_key
GOOGLE_CLOUD_KEY=your_google_key
```

--------------------------------

### Manifest V3 Host Permissions Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/chrome-extension-docs/manifest-v3.md

Examples of 'host_permissions' that can be specified in Manifest V3 to grant access to specific origins.

```json
"host_permissions": [
  "https://*/",
  "http://localhost/*",
  "*://*.example.com/*"
]
```

--------------------------------

### Generate Blog Post Outline

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Creates a detailed blog post outline based on a topic and research results. The outline includes an engaging title, section headers, and key points for each section.

```n8n
Create a detailed blog post outline:
Topic: {topic}
Research: {research_results}

Include:
- Engaging title
- Section headers
- Key points per section
```

--------------------------------

### Start Playwright MCP Server

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CLAUDE.md

Starts the Playwright MCP (Model Context Protocol) server in headless mode for automated browser interactions.

```bash
npm run mcp:start
```

--------------------------------

### Integration Server: Environment Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Configuration example for the Integration Server's environment variables. It specifies ports, webhook URLs, database connections, and JWT secrets.

```env
PORT=3000
WS_PORT=8766
N8N_WEBHOOK_URL=http://localhost:5678
MONGODB_URI=mongodb://localhost:27017/n8n-assistant
REDIS_URL=redis://localhost:6379
JWT_SECRET=your_jwt_secret
```

--------------------------------

### Start Playwright MCP Server with Visible Browser

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CLAUDE.md

Starts the Playwright MCP server with the browser visible, useful for debugging automation tasks.

```bash
npm run mcp:headed
```

--------------------------------

### Chrome Extension: Install Dependencies

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MASTER-README.md

Installs Node.js dependencies for the Chrome Extension. Primarily used for development tools and potentially managing build processes.

```bash
cd "D:\Chrome Extention n8n"
npm install  # Optional, for dev tools
```

--------------------------------

### Write Blog Post Section

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Writes a specific section of a blog post based on the outline, desired tone, and target word count. It aims to make the content engaging and informative.

```n8n
Write section {section_number}:
Outline: {section_outline}
Tone: {writing_tone}
Word Count: {target_words}

Make it engaging and informative.
```

--------------------------------

### Summarize Text into Bullet Points

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Summarizes provided text into 3-5 bullet points, focusing on main ideas and key information. This node is useful for condensing lengthy content.

```n8n
Summarize this text in 3-5 bullet points:
{translated_text}

Focus on main ideas and key information.
```

--------------------------------

### JavaScript Optional Chaining for Safe Access

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Explains and shows examples of JavaScript's optional chaining operator (`?.`) for safely accessing nested properties or calling methods on potentially null or undefined objects, preventing runtime errors. Ideal for unpredictable data structures.

```javascript
{{ $json.user?.profile?.email }}
{{ $json.data?.items?.[0]?.name }}
{{ $json.func?.() }}
```

--------------------------------

### JavaScript: Memory Management Example

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Shows how to manage memory by clearing large variables after they are no longer needed. This helps prevent memory leaks in long-running workflows.

```javascript
// Clear large variables when done
let largeData = await fetchLargeDataset();
// Process data
processedData = transform(largeData);
largeData = null; // Clear memory
```

--------------------------------

### Ask about n8n Workflows

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/N8N_DOCS_INTEGRATION.md

Users can query the assistant about creating scheduled workflows within n8n. This functionality helps users understand and implement automated processes.

```natural language
How do I create a scheduled workflow in n8n?
```

--------------------------------

### Perform Statistical Analysis on Data

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Performs statistical analysis on validated data, calculating metrics such as mean, median, mode, standard deviation, correlations, and trends.

```n8n
Perform statistical analysis on:
{validated_data}

Calculate:
- Mean, median, mode
- Standard deviation
- Correlations
- Trends
```

--------------------------------

### Research Blog Post Topic

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Researches a given topic for a blog post, targeting a specific audience. It provides key points, current trends, and common questions to inform content creation.

```n8n
Research this topic for a blog post:
Topic: {topic}
Target Audience: {audience}

Provide:
- Key points to cover
- Current trends
- Common questions
```

--------------------------------

### JavaScript: Debugging with Console Logs

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Provides examples of using `console.log` within n8n code nodes for debugging. It shows how to log input data, individual items, and custom debug information.

```javascript
// Add debug node
console.log('Input data:', $input.all());
console.log('Current item:', $json);

// Return debug info
return [{
  json: {
    debug: {
      inputCount: $input.all().length,
      firstItem: $input.first().json,
      timestamp: new Date().toISOString()
    },
    ...originalData
  }
}];
```

--------------------------------

### Generate Professional Email Response

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Generates a professional and concise email response based on the original email content, its detected sentiment, and urgency. It ensures all points are addressed.

```n8n
Generate a professional response to this email:
Original: {email_content}
Sentiment: {sentiment}
Urgency: {urgency}

Keep response concise and address all points.
```

--------------------------------

### Manual Trigger Configuration (n8n)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Configures a manual trigger node in n8n, allowing workflows to be started manually. It's useful for testing and can accept input data.

```json
{
  "name": "Manual Trigger",
  "type": "n8n-nodes-base.manualTrigger",
  "position": [250, 300]
}
```

--------------------------------

### Analyze Email Sentiment and Urgency

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Analyzes the sentiment (positive/negative/neutral) and urgency (high/medium/low) of an incoming email. This helps in prioritizing and tailoring responses.

```n8n
Analyze the sentiment and urgency of this email:
{email_content}

Return: Sentiment (positive/negative/neutral) and Urgency (high/medium/low)
```

--------------------------------

### Setting GitHub Personal Access Token

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/MCP_SETUP_COMPLETE.md

Environment variable to set for enabling GitHub MCP server to work with private repositories. Requires a valid GitHub Personal Access Token.

```bash
set GITHUB_PERSONAL_ACCESS_TOKEN=your_token_here
```

--------------------------------

### Request n8n Node Configuration Help

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/N8N_DOCS_INTEGRATION.md

This feature allows users to ask for guidance on configuring specific n8n nodes, such as the HTTP Request node. It simplifies the process of setting up integrations.

```natural language
Show me how to configure the HTTP Request node
```

--------------------------------

### Build n8n Workflow for Complex Scenarios

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/N8N_DOCS_INTEGRATION.md

The assistant can help users build n8n workflows for complex scenarios, such as processing GitHub webhooks. This assists in creating sophisticated automation pipelines.

```natural language
Build an n8n workflow for GitHub webhook processing
```

--------------------------------

### Using chrome.tabs.query API

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CHROME_DOCS_INTEGRATION.md

Demonstrates how to use the chrome.tabs.query API to retrieve information about tabs. This is a common API for interacting with browser tabs.

```javascript
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  var activeTab = tabs[0];
  var tabId = activeTab.id;
  console.log("Active tab ID:", tabId);
});
```

--------------------------------

### WebSocket Connection for Workflow Execution (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

Conceptual JavaScript code for a WebSocket connection to interact with Opal workflows. It demonstrates sending an execution request and logging received results.

```javascript
// Future WebSocket support
const ws = new WebSocket('wss://opal.example.com/workflow');

ws.on('open', () => {
  ws.send(JSON.stringify({
    action: 'execute',
    workflow: 'workflow-id',
    input: data
  }));
});

ws.on('message', (result) => {
  console.log('Workflow result:', result);
});
```

--------------------------------

### File Read/Write Operations

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Demonstrates n8n nodes for reading and writing binary files to disk. Specifies file paths, data property names, and write options like appending.

```javascript
// Read Binary File
{
  "name": "Read Binary File",
  "type": "n8n-nodes-base.readBinaryFile",
  "parameters": {
    "filePath": "/path/to/file.pdf",
    "dataPropertyName": "document"
  }
}
```

```javascript
// Write Binary File
{
  "name": "Write Binary File",
  "type": "n8n-nodes-base.writeBinaryFile",
  "parameters": {
    "fileName": "/path/to/output.pdf",
    "dataPropertyName": "document",
    "options": {
      "append": false
    }
  }
}
```

--------------------------------

### Aggregating Data with Code Node (n8n JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Shows how to aggregate data using the Code node in n8n. This example calculates the total amount, item count, and average from a dataset.

```javascript
// Calculate totals
const items = $input.all();
const total = items.reduce((sum, item) =>
  sum + item.json.amount, 0
);

return [{
  json: {
    totalAmount: total,
    itemCount: items.length,
    average: total / items.length
  }
}];
```

--------------------------------

### n8n Expression Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/core-concepts.md

Demonstrates how to use n8n expressions for dynamic data access, including referencing previous node data, current item data, performing JavaScript calculations, and accessing environment variables.

```javascript
// Access data from previous nodes
{{ $node["NodeName"].json.fieldName }}

// Access current item data
{{ $json.fieldName }}

// Use JavaScript
{{ $json.price * 1.2 }}

// Access environment variables
{{ $env.API_KEY }}
```

--------------------------------

### n8n Documentation File Structure

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/N8N_DOCS_INTEGRATION.md

The hierarchical organization of n8n documentation files, including core concepts, workflow basics, node references, and expressions.

```tree
n8n-docs/
── README.md 
── core-concepts.md 
── workflow-basics.md 
── nodes-reference.md 
── expressions.md
```

--------------------------------

### Conditional Routing Logic in JavaScript

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Demonstrates how to route processing based on the type of input using JavaScript's conditional statements. This is useful for creating flexible workflows that adapt to different data formats.

```javascript
// Condition Node
IF input.type == "text" THEN route_to: "Text Processor"
ELSE IF input.type == "image" THEN route_to: "Image Analyzer"
ELSE route_to: "Generic Handler"
```

--------------------------------

### Rate Limiter Implementation (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

A JavaScript `RateLimiter` class to control the frequency of requests. It tracks request timestamps within a time window and prevents execution if the limit is reached.

```javascript
class RateLimiter {
  constructor(maxRequests, timeWindow) {
    this.maxRequests = maxRequests;
    this.timeWindow = timeWindow;
    this.requests = [];
  }

  async canExecute() {
    const now = Date.now();

    // Remove old requests
    this.requests = this.requests.filter(
      time => now - time < this.timeWindow
    );

    if (this.requests.length < this.maxRequests) {
      this.requests.push(now);
      return true;
    }

    return false;
  }
}
```

--------------------------------

### n8n Other Contextual Variables

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Lists and explains other useful contextual variables in n8n expressions, including item index, run index, node version, item position, and context data.

```javascript
{{ $itemIndex }}
{{ $runIndex }}
{{ $nodeVersion }}
{{ $position() }}
{{ $context }}
```

--------------------------------

### GraphQL Query Execution

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Configures an n8n GraphQL node to execute a GraphQL query. Allows specifying the endpoint, query string, and variables for dynamic data fetching.

```javascript
{
  "name": "GraphQL",
  "type": "n8n-nodes-base.graphql",
  "parameters": {
    "endpoint": "https://api.example.com/graphql",
    "requestFormat": "graphql",
    "query": "\n      query GetUser($id: ID!) {\n        user(id: $id) {\n          name\n          email\n          posts {\n            title\n            content\n          }\n        }\n      }\n    ",
    "variables": {
      "id": "={{ $json.userId }}"
    }
  }
}
```

--------------------------------

### Translate Text to English

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Translates a given text from a detected language into English, aiming to maintain the original tone and context. It requires the detected language code as input.

```n8n
Translate this {detected_language} text to English:
{input}

Maintain the original tone and context.
```

--------------------------------

### n8n $() Function Syntax

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Provides alternative syntax for accessing node data in n8n using the $() function. Examples show retrieving fields from the first, last, or specific items of a node.

```javascript
{{ $("NodeName").first().json.field }}
{{ $("NodeName").last().json.field }}
{{ $("NodeName").all()[0].json.field }}
{{ $("NodeName").item.json.field }}
```

--------------------------------

### JSON Manifest Popup Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/POPUP-FIX-GUIDE.md

Illustrates how to configure the default popup file in the Chrome extension's manifest.json, showing both the problematic and fixed settings.

```json
"default_popup": "popup/popup-enhanced.html"
```

```json
"default_popup": "popup/popup-simple.html"
```

--------------------------------

### Detect Language in Text

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/workflow-examples.md

Detects the language of a given text input and returns a language code (e.g., 'en', 'es', 'fr'). This is a foundational step for multi-language text processing.

```n8n
Detect the language of this text:
{input}

Return only the language code (e.g., en, es, fr)
```

--------------------------------

### n8n Data Transformation Examples

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/core-concepts.md

Illustrates common data transformation techniques using n8n expressions, such as mapping arrays, filtering items based on conditions, and reducing arrays to a single value.

```javascript
// Map array
{{ $json.items.map(item => item.name) }}

// Filter
{{ $json.items.filter(item => item.active) }}

// Reduce
{{ $json.items.reduce((sum, item) => sum + item.price, 0) }}
```

--------------------------------

### CSV to Opal Data Transformation (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

Shows how to parse CSV data and format each row into a string for Opal input. It assumes a `parseCSV` function is available and maps each row's elements.

```javascript
// Parse CSV
const csvData = parseCSV(csvString);

// Format for Opal
const opalInput = csvData.map(row =>
  `Record: ${row.join(', ')}`
).join('\n');
```

--------------------------------

### HTTP Request Configuration

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Sets up an n8n HTTP Request node for making POST requests. Includes configurations for authentication, headers, JSON body, and advanced options like retries and timeouts.

```javascript
{
  "name": "HTTP Request",
  "type": "n8n-nodes-base.httpRequest",
  "parameters": {
    "method": "POST",
    "url": "https://api.example.com/endpoint",
    "authentication": "genericCredentialType",
    "genericAuthType": "httpHeaderAuth",
    "sendHeaders": true,
    "headerParameters": {
      "parameters": [
        {
          "name": "Content-Type",
          "value": "application/json"
        }
      ]
    },
    "sendBody": true,
    "bodyType": "json",
    "jsonBody": "={{ JSON.stringify($json) }}",
    "options": {
      "retry": {
        "maxTries": 3,
        "waitBetweenTries": 1000,
        "maxRetryAfter": 5000,
        "retryOnStatusCode": "429,500,502,503,504"
      },
      "timeout": 10000,
      "followRedirects": true,
      "ignoreSSLIssues": false
    }
  }
}
```

--------------------------------

### JSON to Opal Data Transformation (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

Demonstrates transforming JSON data into a format suitable for Opal input. It extracts user and request details from a JSON object and formats them as a string.

```javascript
const jsonData = {
  "user": "John Doe",
  "request": "Analyze my data"
};

// Transform for Opal input
const opalInput = `
User: ${jsonData.user}
Request: ${jsonData.request}
`;
```

--------------------------------

### Mapping Arrays with Code Node (n8n JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Provides an example of mapping arrays using the Code node in n8n. It transforms user data by creating new fields and formatting existing ones.

```javascript
// In Code node
const users = $json.users;
return users.map(user => ({
  json: {
    id: user.id,
    fullName: `${user.firstName} ${user.lastName}`,
    email: user.email.toLowerCase(),
    isActive: user.status === 'active'
  }
}));
```

--------------------------------

### Wait Node Configurations

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Provides configurations for the n8n Wait node, allowing pauses based on time intervals or waiting for webhook events. Includes options for retry timeouts and response data handling.

```javascript
{
  "name": "Wait",
  "type": "n8n-nodes-base.wait",
  "parameters": {
    "resume": "timeInterval",
    "amount": 5,
    "unit": "seconds"
  }
}
```

```javascript
{
  "resume": "webhook",
  "options": {
    "httpMethod": "POST",
    "responseData": "allEntries",
    "waitTimeoutDuration": 3600
  }
}
```

--------------------------------

### Filtering Data with Code Node (n8n JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/workflow-basics.md

Demonstrates filtering data based on specific criteria using the Code node in n8n. This example filters for active users older than 18.

```javascript
// Filter active users
const items = $input.all();
return items.filter(item =>
  item.json.status === 'active' &&
  item.json.age >= 18
);
```

--------------------------------

### Opal Workflow Monitoring Class (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

A JavaScript class `OpalMonitor` designed for tracking workflow metrics such as executions, successes, failures, and average duration. It includes methods to log executions and update metrics.

```javascript
class OpalMonitor {
  constructor() {
    this.metrics = {
      executions: 0,
      successes: 0,
      failures: 0,
      avgDuration: 0
    };
  }

  logExecution(workflow, duration, success) {
    this.metrics.executions++;

    if (success) {
      this.metrics.successes++;
    } else {
      this.metrics.failures++;
    }

    // Update average duration
    this.updateAvgDuration(duration);

    // Send to monitoring service
    this.sendMetrics();
  }
}
```

--------------------------------

### Configure Schedule Trigger in n8n

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Configures a schedule trigger node to execute workflows at specified intervals using cron expressions. The example shows setting the trigger to run every 2 hours.

```javascript
{
  "name": "Schedule",
  "type": "n8n-nodes-base.scheduleTrigger",
  "parameters": {
    "rule": {
      "interval": [
        {
          "field": "cronExpression",
          "expression": "0 */2 * * *" // Every 2 hours
        }
      ]
    }
  }
}
```

--------------------------------

### XML Conversion (JSON to XML / XML to JSON)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/nodes-reference.md

Sets up an n8n XML node for converting between JSON and XML formats. Allows customization of output formatting, attribute merging, and handling of XML attributes.

```javascript
{
  "name": "XML",
  "type": "n8n-nodes-base.xml",
  "parameters": {
    "mode": "jsonToxml", // or "xmlToJson"
    "options": {
      "format": true,
      "headless": false,
      "ignoreAttributes": false,
      "mergeAttributes": true
    }
  }
}
```

--------------------------------

### JavaScript Ternary Operator for Conditional Logic

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Provides examples of using the JavaScript ternary operator (condition ? value_if_true : value_if_false) for concise conditional assignments and transformations based on data values. Useful for simple branching logic.

```javascript
{{ $json.status === 'active' ? 'Yes' : 'No' }}
{{ $json.age >= 18 ? 'Adult' : 'Minor' }}
{{ $json.price > 100 ? $json.price * 0.9 : $json.price }}
```

--------------------------------

### JavaScript Object Operations

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Illustrates various JavaScript object manipulation techniques including getting keys, values, and entries, merging objects, and using the spread operator and destructuring for data modification. Essential for handling structured data.

```javascript
// Object methods
{{ Object.keys($json) }}
{{ Object.values($json) }}
{{ Object.entries($json) }}
{{ Object.assign({}, $json, {new: 'field'}) }}

// Spread operator
{{ {...$json, status: 'updated'} }}
{{ {...$json.user, ...($json.profile || {})} }}

// Destructuring
{{ (({name, email}) => ({name, email}))($json) }}
```

--------------------------------

### Clone Repository and Navigate

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/README.md

This command clones the GitHub repository for the Chrome extension template and then navigates into the newly created directory. It's the first step in setting up the project locally.

```bash
git clone https://github.com/yourusername/chrome-extension-template.git
cd chrome-extension-template
```

--------------------------------

### Debugging and Data Type Checking in n8n Expressions

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Provides examples for debugging within n8n Code nodes by logging to the console and returning formatted JSON. It also shows how to check the data type of fields, verify if a field is an array, and check for null or undefined values using JavaScript within n8n expressions.

```javascript
// Log to console (in Code nodes)
console.log('Debug:', $json);

// Return debug info
{{ JSON.stringify($json, null, 2) }}        // Pretty print JSON

// Check data type
{{ typeof $json.field }}                    // Get type
{{ Array.isArray($json.field) }}            // Check if array
{{ $json.field === null }}                  // Check null
{{ $json.field === undefined }}             // Check undefined
```

--------------------------------

### Batch Processing with Opal (JavaScript)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

Illustrates a batch processing strategy using JavaScript. It processes items in chunks, applies Opal processing to each item concurrently, includes rate limiting with a delay, and collects results.

```javascript
async function batchProcess(items) {
  const results = [];

  for (const batch of chunks(items, 10)) {
    const batchResults = await Promise.all(
      batch.map(item => processWithOpal(item))
    );
    results.push(...batchResults);

    // Rate limiting
    await delay(1000);
  }

  return results;
}
```

--------------------------------

### SQL Query for Database Input (SQL)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

This SQL snippet demonstrates a query to retrieve data from a database, which can then be formatted and used as input for an Opal workflow. It includes a conceptual step for processing and updating the database with results.

```sql
-- Query data
SELECT * FROM customers WHERE status = 'pending';

-- Format for Opal input
-- Process through Opal workflow
-- Update database with results
```

--------------------------------

### Chrome Storage API - JavaScript

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/chrome-extension-docs/chrome-apis.md

Manages data persistence across browser sessions using chrome.storage. Supports sync, local, and session storage with methods for setting, getting, removing, clearing data, and listening for changes. Also includes functionality to get bytes in use.

```javascript
// Storage API types
chrome.storage.sync    // Synced across devices (100KB total)
chrome.storage.local   // Local only (10MB total)
chrome.storage.session // Cleared when browser closes
chrome.storage.managed // Read-only, set by admin

// Set data
chrome.storage.sync.set({ key: 'value' }, () => {
  console.log('Value saved');
});

// Get data
chrome.storage.sync.get(['key'], (result) => {
  console.log('Value:', result.key);
});

// Get multiple keys
chrome.storage.sync.get(['key1', 'key2'], (result) => {
  console.log(result.key1, result.key2);
});

// Get all data
chrome.storage.sync.get(null, (items) => {
  console.log('All items:', items);
});

// Remove data
chrome.storage.sync.remove('key');
chrome.storage.sync.remove(['key1', 'key2']);

// Clear all data
chrome.storage.sync.clear();

// Listen for changes
chrome.storage.onChanged.addListener((changes, namespace) => {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(`${key}: ${oldValue} → ${newValue}`);
  }
});

// Get bytes in use
chrome.storage.sync.getBytesInUse(['key'], (bytes) => {
  console.log('Bytes used:', bytes);
});
```

--------------------------------

### Zapier/Make Integration Concept (YAML)

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/integration-guide.md

A conceptual YAML structure representing a workflow integration using platforms like Zapier or Make. It outlines a sequence of triggers and actions involving Gmail, custom webhooks, and Opal via browser automation.

```yaml
Trigger:
  platform: Gmail
  event: New Email

Action 1:
  platform: Custom Webhook
  data: Email content to Opal

Action 2:
  platform: Opal (via browser automation)
  workflow: Email Processor

Action 3:
  platform: Slack
  action: Send processed result
```

--------------------------------

### Handle OAuth2 Authentication with Chrome Identity API

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/chrome-extension-docs/chrome-apis.md

This snippet covers using the Chrome Identity API for OAuth2 authentication. It includes functions to get an authorization token, remove cached tokens, retrieve user profile information (email, ID), and launch the OAuth2 authorization flow, including getting the redirect URL.

```javascript
// Get auth token
chrome.identity.getAuthToken({ interactive: true }, (token) => {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
    return;
  }
  console.log('Auth token:', token);
});

// Remove cached token
chrome.identity.removeCachedAuthToken({ token: token }, () => {
  console.log('Token removed from cache');
});

// Get user info
chrome.identity.getProfileUserInfo((userInfo) => {
  console.log('Email:', userInfo.email);
  console.log('ID:', userInfo.id);
});

// Launch web auth flow
chrome.identity.launchWebAuthFlow({
  url: 'https://example.com/oauth/authorize?client_id=...', 
  interactive: true
}, (redirectUrl) => {
  console.log('Redirect URL:', redirectUrl);
});

// Get redirect URL for OAuth
const redirectUrl = chrome.identity.getRedirectURL();
console.log('Redirect URL:', redirectUrl);
```

--------------------------------

### n8n Date/Time Variables

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/n8n-docs/expressions.md

Shows how to use built-in date and time variables and functions in n8n expressions, such as $now, $today, and DateTime methods.

```javascript
{{ $now }}
{{ $today }}
{{ DateTime.now() }}
{{ DateTime.local() }}
```

--------------------------------

### Run Playwright MCP in Debug Mode with Traces

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/CLAUDE.md

Starts Playwright MCP in debug mode, generating traces to help diagnose issues during automation.

```bash
npm run mcp:debug
```

--------------------------------

### Opal Workflow Architecture Diagram

Source: https://github.com/cleanexpo/chrome-n8n-extention/blob/main/opal-ai-docs/README.md

Illustrates the basic flow of a workflow in Opal, showing how input prompts are processed by AI models and then handled as output.

```mermaid
graph LR
    A[Input Prompt] --> B(AI Model Processing)
    B --> C[Output Handler]
```