Bygg med Claude, ChatGPT, Cursor eller hvilken som helst LLM

Gi API-nøkkelen din til en LLM. Få skjermbilder og CI/CD.

Screenshots.live eksponerer et JSON Schema og en OpenAPI-spesifikasjon på stabile URL-er. En LLM med din API-nøkkel kan opprette maler, plassere items, generere en GitHub Actions-arbeidsflyt og starte rendringer — uten at du skriver en linje kode.

Slik fungerer det

  1. 1

    Lag en API-nøkkel

    Logg inn og lag en nøkkel i dashbordet. Kopier den én gang (begynner med sa_live_) og lagre som secret. Den autentiserer både opprettelse av maler og rendringer.

  2. 2

    Gi LLM-en system-prompten + nøkkelen din

    Lim inn system-prompten under i Claude, ChatGPT, Cursor eller en hvilken som helst agent. Legg til spesifikasjonen din. LLM-en leser skjemaet og POSTer maler og items på dine vegne.

  3. 3

    La LLM-en skrive arbeidsflyten

    Be om en GitHub Actions-arbeidsflyt. LLM-en lager YAML som bruker den offisielle render-screenshots-action, refererer secret-en din og produserer en nedlastbar artefakt ved hver push.

System-prompt for kopier-og-lim

Lim dette inn i system-feltet på et hvilket som helst LLM-verktøy. Det peker modellen mot skjema-URL-ene og fastsetter grunnreglene slik at den produserer gyldige payloads i stedet for å finne på felter.

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.

Maskinlesbart skjema

To stabile URL-er som en LLM kan hente direkte. Den første er filtrert til mal-relaterte strukturer; den andre er den fullstendige offentlige OpenAPI-spesifikasjonen for hvert endepunkt API-nøkkelen din kan bruke.

Mal-JSON-skjema
https://api.screenshots.live/schema/templates.json
Fullstendig OpenAPI 3.x-spesifikasjon
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endepunkter LLM-er bruker mest

Alle endepunkter aksepterer sa_live_-API-nøkkelen din som Bearer-token. Maler og items tilhører nøkkelens eier; rate limits er tier-baserte.

MetodeStiFormål
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.

Autentisering

Send Authorization: Bearer sa_live_<din-nøkkel>. Samme nøkkel autentiserer mal-CRUD, item-CRUD og render-dispatch — ingen separate 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"
    }
  }'

Vokabular en LLM bør feste

Disse enums kommer rett fra skjemaet. Å feste dem i system-prompten hindrer modellen i å finne på verdier som faller på 422.

Item-typer
TextDeviceFrameImageShapeCanvasBackgroundHtml
Skjermstørrelse-kategorier
MobileTabletDesktopCustom

Eksempel CI/CD-arbeidsflyt

En LLM som følger prompten over vil produsere noe som dette. Action-en håndterer YAML-renderkallet, retries og artefakt-opplasting.

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/

Legg til SCREENSHOTS_LIVE_API_KEY i repository-secrets og SCREENSHOTS_TEMPLATE_ID i repository-variabler før du pusher.

Feil LLM-er bør forvente

Videreformidle disse til LLM-en så den kan komme seg etter feil i stedet for å gå i loop.

  • 401Bearer-token mangler eller er ugyldig. Sjekk secret-referansen på nytt.
  • 403Tier-grense nådd (f.eks. mal-antall overskredet) eller feil eier. LLM-en bør ikke prøve igjen uten endringer.
  • 422Skjema-validering feilet. LLM-en bør hente skjemaet på nytt og revalidere før posting.
  • 429Rate limit overskredet. Backoff og prøv igjen; tier-baserte grenser gjelder per nøkkel.

Neste steg