Rendervid AI-integratie - Genereer video's met Claude Code, Cursor & MCP

Rendervid AI Integration MCP Claude Code

Introductie: AI-aangedreven videogeneratie

Het programmatisch maken van video’s vereiste traditioneel diepgaande kennis van videocodecs, animatieframeworks en renderingpipelines. Rendervid elimineert deze complexiteit door JSON-templates te accepteren en afgewerkte video’s te produceren. Wanneer je dit combineert met AI-agents die natuurlijke taal begrijpen, krijg je iets krachtigs: de mogelijkheid om een video in gewoon Nederlands te beschrijven en een gerenderde MP4 terug te ontvangen.

Rendervid overbrugt de kloof tussen AI-taalmodellen en videoproductie. In plaats van code te schrijven, keyframes te ontwerpen of een video-editor te leren, vertel je een AI-agent wat je wilt. De agent genereert een geldig JSON-template , valideert het en rendert de uiteindelijke uitvoer via de engine van Rendervid. Het hele proces gebeurt in een enkel gesprek.

Deze integratie is gebouwd op het Model Context Protocol (MCP), een open standaard die AI-tools in staat stelt om via een gestructureerde interface met externe services te communiceren. De MCP-server van Rendervid biedt 11 tools voor rendering, validatie, template-ontdekking en documentatie, waardoor AI-agents alles hebben wat ze nodig hebben om autonoom professionele video-inhoud te produceren.


Wat is het Model Context Protocol (MCP)?

Het Model Context Protocol is een open standaard die is ontwikkeld om AI-assistenten gestructureerde toegang te geven tot externe tools en gegevensbronnen. In plaats van te vertrouwen op AI-modellen om API-formaten te raden of code te genereren die REST-endpoints aanroept, biedt MCP een getypeerde, ontdekbare interface die AI-agents tijdens runtime kunnen bevragen.

Voor videogeneratie lost MCP een kritiek probleem op: AI-agents moeten weten wat mogelijk is voordat ze geldige uitvoer kunnen genereren. Zonder MCP zou een AI-model getraind moeten worden op het specifieke templateformaat van Rendervid, elke beschikbare animatiepreset moeten kennen en de beperkingen van elk laagtype moeten begrijpen. Met MCP roept de agent simpelweg get_capabilities aan en ontvangt een volledige beschrijving van het systeem, inclusief JSON-schema’s voor elk component.

Waarom MCP belangrijk is voor AI-videogeneratie

  • Runtime-ontdekking: AI-agents leren wat Rendervid kan doen op het moment dat ze verbinding maken, niet tijdens de trainingstijd. Dit betekent dat nieuwe functies direct beschikbaar zijn zonder hertraining.
  • Type-veiligheid: Elke tool heeft een gedefinieerd invoer- en uitvoerschema. De AI-agent weet precies welke parameters vereist zijn en welke types ze moeten hebben.
  • Validatie voor rendering: In plaats van een template in te dienen en te hopen dat het werkt, kan de agent het template eerst valideren en eventuele problemen oplossen voordat er tijd wordt besteed aan rendering.
  • Tool-componeerbaarheid: AI-agents kunnen tools aan elkaar koppelen door list_examples aan te roepen om een starttemplate te vinden, het te wijzigen, validate_template aan te roepen om het te controleren en vervolgens render_video aan te roepen om de uitvoer te produceren. Allemaal in een enkele gespreksbeurt.

MCP Server Tools Referentie

De MCP-server van Rendervid biedt 11 tools georganiseerd in drie categorieën: Rendering, Validatie & Ontdekking en Documentatie. Elke tool is ontworpen om AI-agents maximale autonomie te geven bij het genereren van video-inhoud.

Rendering-tools

Deze tools verzorgen de daadwerkelijke productie van video- en beelduitvoer vanuit JSON-templates.

render_video

Genereert een compleet videobestand vanuit een JSON-template. Dit is de primaire rendering-tool voor het produceren van MP4-, WebM- of MOV-uitvoer.

Parameters:

  • template (object, verplicht) – Het complete JSON-template dat scènes, lagen, animaties en uitvoerinstellingen definieert.
  • inputs (object, optioneel) – Sleutel-waardeparen voor templatevariabele substitutie.
  • output_format (string, optioneel) – Uitvoerformaat: mp4, webm of mov. Standaard mp4.

Voorbeeldgebruik door een AI-agent:

{
  "tool": "render_video",
  "arguments": {
    "template": {
      "outputSettings": {
        "width": 1080,
        "height": 1920,
        "fps": 30,
        "duration": 10
      },
      "scenes": [
        {
          "duration": 10,
          "layers": [
            {
              "type": "text",
              "text": "Zomeruitverkoop - 50% korting",
              "fontSize": 72,
              "fontFamily": "Montserrat",
              "color": "#FFFFFF",
              "position": { "x": 540, "y": 960 },
              "animations": [
                {
                  "type": "fadeInUp",
                  "duration": 0.8,
                  "delay": 0.2
                }
              ]
            }
          ]
        }
      ]
    },
    "output_format": "mp4"
  }
}

