Intégration Claude Code

Améliorez votre workflow de développement avec une assistance IA pour l'intégration de l'API Visiono.

Aperçu

Claude Code est l'outil CLI officiel d'Anthropic pour Claude AI. Le plugin Visiono fournit une aide contextuelle pour les demandes de photos, les Smart Links, la configuration des webhooks et la génération de code en plusieurs langages.

Prérequis

Claude Code installé
Compte Visiono avec accès API
Accès au terminal

Installation du plugin

Depuis le Marketplace

Ajoutez le dépôt du plugin Visiono :

bash

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

Installez le plugin :

bash

/plugin install visiono-api@visiono

Vérification

Confirmez l'installation :

bash

/plugin list

Vous devriez voir visiono-api dans la liste des plugins installés.

Ce que fournit le plugin

Le plugin Visiono donne à Claude une connaissance complète sur :

Contexte	Description
API Photo Requests	Créer des liens de collecte de photos avec expiration et QR codes
API Smart Links	Construire des workflows de collecte de photos permanents
Webhooks	Types d'événements, structures de payload et vérification de signature
URLs de téléchargement	Accéder aux photos soumises avec des URLs signées à durée limitée
Exemples de code	Extraits prêts à l'emploi en PHP, JavaScript et Python
Bonnes pratiques	Utilisation des QR codes, sécurité des webhooks, patterns de polling

Utilisation du plugin

Une fois installé, le plugin s'active automatiquement quand vous mentionnez Visiono ou posez des questions sur les workflows de collecte de photos.

Aide à l'intégration API

Demandez à Claude des conseils d'implémentation spécifiques :

Comment créer une demande de photos avec des liens expirants ?

Montre-moi comment créer un Smart Link pour les inspections de véhicules

Comment obtenir le QR code d'une demande de photos ?

Génération de code

Demandez des exemples spécifiques à un langage :

Génère une fonction PHP pour créer une demande de photos avec GPS requis

Crée un gestionnaire de webhook JavaScript avec vérification de signature

Écris un script Python pour télécharger toutes les photos d'une soumission

Intégration Webhook

Obtenez de l'aide pour l'implémentation des webhooks :

Comment vérifier les signatures des webhooks Visiono en Node.js ?

Montre-moi la structure du payload pour l'événement photo_submission.created

Crée un contrôleur Laravel pour gérer les webhooks Visiono

Exemples de conversations

Créer une demande de photos

Utilisateur : Comment créer une demande de photos avec expiration de 48 heures ?

Claude : Voici comment créer une demande de photos avec l'API Visiono :

curl -X POST "https://www.visiono.iohttps://www.visiono.io/fr/docs/api/v1/photo-requests" \
  -H "X-API-Key: vsk_live_votre_cle" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Uploadez vos photos d'identité",
    "recipient_email": "[email protected]",
    "expires_in_hours": 48,
    "require_gps": false,
    "items": [
      {"instructions": "Recto de la pièce d'identité", "is_required": true},
      {"instructions": "Verso de la pièce d'identité", "is_required": true}
    ]
  }'

La réponse inclut :
- unique_code : Le code court (ex. : "ABC123")
- request_url : Lien direct (https://tenant.visio.now/ABC123)
- qrcode_url : Obtenu via le point /photo-requests/{id}/qrcode

Créer un Smart Link

Utilisateur : Créer un Smart Link pour les inspections de véhicules de flotte

Claude : Voici une configuration de Smart Link pour les inspections de flotte :

curl -X POST "https://www.visiono.iohttps://www.visiono.io/fr/docs/api/v1/smart-links" \
  -H "X-API-Key: vsk_live_votre_cle" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Photos d'inspection du véhicule",
    "custom_slug": "inspection-flotte",
    "unique_field_label": "Plaque d'immatriculation",
    "show_full_name_field": true,
    "full_name_required": true,
    "require_gps": true,
    "tags": ["flotte", "inspection"],
    "items": [
      {"instructions": "Vue de face", "is_required": true},
      {"instructions": "Côté gauche", "is_required": true},
      {"instructions": "Côté droit", "is_required": true},
      {"instructions": "Dommages (le cas échéant)", "is_required": false}
    ]
  }'

Le lien sera permanent à : https://tenant.visio.now/inspection-flotte

Intégration Webhook

Utilisateur : Créer un gestionnaire de webhook pour les soumissions de photos en Node.js

