Studio-code

Deze tekst is vertaald met AI. Als je de oorspronkelijke tekst in het Engels wilt bekijken, klik hier.

Studio Code is een agentic coding-tool die is ingebouwd in de Studio desktop-app en Studio CLI.

Je krijgt een interactieve chat waarmee je WordPress-sites via gesprekken kunt bouwen, aanpassen en beheren, themes en plugins kunt maken, bestanden kunt bewerken, WP-CLI-opdrachten kunt uitvoeren, previews kunt implementeren en je site kunt publiceren.

Aan de slag

Studio Code is beschikbaar in de Studio desktop-app en als onderdeel van het zelfstandige npm-pakket Studio CLI.

Studio Code in Studio Desktop

Studio Code in de Studio desktop-app is ingebouwd in een gebruiksvriendelijke, vertrouwde interface en vereist geen npm-afhankelijkheden.

Open je WordPress Studio desktop-app, klik op een site (of voeg een nieuwe site toe) en klik vervolgens op de tab “Studio Code”.

Studio Code in Studio CLI

Als je de Studio-desktopapp hebt geïnstalleerd met de CLI ingeschakeld, kun je studio code rechtstreeks vanuit de terminal gebruiken.

Anders kun je het rechtstreeks uitvoeren met npx:

npx wp-studio@latest code

En je kunt het globaal installeren om studio code rechtstreeks te gebruiken:

npm i -g wp-studio@latest
studio code

Druk op de pijl ↓ om in je lokale Studio-sites te werken, of op ↓ en → om in je sites te werken die met WordPress.com of Jetpack zijn verbonden.

Verbinden met WordPress.com

Standaard gebruikt Studio Code de infrastructuur van WordPress.com om AI-antwoorden te genereren. Log in bij WordPress.com om aan de slag te gaan — in de desktopapp of in je terminal door de onderstaande instructies te volgen:

1. Voer studio code uit in je terminal.
2. Typ /login in de chat.
3. Er wordt een browservenster geopend. Log in op je WordPress.com-account en keur de verbinding goed.
4. Plak de autorisatietoken terug in de terminal om het inloggen te voltooien.

Je kunt ook je eigen Anthropic API key gebruiken door /api-key in de chat te typen.

Studio Code gebruiken

Typ je verzoek in natuurlijke taal en de AI-agent voert het voor je uit: bestanden maken, commando’s uitvoeren en wijzigingen aanbrengen in je site.

Voorbeeldworkflows

Maak een nieuwe site en pas deze aan:

• Maak een nieuwe WordPress-site met de naam “My Portfolio” met PHP 8.2
• Bouw een minimale portfolio theme met een donker kleurenschema
• Voeg een homepage toe met een hero-sectie en projectraster

Deel je werk:

• Maak een voorbeeldsite zodat ik dit met mijn klant kan delen
• Werk de voorbeeldsite bij met mijn nieuwste wijzigingen

Publiceer je werk:

• Publiceer de site “My Portfolio” naar examplesite.com

De agent kan bestanden in je sitedirectory lezen en schrijven, WP-CLI-commando’s uitvoeren, screenshots van je site maken en wijzigingen naar WordPress.com pushen, allemaal op basis van jouw instructies.

Slash-commando’s

Tijdens het chatten kun je slash-commando’s gebruiken voor snelle acties:

AI-modellen

Studio Code ondersteunt drie AI-modellen:

• Claude Sonnet 4.6 (standaard): snel en efficiënt voor de meeste taken
• Claude Opus 4.8: geschikter voor complexe taken met meerdere stappen
• GPT 5.5: snel en efficiënt voor de meeste taken, met OpenAI

Wissel op elk moment van model:

• Desktop: selecteer het onderaan de chat in het dropdownmenu
• Terminal: voer het commando /model uit

Uploads

Upload afbeeldingen en bestanden naar Studio Code om ze in je project te gebruiken:

• Desktop: sleep naar de chat of klik op het paperclippictogram
• Terminal: sleep naar de chat of verwijs naar een specifiek lokaal bestand of een specifieke lokale map

Nieuwe gesprekken

Wis je gesprek en start een nieuw gesprek:

• Desktop: klik op de knop “Nieuw gesprek”
• Terminal: voer de opdracht /clear uit

Terminal-specifieke richtlijnen

De terminalversie van Studio Code heeft een paar extra mogelijkheden:

AI-providers

Je kunt kiezen hoe AI-antwoorden worden gegenereerd:

• WordPress.com (standaard): gebruikt je WordPress.com-account. Er is geen extra configuratie nodig naast inloggen. Limieten veranderen na early access.
• Anthropic API key: gebruikt je eigen API key voor directe toegang tot Claude. Stel deze in met de opdracht /api-key.

Wissel van provider met de opdracht /provider.

Sessies

Studio Code slaat je gespreksgeschiedenis automatisch op, zodat je verder kunt gaan waar je was gebleven.

Een sessie hervatten

studio code sessions list                  # View all saved sessions

studio code sessions resume                # Interactive picker

studio code sessions resume latest         # Resume the most recent session

studio code sessions resume <id>           # Resume a specific session by ID

Een sessie verwijderen

studio code sessions delete                # Interactive picker

studio code sessions delete <id>           # Delete a specific session

Sessieopname uitschakelen

Als je gesprekken liever niet opslaat, gebruik dan de vlag –no-session-persistence:

studio code --no-session-persistence

Opdrachtreferenties

studio code                                # Start a new chat session

studio code --path /path/to/site           # Start with a specific site directory

studio code --no-session-persistence       # Start without saving the session

studio code sessions list                  # List saved sessions

studio code sessions resume [id]           # Resume a session

studio code sessions delete [id]           # Delete a session

Voor de volledige set opties:

studio code --help