Retourneert: Een URL of bestandspad naar het gerenderde videobestand.


render_image

Genereert een enkel frame of stilstaand beeld vanuit een JSON-template. Nuttig voor het maken van thumbnails, sociale media-afbeeldingen, posterframes en statisch marketingmateriaal.

Parameters:

  • template (object, verplicht) – Het JSON-template dat de beeldcompositie definieert.
  • inputs (object, optioneel) – Templatevariabele substitutiewaarden.
  • output_format (string, optioneel) – Uitvoerformaat: png, jpeg of webp. Standaard png.
  • frame (number, optioneel) – Welk frame te renderen (voor het extraheren van een specifiek moment uit een geanimeerd template).

Wanneer render_image vs render_video te gebruiken:

  • Gebruik render_image voor statische uitvoer: thumbnails, banners, sociale media-posts, presentatieslides.
  • Gebruik render_video voor alles met beweging: animaties, overgangen, audio, videoclips.

start_render_async

Start een asynchrone rendertaak voor video’s met lange duur (meestal meer dan 30 seconden). In plaats van synchroon te wachten tot de render voltooid is, retourneert deze tool een job-ID dat je kunt pollen met check_render_status.

Parameters:

  • template (object, verplicht) – Het complete JSON-template.
  • inputs (object, optioneel) – Templatevariabelewaarden.
  • output_format (string, optioneel) – Gewenst uitvoerformaat.

Retourneert: Een job_id string die kan worden gebruikt met check_render_status en list_render_jobs.

Wanneer asynchrone rendering te gebruiken:

  • Video’s langer dan 30 seconden
  • Templates met veel scènes of complexe animaties
  • Batch rendering-workflows waarbij je meerdere taken wilt indienen en later resultaten wilt verzamelen
  • Cloud rendering-omgevingen waar langlopende synchrone verzoeken kunnen time-outen

check_render_status

Controleert de huidige status van een asynchrone rendertaak gestart met start_render_async.

Parameters:

  • job_id (string, verplicht) – Het job-ID geretourneerd door start_render_async.

Retourneert: Een object met:

  • status – Een van queued, rendering, completed of failed.
  • progress – Een percentage (0-100) dat de rendervoortgang aangeeft.
  • output_url – De URL van de voltooide video (alleen aanwezig wanneer status completed is).
  • error – Foutmelding als de taak is mislukt.

Voorbeeld polling-workflow:

AI Agent:
1. start_render_async → job_id: "abc-123"
2. check_render_status("abc-123") → status: "rendering", progress: 35
3. check_render_status("abc-123") → status: "rendering", progress: 78
4. check_render_status("abc-123") → status: "completed", output_url: "https://..."

list_render_jobs

Geeft een lijst van alle asynchrone renderingtaken, zowel actieve als voltooide. Nuttig voor het monitoren van batch rendering-operaties of het bekijken van recente uitvoer.

Parameters:

  • status_filter (string, optioneel) – Filter op status: queued, rendering, completed, failed of all. Standaard all.
  • limit (number, optioneel) – Maximum aantal taken om te retourneren.

Retourneert: Een array van taakobjecten, elk met job_id, status, progress, created_at en output_url (indien voltooid).


Validatie & Ontdekking-tools

Deze tools helpen AI-agents te begrijpen wat Rendervid kan doen en te verifiëren dat templates correct zijn voordat ze renderen.

validate_template

Valideert een JSON-template voordat het wordt gerenderd. Deze tool controleert de templatestructuur, veldtypes, waardebeperkingen en verifieert zelfs of media-URL’s (afbeeldingen, video’s, audiobestanden) toegankelijk zijn. Het uitvoeren van validatie voor rendering voorkomt verspilde tijd op templates die tijdens het renderproces zouden falen.

Parameters:

  • template (object, verplicht) – Het te valideren JSON-template.
  • check_urls (boolean, optioneel) – Of media-URL’s moeten worden geverifieerd op toegankelijkheid. Standaard true.

Retourneert: Een object met:

  • valid – Boolean die aangeeft of het template geldig is.
  • errors – Array van foutobjecten met path, message en severity voor elk gevonden probleem.
  • warnings – Array van waarschuwingsobjecten voor niet-kritieke problemen (bijv. ongebruikte variabelen, zeer grote afmetingen).

