Backend Go + SQLite — aucune base à installer

Éditez votre site
dans la page.
D'un double-clic.

Site Editor rend les textes de votre site Next.js modifiables en place : un attribut HTML, un double-clic, c'est enregistré. Pour les changements plus ambitieux, décrivez-les — Claude s'en charge.

Démarrer en 5 minutes Voir sur GitHub

Un attribut HTML suffit Texte d'origine conservé API REST + WebSocket

localhost:3000

Atelier Dumont

AccueilServicesContact

data-editable="home:title"

Bienvenue sur mon site

data-editable="home:subtitle"

Votre partenaire digital

Nous contacter

// ce que le backend Go reçoit

GET /api/content/home:title 200

GET /api/content/home:subtitle 200

Essayez : double-cliquez sur le titre

Un site éditable, sans back-office

Vous écrivez vos pages comme d'habitude. Site Editor s'occupe du reste.

Édition en place

Double-cliquez, écrivez, c'est fait

Tout élément portant data-editable devient modifiable dans la page. Cliquez ailleurs : la modification est enregistrée. Aucune interface d'administration à apprendre.

Piloté par l'IA

Décrivez le changement, Claude l'exécute

Une commande en langage naturel lance Claude CLI dans le dossier de votre projet. Sa sortie arrive en direct par WebSocket, et vous pouvez l'interrompre à tout moment.

Rien n'est perdu

Le texte d'origine reste intact

Le texte de votre code et sa version modifiée sont stockés séparément dans SQLite. Chaque commande IA y est aussi consignée, avec son statut et son résultat.

Au-delà du texte :
demandez-le à l'IA

Envoyez une consigne et une portée. Le backend lance Claude CLI dans votre projet et vous renvoie tout ce qu'il écrit, ligne par ligne. De quoi brancher une palette ⌘K sur votre site en quelques lignes.

current-page Modifier la page en cours

new-page Créer une nouvelle page

global Agir sur tout le site : navigation, mise en page…

Interruption à tout moment, par WebSocket ou par HTTP
Statut consultable après coup : terminé, échoué, interrompu
Une API SSE générique pour piloter n'importe quel autre outil en ligne de commande

site editor — commande IA

$ curl -X POST localhost:9000/api/ai/command \
    -H "Content-Type: application/json" \
    -d '{"prompt": "Ajoute un formulaire de contact",
         "scope": "current-page",
         "context": {"page": "/contact"}}'
→ {"commandId": "cmd_1760820931_a1b2c3d4", "status": "queued"}

$ wscat -c ws://localhost:9000/api/ai/command/cmd_…/stream
status   WebSocket connected, starting AI processing
status   Starting Claude CLI...
output   J'ajoute le formulaire dans app/contact/page.tsx
output   Champs : nom, e-mail, message. Validation côté client.
result   1 page modifiée · /contact
complete Command completed successfully (38.2s)
$ ▋

Flux en direct

Comment ça marche

Cinq étapes. Les quatre premières suffisent pour l'édition en place.

Lancez le backend

Il faut Go 1.21 ou plus récent. Le serveur écoute sur le port 9000 et crée sa base content.db au premier démarrage. Vous préférez Docker ? docker compose up --build fait la même chose.

$ git clone https://github.com/poqudrof/website-editor.git
$ cd website-editor/backend
$ go run .
Server started on :9000

Marquez vos textes

Ajoutez data-editable="page:élément" aux éléments à rendre modifiables. L'identifiant sert de clé en base ; le texte de votre code reste la valeur par défaut.

<h1 data-editable="home:title">Bienvenue sur mon site</h1>
<p data-editable="home:subtitle">Votre partenaire digital</p>

Montez le composant EditableHandler

Un seul composant client, sans dépendance, à copier depuis le tutoriel puis à placer une fois dans app/layout.tsx. Il charge les contenus enregistrés et écoute les double-clics.

<body>
  <EditableHandler />
  {children}
</body>

Double-cliquez, modifiez, cliquez ailleurs

Le texte devient éditable au double-clic et part vers le backend dès que vous quittez le champ. Rechargez la page : votre version est toujours là, et l'original aussi, côté base.

Branchez l'IA — facultatif

Installez Claude CLI, authentifiez-vous une fois, puis indiquez au backend le dossier de votre site. Les commandes IA s'y exécuteront. L'image Docker embarque déjà Claude CLI.

$ npm install -g @anthropic-ai/claude-code
$ claude                  # une fois, pour s'authentifier
$ export CLAUDE_WORKSPACE_DIR=/chemin/vers/votre-site
$ go run .

Trois API, un seul serveur

Tout passe par localhost:9000. Utilisez ce dont vous avez besoin.

Contenu

REST

Lit et enregistre chaque texte. La réponse distingue l'original, la version modifiée et l'indicateur is_edited.

GET/api/content/:id
PUT/api/content/:id

Commandes IA

WebSocket

Soumettez une consigne, suivez Claude en direct, interrompez si besoin.

POST/api/ai/command
WS/api/ai/command/:id/stream
GET/api/ai/command/:id/status
POST/api/ai/command/:id/interrupt

Agent générique

SSE

Lance n'importe quelle commande, diffuse sa sortie par Server-Sent Events et gère son cycle de vie.

POST/api/agent/run
GET/api/agent/stream/:sessionId
GET/api/agent/status/:sessionId
POST/api/agent/interrupt/:sessionId
POST/api/agent/cleanup

Configuration

Deux variables d'environnement, et c'est tout.

CLAUDE_WORKSPACE_DIR

Dossier où Claude travaille. Par défaut /workspace/code.
LOG_LEVEL=HIGH

Journalise en détail chaque appel à Claude CLI et sa sortie.

Pensé pour le développement local. L'API est ouverte : CORS permissif, pas d'authentification, et l'API Agent exécute des commandes sur le serveur. Ajoutez authentification et limitation de débit avant de l'exposer sur Internet.

Éditez votre site dans la page. D'un double-clic.