Integración con Claude Code

Mejora tu flujo de trabajo de desarrollo con asistencia de IA para la integración con la API de Visiono.

Descripción General

Claude Code es la herramienta CLI oficial de Anthropic para Claude AI. El plugin de Visiono proporciona ayuda contextual con Solicitudes de Fotos, Enlaces Permanentes, configuración de webhooks y generación de código en múltiples lenguajes.

Prerrequisitos

Claude Code instalado
Cuenta de Visiono con acceso a API
Acceso a terminal

Instalación del Plugin

Desde el Marketplace

Añade el repositorio del plugin de Visiono:

bash

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

Instala el plugin:

bash

/plugin install visiono-api@visiono

Verificación

Confirma la instalación:

bash

/plugin list

Deberías ver visiono-api en la lista de plugins instalados.

Qué Proporciona el Plugin

El plugin de Visiono proporciona a Claude conocimiento completo sobre:

Contexto	Descripción
API de Solicitudes de Fotos	Crea enlaces de recolección de fotos con expiración y códigos QR
API de Enlaces Permanentes	Construye flujos de trabajo permanentes de recolección de fotos
Webhooks	Tipos de eventos, estructuras de payload y verificación de firmas
URLs de Descarga	Accede a fotos enviadas con URLs firmadas de tiempo limitado
Ejemplos de Código	Fragmentos listos para usar en PHP, JavaScript y Python
Mejores Prácticas	Uso de códigos QR, seguridad de webhooks, patrones de polling

Uso del Plugin

Una vez instalado, el plugin se activa automáticamente cuando mencionas Visiono o preguntas sobre flujos de trabajo de recolección de fotos.

Ayuda con Integración de API

Pide a Claude orientación específica de implementación:

¿Cómo creo una Solicitud de Fotos con enlaces que expiran?

Muéstrame cómo crear un Enlace Permanente para inspecciones de vehículos

¿Cómo obtengo el código QR para una solicitud de fotos?

Generación de Código

Solicita ejemplos específicos por lenguaje:

Genera una función PHP para crear una Solicitud de Fotos con GPS requerido

Crea un manejador de webhooks en JavaScript con verificación de firma

Escribe un script de Python para descargar todas las fotos de un envío

Integración de Webhooks

Obtén ayuda con la implementación de webhooks:

¿Cómo verifico las firmas de webhooks de Visiono en Node.js?

Muéstrame la estructura del payload para el evento photo_submission.created

Crea un controlador de Laravel para manejar webhooks de Visiono

Ejemplos de Conversaciones

Creando una Solicitud de Fotos

Usuario: ¿Cómo creo una Solicitud de Fotos con expiración de 48 horas?

Claude: Así es como creas una Solicitud de Fotos usando la API de Visiono:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/es/docs/api/v1/photo-requests" \
  -H "X-API-Key: vsk_live_tu_clave" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Sube tus fotos de identificación",
    "recipient_email": "[email protected]",
    "expires_in_hours": 48,
    "require_gps": false,
    "items": [
      {"instructions": "Frente de identificación", "is_required": true},
      {"instructions": "Reverso de identificación", "is_required": true}
    ]
  }'

La respuesta incluye:
- unique_code: El código corto (ej. "ABC123")
- request_url: Enlace directo (https://inquilino.visio.now/ABC123)
- qrcode_url: Obtener vía endpoint /photo-requests/{id}/qrcode

Creando un Enlace Permanente

Usuario: Crea un Enlace Permanente para inspecciones de flotas de vehículos

Claude: Aquí está la configuración de Enlace Permanente para inspecciones de flotas:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/es/docs/api/v1/smart-links" \
  -H "X-API-Key: vsk_live_tu_clave" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Fotos de inspección de vehículo",
    "custom_slug": "inspeccion-flota",
    "unique_field_label": "Matrícula",
    "show_full_name_field": true,
    "full_name_required": true,
    "require_gps": true,
    "tags": ["flota", "inspeccion"],
    "items": [
      {"instructions": "Vista frontal", "is_required": true},
      {"instructions": "Lado izquierdo", "is_required": true},
      {"instructions": "Lado derecho", "is_required": true},
      {"instructions": "Daño (si hay)", "is_required": false}
    ]
  }'

El enlace será permanente en: https://inquilino.visio.now/inspeccion-flota

Integración de Webhooks

Usuario: Crea un manejador de webhooks para envíos de fotos en Node.js