Wat validatie vangt:

  • Ontbrekende verplichte velden (bijv. een scène zonder duration)
  • Ongeldige veldtypes (bijv. een string waar een getal wordt verwacht)
  • Onbekende laagtypen of animatiepresets
  • Kapotte of ontoegankelijke media-URL’s (afbeeldingen, video’s, audiobestanden)
  • Waarden buiten bereik (bijv. negatieve afmetingen, fps boven maximum)
  • Templatevariabele syntaxisfouten

Voorbeeld validatierespons:

{
  "valid": false,
  "errors": [
    {
      "path": "scenes[0].layers[2].src",
      "message": "URL retourneerde HTTP 404: https://example.com/missing-image.png",
      "severity": "error"
    },
    {
      "path": "scenes[1].duration",
      "message": "Scèneduur moet een positief getal zijn",
      "severity": "error"
    }
  ],
  "warnings": [
    {
      "path": "outputSettings.width",
      "message": "Breedte 7680 is zeer groot en kan leiden tot langzame rendering",
      "severity": "warning"
    }
  ]
}

get_capabilities

Retourneert een uitgebreide beschrijving van alles wat Rendervid kan doen. Dit is doorgaans de eerste tool die een AI-agent aanroept bij het starten van een videogeneratietaak. De respons bevat beschikbare laagtypen, animatiepresets, easing-functies, filters, uitvoerformaten en hun JSON-schema’s.

Parameters: Geen.

Retourneert: Een gestructureerd object met:

  • layerTypes – Alle beschikbare laagtypen (text, image, video, shape, audio, group, lottie, custom) met hun JSON-schema’s en configureerbare eigenschappen.
  • animations – Alle animatiepresets gegroepeerd per categorie (entrance, exit, emphasis, keyframe) met beschrijvingen en configureerbare parameters.
  • easingFunctions – Alle 30+ easing-functies met beschrijvingen en gebruiksvoorbeelden.
  • filters – Beschikbare visuele filters (blur, brightness, contrast, saturate, grayscale, sepia, etc.) met parameterbereiken.
  • outputFormats – Ondersteunde uitvoerformaten voor video- en beeldrendering met hun beperkingen.
  • inputTypes – Templatevariabeletypes en validatieregels.
  • sceneTransitions – Alle 17 scèneovergangstypen met hun parameters.

Waarom deze tool cruciaal is voor AI-agents:

De capabilities-respons is een zelfbeschrijvende API. Een AI-agent hoeft niet vooraf getraind te worden op het templateformaat van Rendervid. Het kan tijdens runtime get_capabilities aanroepen, het complete schema ontvangen en bij de eerste poging geldige templates genereren. Wanneer Rendervid nieuwe functies, animaties of laagtypen toevoegt, krijgen AI-agents automatisch toegang tot deze via deze tool zonder codewijzigingen.


get_example

Laadt een specifiek voorbeeldtemplate op naam. AI-agents gebruiken dit om een werkend template als startpunt op te halen en het vervolgens aan te passen aan de vereisten van de gebruiker.

Parameters:

  • name (string, verplicht) – De naam van het voorbeeldtemplate (bijv. instagram-story, product-showcase, animated-bar-chart).

Retourneert: Het complete JSON-template voor het gevraagde voorbeeld, klaar om te renderen of aan te passen.

Voorbeeld:

AI Agent roept aan: get_example("instagram-story")
Retourneert: Compleet 1080x1920 Instagram story-template met tekstlagen,
         achtergrondafbeelding en entrance-animaties

list_examples

Bladert door de volledige catalogus van 50+ voorbeeldtemplates georganiseerd per categorie. AI-agents gebruiken dit om relevante starttemplates te vinden voor het verzoek van de gebruiker.

Parameters:

  • category (string, optioneel) – Filter op categorie (bijv. social-media, marketing, data-visualization, typography, e-commerce).

Retourneert: Een array van voorbeeld-metadataobjecten, elk met:

  • name – Template-identifier voor gebruik met get_example.
  • category – Templatecategorie.
  • description – Wat het template creëert.
  • dimensions – Uitvoerbreedte en -hoogte.
  • duration – Templateduur in seconden.

Documentatie-tools

Deze tools bieden gedetailleerde referentiedocumentatie die AI-agents kunnen raadplegen bij het construeren van templates.

get_component_docs

Retourneert gedetailleerde documentatie voor een specifiek component of laagtype . Bevat eigenschapsbeschrijvingen, verplichte vs optionele velden, standaardwaarden en gebruiksvoorbeelden.

Parameters:

  • component (string, verplicht) – De naam van het component/laagtype (bijv. text, image, video, shape, audio, group, lottie, custom, AnimatedLineChart, TypewriterEffect).

Retourneert: Uitgebreide documentatie inclusief:

  • Eigenschappentabel met types, standaardwaarden en beschrijvingen
  • JSON-schema voor het component
  • Gebruiksvoorbeelden
  • Opmerkingen over verschillen in browser vs Node.js rendering

get_animation_docs

