Claude Code Integration

Enhance your development workflow with AI-powered assistance for Visiono API integration.

Overview

Claude Code is Anthropic's official CLI tool for Claude AI. The Visiono plugin provides context-aware help with Photo Requests, Smart Links, webhook setup, and code generation in multiple languages.

Prerequisites

• Claude Code installed
• Visiono account with API access
• Terminal access

Installing the Plugin

From Marketplace

Add the Visiono plugin repository:

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

Install the plugin:

/plugin install visiono-api@visiono

Verification

Confirm installation:

/plugin list

You should see visiono-api in the installed plugins list.

What the Plugin Provides

The Visiono plugin gives Claude comprehensive knowledge about:

Context	Description
Photo Requests API	Create expiring photo collection links with QR codes
Smart Links API	Build permanent photo collection workflows
Webhooks	Event types, payload structures, and signature verification
Download URLs	Access submitted photos with time-limited signed URLs
Code Examples	Ready-to-use snippets in PHP, JavaScript, and Python
Best Practices	QR code usage, webhook security, polling patterns

Using the Plugin

Once installed, the plugin activates automatically when you mention Visiono or ask about photo collection workflows.

API Integration Help

Ask Claude for specific implementation guidance:

How do I create a Photo Request with expiring links?

Show me how to create a Smart Link for vehicle inspections

How do I get the QR code for a photo request?

Code Generation

Request language-specific examples:

Generate a PHP function to create a Photo Request with GPS required

Create a JavaScript webhook handler with signature verification

Write a Python script to download all photos from a submission

Webhook Integration

Get webhook implementation help:

How do I verify Visiono webhook signatures in Node.js?

Show me the payload structure for photo_submission.created event

Create a Laravel controller to handle Visiono webhooks

Example Conversations

Creating a Photo Request

User: How do I create a Photo Request with 48-hour expiration?

Claude: Here's how to create a Photo Request using the Visiono API:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/en/docs/api/v1/photo-requests" \
  -H "X-API-Key: vsk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Upload your ID photos",
    "recipient_email": "[email protected]",
    "expires_in_hours": 48,
    "require_gps": false,
    "items": [
      {"instructions": "Front of ID", "is_required": true},
      {"instructions": "Back of ID", "is_required": true}
    ]
  }'

The response includes:
- unique_code: The short code (e.g., "ABC123")
- request_url: Direct link (https://tenant.visio.now/ABC123)
- qrcode_url: Get via /photo-requests/{id}/qrcode endpoint

Creating a Smart Link

User: Create a Smart Link for fleet vehicle inspections

Claude: Here's a Smart Link setup for fleet inspections:

curl -X POST "https://www.visiono.iohttps://www.visiono.io/en/docs/api/v1/smart-links" \
  -H "X-API-Key: vsk_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "instructions": "Vehicle inspection photos",
    "custom_slug": "fleet-inspection",
    "unique_field_label": "License Plate",
    "show_full_name_field": true,
    "full_name_required": true,
    "require_gps": true,
    "tags": ["fleet", "inspection"],
    "items": [
      {"instructions": "Front view", "is_required": true},
      {"instructions": "Left side", "is_required": true},
      {"instructions": "Right side", "is_required": true},
      {"instructions": "Damage (if any)", "is_required": false}
    ]
  }'

The link will be permanent at: https://tenant.visio.now/fleet-inspection

Webhook Integration

User: Create a webhook handler for photo submissions in Node.js

Claude: Here's a secure webhook handler with signature verification:

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) => {
  // Verify signature (CRITICAL for security)
  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('Invalid signature');
  }

  // Handle events
  const { event, timestamp, data } = req.body;

  switch (event) {
    case 'photo_submission.created':
      console.log('New photo submitted:', {
        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('All photos submitted:', {
        request_id: data.photo_request.id,
        total_photos: data.photo_request.submissions_count
      });
      // Fetch download URLs
      break;
  }

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

app.listen(3000);

How It Works

The plugin is context-aware and activates automatically when:

• You mention "Visiono" in your conversation
• You ask about photo collection, Photo Requests, or Smart Links
• You're working on webhook integration code
• You reference the Visiono API

No special commands are needed - just ask naturally about Visiono integration.

Key Features

Accurate API Documentation

The plugin provides exact endpoint details, including:

• Correct field names (unique_code, request_url, expires_in_hours)
• Proper authentication headers (X-API-Key)
• Response structures with ID prefixes (pr_, sl_, ps_)
• Rate limiting information

Security Best Practices

Claude will guide you on:

• Webhook signature verification (HMAC-SHA256)
• Secure secret storage
• Timing-safe comparison functions
• HTTPS requirements

Code Examples

Get production-ready code in:

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

Configuration

API Key Setup

Configure your API key for testing:

export VISIONO_API_KEY="your-api-key"

Webhook Secret

Set up webhook verification:

export VISIONO_WEBHOOK_SECRET="your-secret"

Best Practices

Effective Prompts

Be specific about what you need:

• Good: "Create a PHP function to verify Visiono webhook signatures"
• Better: "Create a Laravel middleware to verify Visiono webhook signatures with error handling"

Context Sharing

Share relevant context:

I'm using Next.js 14 with the App Router.
Create an API route handler for Visiono webhooks.

Iterative Development

Build incrementally:

1. Start with basic integration
2. Add error handling
3. Add logging
4. Add retry logic

Troubleshooting

Plugin Not Found

If installation fails:

1. Update Claude Code to latest version
2. Verify internet connection
3. Check marketplace repository is added:

   /plugin marketplace list

Plugin Not Activating

If Claude doesn't seem to use the plugin knowledge:

1. Explicitly mention "Visiono" or "Photo Request" in your prompt
2. Ask specific questions about the API
3. Reinstall the plugin:

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

Outdated Information

The plugin pulls from the latest OpenAPI specification. If you notice discrepancies:

1. Report them to Visiono support
2. Check the official API docs: https://www.visiono.io/en/docs/api/v1

Updating the Plugin

Plugin updates happen automatically when the repository is updated. To manually refresh:

/plugin update visiono-api@visiono

Uninstalling

Remove the plugin:

/plugin uninstall visiono-api@visiono

Remove the marketplace repository (optional):

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

Related Resources

• API Reference - Full API documentation
• Webhooks - Event configuration
• API Keys - Authentication setup