Construire avec Claude, ChatGPT, Cursor ou tout LLM

Confiez votre clé API à un LLM. Obtenez screenshots et CI/CD.

Screenshots.live expose un JSON Schema et une spécification OpenAPI à des URL stables. Un LLM muni de votre clé API peut créer des templates, placer des éléments, générer un workflow GitHub Actions et déclencher les rendus — sans que vous écriviez la moindre ligne de code.

Comment ça marche

  1. 1

    Créer une clé API

    Connectez-vous et créez une clé depuis votre tableau de bord. Copiez-la une seule fois (elle commence par sa_live_) et stockez-la comme secret. Elle authentifie aussi bien la création de templates que les rendus.

  2. 2

    Donner au LLM le system prompt + votre clé

    Collez le system prompt ci-dessous dans Claude, ChatGPT, Cursor ou n'importe quel agent. Ajoutez votre spécification. Le LLM lit le schéma et POSTe templates et items en votre nom.

  3. 3

    Laisser le LLM écrire le workflow

    Demandez-lui un workflow GitHub Actions. Le LLM produit un YAML qui utilise l'action render-screenshots-action officielle, référence votre secret et génère un artefact téléchargeable à chaque push.

System prompt à copier-coller

Collez ceci dans le champ system de n'importe quel outil LLM. Cela oriente le modèle vers les URL du schéma et pose les règles de base afin qu'il produise des payloads valides au lieu d'inventer des champs.

prompt
You are an expert at creating Screenshots.live templates programmatically.

You have an API key for Screenshots.live (it begins with sa_live_). You can:

1. Read the JSON Schema for templates at:
   https://api.screenshots.live/schema/templates.json

2. Read the full OpenAPI specification at:
   https://api.screenshots.live/schema/openapi.json

3. Create templates by POSTing to https://api.screenshots.live/templates with the
   header: Authorization: Bearer <THE_API_KEY>

4. Add items (text, device frames, images, shapes, backgrounds) by POSTing to
   https://api.screenshots.live/templates/{id}/items

5. Render screenshots from a template by POSTing YAML to
   https://api.screenshots.live/render/api with the same Bearer header.

When the user describes a screenshot or asks for a CI/CD workflow:
- Fetch the schema first; do not invent fields.
- Use exact enum values from the schema for screenSizeCategory and item types.
- For coordinates and dimensions, stay within the screen size bounds.
- For CI workflows, prefer the official GitHub Action:
    uses: screenshots-live/render-screenshots-action@v1
- Never hard-code the API key in code; always reference a secret.

Always show the exact curl or YAML you executed, plus the response status,
so the user can audit what changed.

Schéma lisible par machine

Deux URL stables qu'un LLM peut récupérer directement. La première est filtrée aux structures de templates ; la seconde est la spécification publique complète OpenAPI pour chaque endpoint que votre clé API peut utiliser.

JSON Schema des templates
https://api.screenshots.live/schema/templates.json
Spécification OpenAPI 3.x complète
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoints les plus utilisés par les LLM

Tous les endpoints acceptent votre clé API sa_live_ comme Bearer token. Templates et items appartiennent au propriétaire de la clé ; les rate limits dépendent du tier.

MéthodeCheminObjet
POST/templatesCreate a template (defines canvas size and screen count).
GET/templatesList the API key owner's templates.
GET/templates/{id}Fetch a template with its items.
POST/templates/{id}/itemsAdd an item: Text, DeviceFrame, Image, Shape, CanvasBackground, or Html.
PUT/templates/{id}/items/{itemId}Update an item's position, z-index, or properties.
PUT/templates/{id}/items/bulkReplace all items in a template in one call.
POST/render/apiRender a template into screenshots from a YAML body.
GET/templates/{id}/yamlDownload a YAML scaffold with swappable fields ready to feed the render API.

Authentification

Envoyez Authorization: Bearer sa_live_<votre-clé>. La même clé authentifie le CRUD des templates, le CRUD des items et le dispatch des rendus — sans scopes séparés.

bash
curl -X POST https://api.screenshots.live/templates \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Fitness app — launch screens",
    "screenSizeCategory": "Mobile",
    "screenCount": 3
  }'
bash
curl -X POST https://api.screenshots.live/templates/$TEMPLATE_ID/items \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "Text",
    "x": 80,
    "y": 120,
    "zIndex": 10,
    "properties": {
      "text": "Track every workout",
      "fontSize": 64,
      "fontWeight": "bold",
      "color": "#0F172A",
      "textAlign": "left"
    }
  }'

Vocabulaire qu'un LLM doit fixer

Ces enums viennent directement du schéma. Les fixer dans le system prompt empêche le modèle d'inventer des valeurs qui échouent en 422.

Types d'item
TextDeviceFrameImageShapeCanvasBackgroundHtml
Catégories de taille d'écran
MobileTabletDesktopCustom

Workflow CI/CD d'exemple

Un LLM qui suit le prompt ci-dessus produira quelque chose comme ceci. L'action gère l'appel YAML de rendu, les retries et l'upload de l'artefact.

yaml
name: Render screenshots
on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Render via Screenshots.live
        uses: screenshots-live/render-screenshots-action@v1
        with:
          api-key: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
          template-id: ${{ vars.SCREENSHOTS_TEMPLATE_ID }}
          yaml-path: ./screenshots/template.yaml

      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: ./screenshots/output/

Ajoutez SCREENSHOTS_LIVE_API_KEY aux secrets du dépôt et SCREENSHOTS_TEMPLATE_ID aux variables du dépôt avant de pousser.

Erreurs auxquelles les LLM doivent s'attendre

Communiquez-les au LLM pour qu'il puisse récupérer au lieu de boucler.

  • 401Bearer token manquant ou invalide. Vérifiez la référence au secret.
  • 403Limite de tier atteinte (p. ex. nombre de templates dépassé) ou mauvais propriétaire. Le LLM ne devrait pas réessayer sans changement.
  • 422Échec de validation du schéma. Le LLM doit recharger le schéma et revalider avant de poster.
  • 429Rate limit dépassé. Backoff et réessayer ; les limites par tier s'appliquent par clé.

Étapes suivantes