Retourneert de complete animatie-effectenreferentie, inclusief alle entrance-, exit-, emphasis- en keyframe-animatiepresets.

Parameters:

  • animation (string, optioneel) – Specifieke animatienaam om gedetailleerde documentatie voor te krijgen (bijv. fadeInUp, bounceIn, slideOutLeft). Indien weggelaten, retourneert de volledige animatiecatalogus.

Retourneert: Animatiedocumentatie inclusief:

  • Animatienaam en categorie (entrance, exit, emphasis, keyframe)
  • Beschrijving van het visuele effect
  • Configureerbare parameters (duration, delay, easing)
  • Standaardwaarden
  • Aanbevolen use cases

get_component_defaults

Retourneert de standaardwaarden en volledig JSON-schema voor een specifiek componenttype. AI-agents gebruiken dit om te begrijpen hoe een minimaal geldig component eruitziet en welke eigenschappen ze kunnen overschrijven.

Parameters:

  • component (string, verplicht) – De naam van het component/laagtype.

Retourneert: Een JSON-object met:

  • defaults – Complete standaardwaarden voor elke eigenschap
  • schema – JSON Schema dat de structuur, types en beperkingen van het component definieert
  • required – Lijst van verplichte eigenschappen

Voorbeeldrespons voor een tekstlaag:

{
  "defaults": {
    "type": "text",
    "text": "",
    "fontSize": 24,
    "fontFamily": "Arial",
    "color": "#000000",
    "fontWeight": "normal",
    "textAlign": "center",
    "position": { "x": 0, "y": 0 },
    "opacity": 1,
    "rotation": 0,
    "animations": []
  },
  "required": ["type", "text"],
  "schema": {
    "type": "object",
    "properties": {
      "text": { "type": "string", "description": "De weer te geven tekstinhoud" },
      "fontSize": { "type": "number", "minimum": 1, "maximum": 500 },
      "fontFamily": { "type": "string", "description": "Google Font-naam of systeemfont" },
      "color": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$" }
    }
  }
}

get_easing_docs

Retourneert de complete referentie voor alle beschikbare easing-functies. Easing-functies bepalen de acceleratiecurve van animaties en bepalen of ze langzaam starten, langzaam eindigen, stuiteren of een elastische curve volgen.

Parameters:

  • easing (string, optioneel) – Specifieke easing-functienaam voor gedetailleerde documentatie. Indien weggelaten, retourneert de volledige lijst.

Retourneert: Documentatie voor elke easing-functie inclusief:

  • Functienaam (bijv. easeInOutCubic, easeOutBounce, spring)
  • Wiskundige beschrijving van de curve
  • Visuele beschrijving van het bewegingsgevoel
  • Aanbevolen use cases
  • CSS-equivalent (waar van toepassing)

AI-integratie instellen

Het verbinden van Rendervid met je AI-tool vereist het toevoegen van de MCP-server aan de configuratie van je tool. Het installatieproces verschilt enigszins per tool, maar het kernconcept is hetzelfde: wijs je AI-tool naar het toegangspunt van de MCP-server van Rendervid.

Vereisten

Voordat je een AI-tool configureert, zorg ervoor dat je hebt:

  1. Node.js 18+ geïnstalleerd op je systeem
  2. Rendervid gekloond en gebouwd vanuit de GitHub-repository :
git clone https://github.com/AceDZN/rendervid.git
cd rendervid
npm install
cd mcp
npm install
npm run build
  1. FFmpeg geïnstalleerd (vereist voor video-uitvoer):
# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows (met Chocolatey)
choco install ffmpeg

Claude Desktop / Claude Code

Voeg de Rendervid MCP-server toe aan je Claude Desktop-configuratiebestand.

Locatie configuratiebestand:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

Configuratie:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/pad/naar/rendervid/mcp/build/index.js"],
      "env": {}
    }
  }
}

Vervang /pad/naar/rendervid met het daadwerkelijke pad naar je Rendervid-installatie.

Voor Claude Code (CLI), voeg dezelfde configuratie toe aan het .claude/mcp.json-bestand van je project of je globale Claude Code-instellingen. Claude Code zal automatisch de MCP-server detecteren en alle 11 tools beschikbaar maken tijdens je codeersessies.

Nadat je de configuratie hebt opgeslagen, herstart je Claude Desktop of Claude Code. Je kunt de verbinding verifiëren door Claude te vragen: “Welke Rendervid-tools zijn beschikbaar?” Claude zou alle 11 MCP-tools moeten opsommen.

Cursor IDE

Voeg de Rendervid MCP-server toe aan de MCP-configuratie van Cursor.

Configuratiebestand: .cursor/mcp.json in je projectroot (of globale Cursor-instellingen).

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/pad/naar/rendervid/mcp/build/index.js"]
    }
  }
}

