Claude Code-Integration

Verbessern Sie Ihren Entwicklungs-Workflow mit KI-gestützter Unterstützung für Visiono-API-Integration.

Übersicht

Claude Code ist Anthropics offizielles CLI-Tool für Claude AI. Das Visiono-Plugin bietet kontextbewusste Hilfe bei Fotoanfragen, Smart Links, Webhook-Setup und Code-Generierung in mehreren Sprachen.

Voraussetzungen

Claude Code installiert
Visiono-Konto mit API-Zugang
Terminal-Zugriff

Plugin installieren

Vom Marketplace

Fügen Sie das Visiono-Plugin-Repository hinzu:

bash

/plugin marketplace add visiono-io/visiono-claude-plugin

Installieren Sie das Plugin:

bash

/plugin install visiono-api@visiono

Verifizierung

Installation bestätigen:

bash

/plugin list

Sie sollten visiono-api in der Liste der installierten Plugins sehen.

Was das Plugin bietet

Das Visiono-Plugin gibt Claude umfassendes Wissen über:

Kontext	Beschreibung
Fotoanfragen-API	Ablaufende Fotosammel-Links mit QR-Codes erstellen
Smart Links-API	Permanente Fotosammel-Workflows erstellen
Webhooks	Ereignistypen, Payload-Strukturen und Signaturverifizierung
Download-URLs	Eingereichte Fotos mit zeitlich begrenzten signierten URLs abrufen
Code-Beispiele	Sofort verwendbare Snippets in PHP, JavaScript und Python
Best Practices	QR-Code-Nutzung, Webhook-Sicherheit, Polling-Muster

Das Plugin verwenden

Nach der Installation aktiviert sich das Plugin automatisch, wenn Sie Visiono erwähnen oder nach Fotosammel-Workflows fragen.

API-Integrationshilfe

Fragen Sie Claude nach spezifischer Implementierungsanleitung:

Wie erstelle ich eine Fotoanfrage mit ablaufenden Links?

Zeig mir, wie ich einen Smart Link für Fahrzeuginspektionen erstelle

Wie bekomme ich den QR-Code für eine Fotoanfrage?

Code-Generierung

Sprachspezifische Beispiele anfordern:

Generiere eine PHP-Funktion zur Erstellung einer Fotoanfrage mit GPS-Pflicht

Erstelle einen JavaScript-Webhook-Handler mit Signaturverifizierung

Schreibe ein Python-Skript zum Download aller Fotos aus einer Einreichung

Webhook-Integration

Hilfe zur Webhook-Implementierung erhalten:

Wie verifiziere ich Visiono-Webhook-Signaturen in Node.js?

Zeig mir die Payload-Struktur für das photo_submission.created-Ereignis

Erstelle einen Laravel-Controller zur Verarbeitung von Visiono-Webhooks

Beispielkonversationen

Fotoanfrage erstellen

Benutzer: Wie erstelle ich eine Fotoanfrage mit 48 Stunden Ablauf?

Claude: So erstellen Sie eine Fotoanfrage mit der Visiono-API:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/de/docs/api/v1/photo-requests" \
  -H "X-API-Key: vsk_live_ihr_schluessel" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Laden Sie Ihre Ausweisfotos hoch",
    "recipient_email": "[email protected]",
    "expires_in_hours": 48,
    "require_gps": false,
    "items": [
      {"instructions": "Ausweis Vorderseite", "is_required": true},
      {"instructions": "Ausweis Rückseite", "is_required": true}
    ]
  }'