Claude: Aquí está un manejador de webhooks seguro con verificación de firma:

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) => {
  // Verificar firma (CRÍTICO para seguridad)
  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('Firma inválida');
  }

  // Manejar eventos
  const { event, timestamp, data } = req.body;

  switch (event) {
    case 'photo_submission.created':
      console.log('Nueva foto enviada:', {
        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('Todas las fotos enviadas:', {
        request_id: data.photo_request.id,
        total_photos: data.photo_request.submissions_count
      });
      // Obtener URLs de descarga
      break;
  }

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

app.listen(3000);

Cómo Funciona

El plugin es consciente del contexto y se activa automáticamente cuando:

Mencionas "Visiono" en tu conversación
Preguntas sobre recolección de fotos, Solicitudes de Fotos o Enlaces Permanentes
Estás trabajando en código de integración de webhooks
Haces referencia a la API de Visiono

No se necesitan comandos especiales - simplemente pregunta naturalmente sobre la integración con Visiono.

Características Clave

Documentación de API Precisa

El plugin proporciona detalles exactos de endpoints, incluyendo:

Nombres de campos correctos (unique_code, request_url, expires_in_hours)
Cabeceras de autenticación apropiadas (X-API-Key)
Estructuras de respuesta con prefijos de ID (pr_, sl_, ps_)
Información de límites de tasa

Mejores Prácticas de Seguridad

Claude te guiará sobre:

Verificación de firmas de webhooks (HMAC-SHA256)
Almacenamiento seguro de secretos
Funciones de comparación seguras en tiempo
Requisitos de HTTPS

Ejemplos de Código

Obtén código listo para producción en:

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

Configuración

Configuración de Clave de API

Configura tu clave de API para pruebas:

bash

export VISIONO_API_KEY="tu-clave-api"

Secreto de Webhook

Configura verificación de webhooks:

bash

export VISIONO_WEBHOOK_SECRET="tu-secreto"

Mejores Prácticas

Prompts Efectivos

Sé específico sobre lo que necesitas:

Bueno: "Crea una función PHP para verificar firmas de webhooks de Visiono"
Mejor: "Crea un middleware de Laravel para verificar firmas de webhooks de Visiono con manejo de errores"

Compartir Contexto

Comparte contexto relevante:

Estoy usando Next.js 14 con App Router.
Crea un manejador de ruta API para webhooks de Visiono.

Desarrollo Iterativo

Construye incrementalmente:

Comienza con integración básica
Añade manejo de errores
Añade logging
Añade lógica de reintentos

Solución de Problemas

Plugin No Encontrado

Si la instalación falla:

Actualiza Claude Code a la última versión
Verifica conexión a internet
Comprueba que el repositorio del marketplace esté añadido:
bash
```
/plugin marketplace list
```

Plugin No Se Activa

Si Claude no parece usar el conocimiento del plugin:

Menciona explícitamente "Visiono" o "Solicitud de Fotos" en tu prompt
Haz preguntas específicas sobre la API

Reinstala el plugin:

bash

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

Información Desactualizada

El plugin obtiene la especificación OpenAPI más reciente. Si notas discrepancias:

Repórtalas al soporte de Visiono
Consulta la documentación oficial de API: https://www.visiono.io/es/docs/api/v1

Actualización del Plugin

Las actualizaciones del plugin ocurren automáticamente cuando se actualiza el repositorio. Para refrescar manualmente:

bash

/plugin update visiono-api@visiono

Desinstalación

Elimina el plugin:

bash

/plugin uninstall visiono-api@visiono

Elimina el repositorio del marketplace (opcional):

bash

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

Recursos Relacionados

Referencia de API - Documentación completa de API
Webhooks - Configuración de eventos
Claves de API - Configuración de autenticación

Integración con Claude Code ​

Descripción General ​

Prerrequisitos ​

Instalación del Plugin ​

Desde el Marketplace ​

Verificación ​

Qué Proporciona el Plugin ​

Uso del Plugin ​

Ayuda con Integración de API ​

Generación de Código ​

Integración de Webhooks ​

Ejemplos de Conversaciones ​

Creando una Solicitud de Fotos ​

Creando un Enlace Permanente ​

Integración de Webhooks ​

Cómo Funciona ​

Características Clave ​

Documentación de API Precisa ​

Mejores Prácticas de Seguridad ​

Ejemplos de Código ​

Configuración ​

Configuración de Clave de API ​

Secreto de Webhook ​

Mejores Prácticas ​

Prompts Efectivos ​

Compartir Contexto ​

Desarrollo Iterativo ​

Solución de Problemas ​

Plugin No Encontrado ​

Plugin No Se Activa ​

Información Desactualizada ​

Actualización del Plugin ​

Desinstalación ​

Recursos Relacionados ​

Integración con Claude Code

Descripción General

Prerrequisitos

Instalación del Plugin

Desde el Marketplace

Verificación

Qué Proporciona el Plugin

Uso del Plugin

Ayuda con Integración de API

Generación de Código

Integración de Webhooks

Ejemplos de Conversaciones

Creando una Solicitud de Fotos

Creando un Enlace Permanente

Integración de Webhooks

Cómo Funciona

Características Clave

Documentación de API Precisa

Mejores Prácticas de Seguridad

Ejemplos de Código

Configuración

Configuración de Clave de API

Secreto de Webhook

Mejores Prácticas

Prompts Efectivos

Compartir Contexto

Desarrollo Iterativo

Solución de Problemas

Plugin No Encontrado

Plugin No Se Activa

Información Desactualizada

Actualización del Plugin

Desinstalación

Recursos Relacionados