Na het opslaan, herstart je Cursor. De Rendervid-tools zullen beschikbaar zijn in de AI-assistent van Cursor, waardoor je direct vanuit je editor video’s kunt genereren.

Windsurf IDE

Windsurf ondersteunt MCP-servers via zijn AI-configuratie. Voeg de Rendervid-server toe aan je Windsurf MCP-instellingen:

{
  "mcpServers": {
    "rendervid": {
      "command": "node",
      "args": ["/pad/naar/rendervid/mcp/build/index.js"]
    }
  }
}

Raadpleeg de documentatie van Windsurf voor de exacte locatie van het configuratiebestand, aangezien deze kan variëren per versie en besturingssysteem.

Generieke MCP-installatie

Elke tool die de MCP-clientspecificatie implementeert, kan verbinding maken met de MCP-server van Rendervid. De server communiceert via stdio (standaardinvoer/uitvoer), wat het standaard MCP-transport is.

Om te integreren met een aangepaste MCP-client:

  1. Start het MCP-serverproces:
    node /pad/naar/rendervid/mcp/build/index.js
    
  2. Communiceer via stdin/stdout met behulp van het MCP JSON-RPC-protocol.
  3. Roep tools/list aan om beschikbare tools te ontdekken.
  4. Roep tools/call aan met de toolnaam en argumenten om elke tool uit te voeren.

De MCP-server is staatloos. Elke toolaanroep is onafhankelijk en de server kan gelijktijdige verzoeken van meerdere clients verwerken.


AI-workflow: End-to-end voorbeelden

De volgende voorbeelden laten zien hoe AI-agents de MCP-tools van Rendervid gebruiken om van een natuurlijke taalprompt naar een voltooide video te gaan.

Voorbeeld 1: Sociale media-contentcreatie

Gebruikersprompt: “Maak een 10 seconden durende Instagram story die een zomeruitverkoop promoot met geanimeerde tekst en een gradiëntachtergrond”

AI-agent workflow:

Stap 1 – Ontdek mogelijkheden:

De agent roept get_capabilities aan om te leren over beschikbare laagtypen, animatiepresets en uitvoerbeperkingen. Het ontdekt dat text- en shape-lagen beschikbaar zijn, fadeInUp- en scaleIn-animaties bestaan en Instagram stories een resolutie van 1080x1920 gebruiken.

Stap 2 – Vind een starttemplate:

De agent roept list_examples aan met category: "social-media" en vindt een instagram-story-template. Vervolgens roept het get_example("instagram-story") aan om de volledige template-JSON te laden.

Stap 3 – Bouw het template:

Met het voorbeeld als referentie construeert de agent een aangepast template:

{
  "outputSettings": {
    "width": 1080,
    "height": 1920,
    "fps": 30,
    "duration": 10
  },
  "scenes": [
    {
      "duration": 10,
      "layers": [
        {
          "type": "shape",
          "shapeType": "rectangle",
          "width": 1080,
          "height": 1920,
          "gradient": {
            "type": "linear",
            "angle": 135,
            "stops": [
              { "color": "#FF6B35", "position": 0 },
              { "color": "#F72585", "position": 0.5 },
              { "color": "#7209B7", "position": 1 }
            ]
          }
        },
        {
          "type": "text",
          "text": "ZOMERUITVERKOOP",
          "fontSize": 96,
          "fontFamily": "Montserrat",
          "fontWeight": "bold",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 700 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.3 }
          ]
        },
        {
          "type": "text",
          "text": "50% KORTING OP ALLES",
          "fontSize": 64,
          "fontFamily": "Montserrat",
          "color": "#FFE066",
          "position": { "x": 540, "y": 850 },
          "animations": [
            { "type": "fadeInUp", "duration": 0.8, "delay": 0.6 }
          ]
        },
        {
          "type": "text",
          "text": "Shop Nu  →",
          "fontSize": 48,
          "fontFamily": "Montserrat",
          "color": "#FFFFFF",
          "position": { "x": 540, "y": 1200 },
          "animations": [
            { "type": "scaleIn", "duration": 0.6, "delay": 1.2 }
          ]
        }
      ]
    }
  ]
}

Stap 4 – Valideer:

De agent roept validate_template aan met de template-JSON. De respons komt terug als valid: true zonder fouten.

Stap 5 – Render:

De agent roept render_video aan met het gevalideerde template en ontvangt een URL naar het voltooide MP4-bestand.


Voorbeeld 2: Marketingvideo-automatisering

Gebruikersprompt: “Genereer een productshowcase-video voor onze nieuwe koptelefoon. Gebruik deze productafbeelding: https://example.com/headphones.png . De productnaam is ‘SoundPro X1’ en de prijs is €299.”