Die Antwort enthält:
- unique_code: Der Kurzcode (z.B. "ABC123")
- request_url: Direktlink (https://tenant.visio.now/ABC123)
- qrcode_url: Über /photo-requests/{id}/qrcode-Endpunkt abrufen

Smart Link erstellen

Benutzer: Erstelle einen Smart Link für Flottenfahrzeug-Inspektionen

Claude: Hier ist ein Smart Link-Setup für Flotteninspektionen:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/de/docs/api/v1/smart-links" \
  -H "X-API-Key: vsk_live_ihr_schluessel" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Fahrzeuginspektion-Fotos",
    "custom_slug": "flotten-inspektion",
    "unique_field_label": "Kennzeichen",
    "show_full_name_field": true,
    "full_name_required": true,
    "require_gps": true,
    "tags": ["flotte", "inspektion"],
    "items": [
      {"instructions": "Vorderansicht", "is_required": true},
      {"instructions": "Linke Seite", "is_required": true},
      {"instructions": "Rechte Seite", "is_required": true},
      {"instructions": "Schaden (falls vorhanden)", "is_required": false}
    ]
  }'

Der Link wird permanent sein unter: https://tenant.visio.now/flotten-inspektion

Webhook-Integration

Benutzer: Erstelle einen Webhook-Handler für Foto-Einreichungen in Node.js

Claude: Hier ist ein sicherer Webhook-Handler mit Signaturverifizierung:

const express = require('express');
const crypto = require('crypto');

const app = express();
const WEBHOOK_SECRET = process.env.VISIONO_WEBHOOK_SECRET;

app.post('/webhooks/visiono', express.json(), (req, res) => {
  // Signatur verifizieren (KRITISCH für Sicherheit)
  const signature = req.headers['x-visiono-signature'];
  const payload = JSON.stringify(req.body);
  const expected = 'sha256=' + crypto
    .createHmac('sha256', WEBHOOK_SECRET)
    .update(payload)
    .digest('hex');

  if (!crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected))) {
    return res.status(401).send('Ungültige Signatur');
  }

  // Ereignisse verarbeiten
  const { event, timestamp, data } = req.body;

  switch (event) {
    case 'photo_submission.created':
      console.log('Neues Foto eingereicht:', {
        photo_request_id: data.photo_request.id,
        submission_id: data.submission.id,
        has_gps: data.submission.has_gps_data
      });
      break;

    case 'photo_request.submitted':
      console.log('Alle Fotos eingereicht:', {
        request_id: data.photo_request.id,
        total_photos: data.photo_request.submissions_count
      });
      // Download-URLs abrufen
      break;
  }

  res.status(200).send('OK');
});

app.listen(3000);

So funktioniert es

Das Plugin ist kontextbewusst und aktiviert sich automatisch, wenn:

Sie "Visiono" in Ihrer Konversation erwähnen
Sie nach Fotosammlung, Fotoanfragen oder Smart Links fragen
Sie an Webhook-Integrationscode arbeiten
Sie die Visiono-API referenzieren

Keine speziellen Befehle nötig - fragen Sie einfach natürlich nach Visiono-Integration.

Hauptfunktionen

Genaue API-Dokumentation

Das Plugin liefert exakte Endpunkt-Details, einschließlich:

Korrekte Feldnamen (unique_code, request_url, expires_in_hours)
Richtige Authentifizierungs-Header (X-API-Key)
Antwortstrukturen mit ID-Präfixen (pr_, sl_, ps_)
Rate-Limiting-Informationen

Sicherheits-Best-Practices

Claude leitet Sie an bei:

Webhook-Signaturverifizierung (HMAC-SHA256)
Sichere Secret-Speicherung
Zeitungssichere Vergleichsfunktionen
HTTPS-Anforderungen

Code-Beispiele

Produktionsreifer Code in:

PHP - Laravel, Symfony, reines PHP
JavaScript - Node.js, Express, Next.js
Python - Flask, Django, FastAPI

Konfiguration

API-Schlüssel-Setup

Konfigurieren Sie Ihren API-Schlüssel zum Testen:

bash

export VISIONO_API_KEY="ihr-api-schluessel"

Webhook-Secret

Webhook-Verifizierung einrichten:

bash

export VISIONO_WEBHOOK_SECRET="ihr-secret"

Best Practices

Effektive Prompts

