Integrator Skill

Overview

The integrator skill provides a structured methodology for connecting disparate systems. Whether embedding a UI (like Grafana), synchronizing data (ERP sync), or handling events (Webhooks), this skill guides through research, pattern selection, security, and implementation.

Integration Workflow

Follow this 4-step process for any integration task:

1. Research & Feasibility

• •Goal: Understand the external system's capabilities.
• •Actions:
  • •Identify Integration Points: API (REST/GraphQL), SDK, or UI Embedding (IFrame)?
  • •Check Authentication: OAuth2, API Keys, mTLS?
  • •Deliverable: "Integration Strategy Brief" listing feasible methods.

2. Pattern Selection

Choose the right pattern based on requirements:

Pattern A: UI Embedding (e.g., Grafana, PowerBI)

• •Use Case: Displaying external views directly in your app.
• •Key Considerations:
  • •Method: IFrame vs. JavaScript SDK.
  • •Security: CSP (Content Security Policy), X-Frame-Options headers.
  • •Auth: Embedding with JWT/Auth Proxy to avoid double login.

Pattern B: Data Synchronization (e.g., ERP, CRM)

• •Use Case: Keeping local database in sync with external source.
• •Key Considerations:
  • •Direction: One-way (Read-only) vs. Bi-directional.
  • •Frequency: Real-time (Webhooks) vs. Batch (Cron Jobs).
  • •Idempotency: Handling duplicate events.

Pattern C: Proxy & Gateway

• •Use Case: Hiding API keys or transforming data before it hits the frontend.
• •Key Considerations:
  • •Middleware to inject secrets.
  • •Rate limiting and caching.

3. Security & Governance

• •Never expose secrets in the frontend.
• •Use Environment Variables for API Keys/Secrets.
• •Implement Least Privilege access for the integration user.

4. Implementation Steps

1. •PoC: Connect to the sandbox/dev environment.
2. •Auth Flow: Implement the handshake (e.g., OAuth dance).
3. •Data mapping: Transform external DTOs to internal models.
4. •Error Handling: Retry logic for network failures.

Example: Grafana Integration

When asked to "Integrate Grafana Dashboard":

1. •Research: Check Grafana "Embed" docs.
2. •Pattern: UI Embedding (IFrame).
3. •Security:
   • •Enable allow_embedding in Grafana config.
   • •Use "Auth Proxy" or JWT URL authentication to log the user in automatically.
4. •Implementation:
   • •Create a React component using an iframe.
   • •Source URL: https://grafana.example.com/d/XYZ/dashboard?kiosk&orgId=1.
   • •Ensure SSL matches (no mixed content).