AI-agent workflow:

  1. get_capabilities – Leert over afbeeldingslagen, tekststyling en animatieopties.
  2. list_examples – Vindt een product-showcase-template in de e-commerce-categorie.
  3. get_example("product-showcase") – Laadt het complete productshowcase-template, dat templatevariabelen gebruikt voor productnaam, afbeelding en prijs.
  4. Wijzigt het template – Werkt de inputs bij met de productgegevens van de gebruiker:
    {
      "inputs": {
        "productName": "SoundPro X1",
        "productImage": "https://example.com/headphones.png",
        "price": "€299",
        "tagline": "Premium geluid, opnieuw gedefinieerd"
      }
    }
    
  5. validate_template – Verifieert het template en bevestigt dat https://example.com/headphones.png toegankelijk is.
  6. render_video – Produceert de uiteindelijke productshowcase-video.

Deze workflow demonstreert hoe AI-agents templatevariabelen gebruiken om gepersonaliseerde content te creëren vanuit herbruikbare templates. Hetzelfde productshowcase-template kan honderden unieke video’s genereren door de inputs te wisselen.


Voorbeeld 3: Datavisualisatiegeneratie

Gebruikersprompt: “Maak een geanimeerd staafdiagram dat kwartaalomzet toont: Q1: €1,2M, Q2: €1,8M, Q3: €2,1M, Q4: €2,7M”

AI-agent workflow:

  1. get_capabilities – Ontdekt het custom-laagtype en het ingebouwde AnimatedLineChart-component .
  2. get_component_docs("AnimatedLineChart") – Leest de documentatie voor het grafiekcomponent en leert over dataformaat, kleurconfiguratie, aslabels en animatieopties.
  3. get_component_defaults("AnimatedLineChart") – Krijgt de standaardwaarden en JSON-schema om de minimaal vereiste configuratie te begrijpen.
  4. Bouwt een template met een aangepaste componentlaag:
    {
      "type": "custom",
      "component": "AnimatedLineChart",
      "props": {
        "data": [
          { "label": "Q1", "value": 1200000 },
          { "label": "Q2", "value": 1800000 },
          { "label": "Q3", "value": 2100000 },
          { "label": "Q4", "value": 2700000 }
        ],
        "colors": ["#4361EE", "#3A0CA3", "#7209B7", "#F72585"],
        "title": "Kwartaalomzet 2025",
        "yAxisLabel": "Omzet (EUR)",
        "animationDuration": 2
      }
    }
    
  5. validate_template – Bevestigt dat de templatestructuur correct is.
  6. render_video – Genereert de geanimeerde grafiekvideo.

Zelfbeschrijvende API: Hoe capabilities AI-agents effectief maken

De get_capabilities-tool is de hoeksteen van de AI-integratie van Rendervid. Het implementeert een zelfbeschrijvend API-patroon, waarbij het systeem AI-agents precies vertelt wat het kan doen, welke parameters vereist zijn en welke waarden geldig zijn. Dit elimineert de noodzaak voor AI-modellen om de specifieke API van Rendervid te onthouden of erop getraind te worden.

Wat de capabilities-respons bevat

Wanneer een AI-agent get_capabilities aanroept, ontvangt het een gestructureerde respons die elk aspect van het renderingsysteem dekt:

Laagtypen met JSON-schema’s:

{
  "layerTypes": {
    "text": {
      "description": "Rendert tekst met volledige stylingcontrole",
      "schema": {
        "properties": {
          "text": { "type": "string", "required": true },
          "fontSize": { "type": "number", "default": 24, "min": 1, "max": 500 },
          "fontFamily": { "type": "string", "default": "Arial" },
          "color": { "type": "string", "format": "hex-color" },
          "position": { "type": "object", "properties": { "x": {}, "y": {} } },
          "animations": { "type": "array", "items": { "$ref": "#/animations" } }
        }
      }
    },
    "image": { "..." : "..." },
    "video": { "..." : "..." },
    "shape": { "..." : "..." },
    "audio": { "..." : "..." },
    "group": { "..." : "..." },
    "lottie": { "..." : "..." },
    "custom": { "..." : "..." }
  }
}

Animatiepresets:

De capabilities-respons somt elke animatiepreset op met zijn categorie, configureerbare parameters en beschrijving. Een AI-agent die deze gegevens ontvangt, weet dat fadeInUp een entrance-animatie is met duration-, delay- en easing-parameters, en dat het het element naar boven beweegt terwijl het infadet.

Easing-functies:

Alle 30+ easing-functies worden vermeld met beschrijvingen, zodat de AI-agent de juiste curve voor elke animatie kan selecteren. Bijvoorbeeld, easeOutBounce wordt beschreven als het simuleren van een stuiteffect aan het einde van de animatie, wat de agent kan aanbevelen voor speelse of aandachttrekkende content.

Filters en effecten:

Visuele filters zoals blur, brightness, contrast, saturate, grayscale en sepia worden gedocumenteerd met hun parameterbereiken, waardoor de AI-agent post-processing-effecten op elke laag kan toepassen.

Waarom zelfbeschrijvende API’s belangrijk zijn

Traditionele API’s vereisen documentatie die AI-modellen al dan niet tijdens training hebben gezien. Een zelfbeschrijvende API biedt documentatie tijdens runtime, waardoor wordt gegarandeerd dat de AI-agent altijd actuele, nauwkeurige informatie heeft. Wanneer Rendervid een nieuwe animatiepreset of laagtype toevoegt, ziet elke verbonden AI-agent dit direct via get_capabilities. Geen documentatie-updates, geen hertraining, geen versieverschillen.


Best practices voor AI-videogeneratie

Volg deze richtlijnen om de beste resultaten te krijgen bij het gebruik van AI-agents om Rendervid-video’s te genereren.

1. Valideer altijd voor rendering

Roep validate_template aan voor elke render. Rendering is rekenintensief en validatie is bijna instant. De validatietool vangt problemen die een render zouden laten mislukken of onverwachte uitvoer zouden produceren:

  • Kapotte media-URL’s (afbeeldingen, video’s, audiobestanden die 404 retourneren)
  • Ongeldige JSON-structuur of ontbrekende verplichte velden
  • Waarden buiten bereik voor afmetingen, lettergroottes of duur
  • Onbekende animatiepresets of laagtypen

Een typische AI-workflow moet altijd validatie als stap bevatten voordat render_video of render_image wordt aangeroepen.

2. Begin met voorbeelden

In plaats van templates vanaf nul te bouwen, moeten AI-agents list_examples en get_example gebruiken om een relevant starttemplate te vinden. Voorbeeldtemplates zijn getest en produceren naar verluidt goede uitvoer. Beginnen met een voorbeeld en het aanpassen is sneller en minder foutgevoelig dan het genereren van een volledig nieuwe templatestructuur.

Aanbevolen aanpak:

  1. Roep list_examples aan met een relevante categorie
  2. Roep get_example aan voor het best passende template
  3. Pas het template aan om te voldoen aan de specifieke vereisten van de gebruiker
  4. Valideer en render

3. Gebruik beschrijvende prompts

Bij het aanvragen van video’s van een AI-agent, wees specifiek over:

  • Afmetingen en platform – “1080x1920 Instagram story” is beter dan “een verticale video”
  • Duur – “10 seconden durende intro” is beter dan “een korte video”
  • Stijl en sfeer – “donkere achtergrond met neon tekst en stuiterende animaties” geeft de AI-agent duidelijke richting
  • Contentstructuur – “Drie tekstregels die na elkaar verschijnen met fade-in-animaties” is actiebaarder dan “wat geanimeerde tekst”

4. Itereer op templates

Videogeneratie is iteratief. Na de eerste render, bekijk de uitvoer en vraag de AI-agent specifieke elementen aan te passen:

  • “Maak de titeltekst groter en verander de kleur naar goud”
  • “Vertraag de entrance-animaties en voeg een vertraging van 0,5 seconden toe tussen elke regel”
  • “Voeg een subtiel vervagingsfilter toe aan de achtergrondafbeelding”
  • “Verander de easing van lineair naar easeOutCubic voor vloeiendere beweging”

De AI-agent kan het bestaande template aanpassen en opnieuw renderen zonder opnieuw te beginnen, waardoor iteratie snel en efficiënt is.

5. Maak gebruik van templatevariabelen voor batchproductie

Als je meerdere variaties van dezelfde video nodig hebt (verschillende producten, verschillende talen, verschillende gegevens), vraag de AI-agent dan een template met variabelen te maken. Dit stelt je in staat om veel video’s te renderen vanuit een enkel template door verschillende inputs door te geven:

{
  "inputs": {
    "productName": "Hardloopschoenen Pro",
    "productImage": "https://example.com/shoes.png",
    "price": "€149",
    "tagline": "Ren sneller, ga verder"
  }
}

6. Gebruik asynchrone rendering voor lange video’s

Voor video’s langer dan 30 seconden of templates met complexe animaties, gebruik start_render_async in plaats van render_video. Dit voorkomt time-outs en stelt de AI-agent in staat andere taken uit te voeren terwijl de video op de achtergrond wordt gerenderd.


Template-ontdekking: Bladeren door 100+ voorbeelden

Rendervid bevat meer dan 100 voorbeeldtemplates verdeeld over 32 categorieën, waardoor AI-agents een rijke bibliotheek van startpunten hebben voor elke videogeneratietaak.

Hoe AI-agents templates ontdekken

De template-ontdekkingsworkflow gebruikt twee tools in volgorde:

  1. list_examples – Blader door de catalogus met optionele categoriefiltering om relevante templates te vinden.
  2. get_example – Laad het volledige JSON-template voor een specifiek voorbeeld.

