Bouwen met Claude, ChatGPT, Cursor of een willekeurig LLM

Geef je API key aan een LLM. Krijg screenshots en CI/CD.

Screenshots.live publiceert een JSON Schema en een OpenAPI-specificatie op stabiele URL's. Een LLM met jouw API key kan templates aanmaken, items plaatsen, een GitHub Actions-workflow genereren en renders starten — zonder dat jij een regel code schrijft.

Zo werkt het

  1. 1

    Maak een API key

    Log in en maak een key via je dashboard. Kopieer hem één keer (begint met sa_live_) en sla hem op als secret. Hij authenticeert zowel template-aanmaak als renders.

  2. 2

    Geef het LLM de system prompt + je key

    Plak de system prompt hieronder in Claude, ChatGPT, Cursor of een willekeurige agent. Voeg je specificatie toe. Het LLM leest het schema en POST templates en items namens jou.

  3. 3

    Laat het LLM de workflow schrijven

    Vraag om een GitHub Actions-workflow. Het LLM produceert YAML die de officiële render-screenshots-action gebruikt, je secret refereert en bij elke push een downloadbaar artifact maakt.

Kopieer-en-plak system prompt

Plak dit in het system-veld van een willekeurige LLM-tool. Het wijst het model naar de schema-URL's en legt de basisregels vast zodat het geldige payloads produceert in plaats van velden te hallucineren.

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.

Machineleesbaar schema

Twee stabiele URL's die een LLM rechtstreeks kan ophalen. De eerste is gefilterd op template-gerelateerde structuren; de tweede is de volledige publieke OpenAPI-specificatie voor elke endpoint die jouw API key kan gebruiken.

Template JSON Schema
https://api.screenshots.live/schema/templates.json
Volledige OpenAPI 3.x-specificatie
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoints die LLMs het meest gebruiken

Alle endpoints accepteren je sa_live_ API key als Bearer token. Templates en items horen bij de eigenaar van de key; rate limits zijn per tier.

MethodePadDoel
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.

Authenticatie

Stuur Authorization: Bearer sa_live_<jouw-key>. Dezelfde key authenticeert template-CRUD, item-CRUD en render-dispatch — geen aparte scopes.

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 dat een LLM moet vastpinnen

Deze enums komen rechtstreeks uit het schema. Ze in de system prompt vastpinnen voorkomt dat het model waarden verzint die met 422 falen.

Item-types
TextDeviceFrameImageShapeCanvasBackgroundHtml
Schermformaat-categorieën
MobileTabletDesktopCustom

Voorbeeld CI/CD-workflow

Een LLM dat de prompt hierboven volgt produceert iets als dit. De action handelt de YAML-renderaanroep, de retries en de artifact-upload af.

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/

Voeg SCREENSHOTS_LIVE_API_KEY toe aan repository-secrets en SCREENSHOTS_TEMPLATE_ID aan repository-variabelen voordat je pusht.

Fouten die LLMs moeten verwachten

Geef ze door aan het LLM zodat het kan herstellen in plaats van in loops te draaien.

  • 401Bearer token ontbreekt of is ongeldig. Controleer de secret-referentie.
  • 403Tier-limiet bereikt (bv. aantal templates overschreden) of verkeerde eigenaar. Het LLM moet niet zonder wijzigingen opnieuw proberen.
  • 422Schema-validatie mislukt. Het LLM moet het schema opnieuw ophalen en revalideren voor het post.
  • 429Rate limit overschreden. Backoff en probeer opnieuw; tier-limieten gelden per key.

Volgende stappen