Claude : Voici un gestionnaire de webhook sécurisé avec vérification de signature :

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) => {
  // Vérifier la signature (CRITIQUE pour la sécurité)
  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('Signature invalide');
  }

  // Gérer les événements
  const { event, timestamp, data } = req.body;

  switch (event) {
    case 'photo_submission.created':
      console.log('Nouvelle photo soumise :', {
        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('Toutes les photos soumises :', {
        request_id: data.photo_request.id,
        total_photos: data.photo_request.submissions_count
      });
      // Récupérer les URLs de téléchargement
      break;
  }

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

app.listen(3000);

Comment ça fonctionne

Le plugin est contextuel et s'active automatiquement quand :

Vous mentionnez "Visiono" dans votre conversation
Vous posez des questions sur la collecte de photos, les demandes de photos ou les Smart Links
Vous travaillez sur du code d'intégration webhook
Vous référencez l'API Visiono

Aucune commande spéciale n'est nécessaire - posez simplement vos questions naturellement sur l'intégration Visiono.

Fonctionnalités clés

Documentation API précise

Le plugin fournit les détails exacts des points de terminaison, incluant :

Noms de champs corrects (unique_code, request_url, expires_in_hours)
En-têtes d'authentification appropriés (X-API-Key)
Structures de réponse avec préfixes d'ID (pr_, sl_, ps_)
Informations sur les limites de débit

Bonnes pratiques de sécurité

Claude vous guidera sur :

Vérification de signature webhook (HMAC-SHA256)
Stockage sécurisé des secrets
Fonctions de comparaison timing-safe
Exigences HTTPS

Exemples de code

Obtenez du code prêt pour la production en :

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

Configuration

Configuration de la clé API

Configurez votre clé API pour les tests :

bash

export VISIONO_API_KEY="votre-cle-api"

Secret Webhook

Configurez la vérification des webhooks :

bash

export VISIONO_WEBHOOK_SECRET="votre-secret"

Bonnes pratiques

Prompts efficaces

Soyez spécifique sur ce dont vous avez besoin :

Bon : "Créer une fonction PHP pour vérifier les signatures des webhooks Visiono"
Meilleur : "Créer un middleware Laravel pour vérifier les signatures des webhooks Visiono avec gestion d'erreurs"

Partage de contexte

Partagez le contexte pertinent :

J'utilise Next.js 14 avec l'App Router.
Créer un gestionnaire de route API pour les webhooks Visiono.

Développement itératif

Construisez de manière incrémentale :

Commencez avec l'intégration de base
Ajoutez la gestion d'erreurs
Ajoutez la journalisation
Ajoutez la logique de retry

Dépannage

Plugin non trouvé

Si l'installation échoue :

Mettez à jour Claude Code vers la dernière version
Vérifiez la connexion internet
Vérifiez que le dépôt marketplace est ajouté :
bash
```
/plugin marketplace list
```

Plugin ne s'active pas

Si Claude ne semble pas utiliser les connaissances du plugin :

Mentionnez explicitement "Visiono" ou "Photo Request" dans votre prompt
Posez des questions spécifiques sur l'API

Réinstallez le plugin :

bash

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

Informations obsolètes

Le plugin tire de la dernière spécification OpenAPI. Si vous remarquez des divergences :

Signalez-les au support Visiono
Consultez la documentation API officielle : https://www.visiono.io/fr/docs/api/v1

Mise à jour du plugin

Les mises à jour du plugin se font automatiquement quand le dépôt est mis à jour. Pour rafraîchir manuellement :

bash

/plugin update visiono-api@visiono

Désinstallation

Supprimez le plugin :

bash

/plugin uninstall visiono-api@visiono

Supprimez le dépôt marketplace (optionnel) :

bash

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

Ressources connexes

Référence API - Documentation API complète
Webhooks - Configuration des événements
Clés API - Configuration de l'authentification

Intégration Claude Code ​

Aperçu ​

Prérequis ​

Installation du plugin ​

Depuis le Marketplace ​

Vérification ​

Ce que fournit le plugin ​

Utilisation du plugin ​

Aide à l'intégration API ​

Génération de code ​

Intégration Webhook ​

Exemples de conversations ​

Créer une demande de photos ​

Créer un Smart Link ​

Intégration Webhook ​

Comment ça fonctionne ​

Fonctionnalités clés ​

Documentation API précise ​

Bonnes pratiques de sécurité ​

Exemples de code ​

Configuration ​

Configuration de la clé API ​

Secret Webhook ​

Bonnes pratiques ​

Prompts efficaces ​

Partage de contexte ​

Développement itératif ​

Dépannage ​

Plugin non trouvé ​

Plugin ne s'active pas ​

Informations obsolètes ​

Mise à jour du plugin ​

Désinstallation ​

Ressources connexes ​

Intégration Claude Code

Aperçu

Prérequis

Installation du plugin

Depuis le Marketplace

Vérification

Ce que fournit le plugin

Utilisation du plugin

Aide à l'intégration API

Génération de code

Intégration Webhook

Exemples de conversations

Créer une demande de photos

Créer un Smart Link

Intégration Webhook

Comment ça fonctionne

Fonctionnalités clés

Documentation API précise

Bonnes pratiques de sécurité

Exemples de code

Configuration

Configuration de la clé API

Secret Webhook

Bonnes pratiques

Prompts efficaces

Partage de contexte

Développement itératif

Dépannage

Plugin non trouvé

Plugin ne s'active pas

Informations obsolètes

Mise à jour du plugin

Désinstallation

Ressources connexes