Templatecategorieën

AI-agents kunnen voorbeelden filteren op categorie om snel relevante startpunten te vinden:

CategorieBeschrijvingVoorbeeldtemplates
social-mediaVoor platform geoptimaliseerde contentInstagram story, TikTok-video, YouTube-thumbnail
e-commerceProduct- en verkoopcontentProductshowcase, flash sale, prijsvergelijking
marketingPromotiemateriaalMerkintro, testimonial, functie-highlight
data-visualizationGrafieken en infographicsStaafdiagram, lijndiagram, cirkeldiagram, dashboard
typographyTekstgerichte ontwerpenKinetische tekst, quotekaarten, titelsequenties
educationLeermateriaalUitlegvideo, stap-voor-stap tutorial, diagram
presentationDia-achtige contentPitchdeck-dia’s, conference-intro, keynote
abstractVisuele effecten en kunstDeeltjessystemen, golfvisualisaties, gradiënten

Template-ontdekking in de praktijk

Wanneer een gebruiker vraagt om “een geanimeerde grafiek die verkoopgegevens toont”, de AI-agent:

  1. Roept list_examples(category: "data-visualization") aan en ontvangt een lijst van grafiekgerelateerde templates.
  2. Identificeert animated-bar-chart als de beste match op basis van de beschrijving.
  3. Roept get_example("animated-bar-chart") aan om het complete template te laden.
  4. Onderzoekt de templatestructuur om te begrijpen hoe gegevens worden geformatteerd.
  5. Vervangt de voorbeeldgegevens met de werkelijke verkoopcijfers van de gebruiker.
  6. Valideert en rendert.

Deze ontdekking-eerst-aanpak betekent dat AI-agents consequent goed gestructureerde templates produceren omdat ze bouwen op geteste voorbeelden in plaats van template-JSON vanaf nul te genereren.

Alle beschikbare templates verkennen

Om elk beschikbaar template te zien, kan een AI-agent list_examples aanroepen zonder categoriefilter. De respons bevat metadata voor alle 100+ templates, waardoor de agent over categorieën heen kan zoeken naar de beste match. Elke invoer bevat de templatenaam, categorie, beschrijving, afmetingen en duur, waardoor de agent voldoende informatie heeft om een weloverwogen selectie te maken.


Ondersteunde AI-tools

De MCP-server van Rendervid werkt met elke tool die de Model Context Protocol-clientspecificatie implementeert. De volgende tools zijn getest en bevestigd om te werken met Rendervid:

AI-toolTypeMCP-ondersteuningConfiguratiebestand
Claude DesktopDesktop-appNativeclaude_desktop_config.json
Claude CodeCLINative.claude/mcp.json
CursorIDENative.cursor/mcp.json
WindsurfIDENativeMCP-instellingen
Google AntigraviteCloud IDENativeMCP-instellingen

Omdat MCP een open standaard is, zal elke toekomstige tool die MCP-clientondersteuning toevoegt automatisch compatibel zijn met de MCP-server van Rendervid. Er zijn geen wijzigingen aan de server of zijn tools vereist.


Volgende stappen

  • Rendervid-overzicht – Leer over alle Rendervid-functies, uitvoerformaten en architectuur.
  • Templatesysteem – Diepgaande duik in JSON-templatestructuur, variabelen en het invoersysteem.
  • Componenten-referentie – Documentatie voor alle laagtypen en aangepaste React-componenten.
  • Implementatiegids – Implementeer Rendervid naar AWS Lambda, Azure Functions, Google Cloud Run of Docker voor cloudschaal rendering.
  • GitHub-repository – Broncode, issue tracker en community-bijdragen.

Veelgestelde vragen

Laat ons uw eigen AI-team bouwen

Wij helpen bedrijven zoals die van u bij het ontwikkelen van slimme chatbots, MCP-servers, AI-tools of andere soorten AI-automatisering om mensen te vervangen bij repetitieve taken in uw organisatie.

Meer informatie

De Ultieme Gids voor de Sora-2 App: Next-Gen AI Videocreatie
De Ultieme Gids voor de Sora-2 App: Next-Gen AI Videocreatie

De Ultieme Gids voor de Sora-2 App: Next-Gen AI Videocreatie

Ontdek alles wat je moet weten over de Sora-2 app—haar mogelijkheden, toepassingen en hoe deze zich verhoudt tot toonaangevende AI-videogenerators. Leer hoe je ...

5 min lezen
ai video ai content +1
json2video-mcp
json2video-mcp

json2video-mcp

Integreer FlowHunt met de json2video-mcp-server om programmatische videogeneratie te automatiseren, aangepaste sjablonen te beheren en videowerkstromen te koppe...

4 min lezen
AI Video Automation +3