Seien Sie spezifisch, was Sie brauchen:

Gut: "Erstelle eine PHP-Funktion zur Verifizierung von Visiono-Webhook-Signaturen"
Besser: "Erstelle eine Laravel-Middleware zur Verifizierung von Visiono-Webhook-Signaturen mit Fehlerbehandlung"

Kontext teilen

Relevanten Kontext teilen:

Ich verwende Next.js 14 mit dem App Router.
Erstelle einen API-Route-Handler für Visiono-Webhooks.

Iterative Entwicklung

Inkrementell aufbauen:

Mit Basisintegration beginnen
Fehlerbehandlung hinzufügen
Logging hinzufügen
Retry-Logik hinzufügen

Fehlerbehebung

Plugin nicht gefunden

Wenn Installation fehlschlägt:

Claude Code auf neueste Version aktualisieren
Internetverbindung verifizieren
Prüfen, ob Marketplace-Repository hinzugefügt ist:
bash
```
/plugin marketplace list
```

Plugin aktiviert nicht

Wenn Claude das Plugin-Wissen nicht zu nutzen scheint:

Explizit "Visiono" oder "Fotoanfrage" in Ihrem Prompt erwähnen
Spezifische Fragen zur API stellen

Plugin neu installieren:

bash

/plugin uninstall visiono-api@visiono
/plugin install visiono-api@visiono

Veraltete Informationen

Das Plugin bezieht Daten aus der neuesten OpenAPI-Spezifikation. Wenn Sie Diskrepanzen bemerken:

An Visiono-Support melden
Offizielle API-Docs prüfen: https://www.visiono.io/de/docs/api/v1

Plugin aktualisieren

Plugin-Updates erfolgen automatisch, wenn das Repository aktualisiert wird. Zum manuellen Aktualisieren:

bash

/plugin update visiono-api@visiono

Deinstallieren

Plugin entfernen:

bash

/plugin uninstall visiono-api@visiono

Marketplace-Repository entfernen (optional):

bash

/plugin marketplace remove visiono-io/visiono-claude-plugin

Claude Code-Integration ​

Übersicht ​

Voraussetzungen ​

Plugin installieren ​

Vom Marketplace ​

Verifizierung ​

Was das Plugin bietet ​

Das Plugin verwenden ​

API-Integrationshilfe ​

Code-Generierung ​

Webhook-Integration ​

Beispielkonversationen ​

Fotoanfrage erstellen ​

Smart Link erstellen ​

Webhook-Integration ​

So funktioniert es ​

Hauptfunktionen ​

Genaue API-Dokumentation ​

Sicherheits-Best-Practices ​

Code-Beispiele ​

Konfiguration ​

API-Schlüssel-Setup ​

Webhook-Secret ​

Best Practices ​

Effektive Prompts ​

Kontext teilen ​

Iterative Entwicklung ​

Fehlerbehebung ​

Plugin nicht gefunden ​

Plugin aktiviert nicht ​

Veraltete Informationen ​

Plugin aktualisieren ​

Deinstallieren ​

Verwandte Ressourcen ​

Claude Code-Integration

Übersicht

Voraussetzungen

Plugin installieren

Vom Marketplace

Verifizierung

Was das Plugin bietet

Das Plugin verwenden

API-Integrationshilfe

Code-Generierung

Webhook-Integration

Beispielkonversationen

Fotoanfrage erstellen

Smart Link erstellen

Webhook-Integration

So funktioniert es

Hauptfunktionen

Genaue API-Dokumentation

Sicherheits-Best-Practices

Code-Beispiele

Konfiguration

API-Schlüssel-Setup

Webhook-Secret

Best Practices

Effektive Prompts

Kontext teilen

Iterative Entwicklung

Fehlerbehebung

Plugin nicht gefunden

Plugin aktiviert nicht

Veraltete Informationen

Plugin aktualisieren

Deinstallieren

Verwandte Ressourcen