Bonjour à tous,
Je partage un widget que je viens de stabiliser : Artefactory, un mini-IDE qui tourne comme custom widget Grist et qui permet de créer, éditer et prévisualiser ses widgets directement depuis un document Grist — code stocké dans une table du document, pas de backend, pas de dépôt à maintenir.
Démo live (avec guide intégré) : 🏭Artefactory v1 - Grist
Widget : Artefactory AI v11
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
① Ce que ça fait
Artefactory transforme une table Grist en mini-IDE :
● Éditeur Ace (coloration, autocomplete) avec preview live (~800 ms hot-reload)
● 6 types d’artefacts : React/JSX, HTML, widget Grist, SVG, Mermaid, Markdown
● Bridge Grist injecté automatiquement dans les artefacts → un widget écrit dans Artefactory peut lire/écrire dans le doc comme un widget natif (grist.docApi.fetchTable, applyUserActions, onRecord…)
● Stockage 100 % dans Grist : chaque artefact est une ligne d’une table Artefacts créée automatiquement au premier lancement
● Documentation contextuelle : les artefacts Markdown marqués IsDoc=true apparaissent comme chips sélectionnables pour enrichir le contexte de l’assistant IA
Le doc de démo contient le widget Artefactory lui-même + un guide complet en artefacts (un par type) — dupliquez-le pour tester chez vous.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
② Architecture - bridge Grist + iframe sandbox
Chaque artefact est rendu dans une iframe srcdoc sandboxée. Le widget remplace automatiquement <script src="grist-plugin-api.js"> par un faux window.grist qui proxy via postMessage vers le widget host, qui appelle le vrai Grist.
Concrètement, le code écrit dans Artefactory utilise les mêmes APIs qu’un widget Grist déployé classiquement — mais sans avoir à le déployer.
Pour les artefacts React, l’environnement inclut React 18, Tailwind CDN et une dizaine de composants UI inlinés (Card, Button, Input, Badge…) prêts à l’emploi sans imports.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
③ Brancher un assistant IA (optionnel)
Le widget intègre un panneau IA, mais Artefactory n’embarque aucun modèle. Il envoie un POST JSON à un webhook que vous configurez. C’est vous qui décidez quel agent répond :
● Claude / GPT via un proxy Cloudflare Workers ou Vercel (~30 lignes de Node)
● Albert API via n8n
● Un agent Ollama local
● Un n’importe-quoi maison qui retourne { code, message }
Le contrat HTTP est documenté côté repo, et un system prompt copiable est fourni pour que l’agent connaisse les contraintes du widget (APIs Grist disponibles, env React, anti-patterns) — ça évite qu’il génère du code qui crash en inventant des APIs.
Le panneau IA est entièrement masquable. Vous pouvez utiliser Artefactory sans IA comme simple éditeur.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
④ Retours
● Cas d’usage où vous l’utiliseriez ?
● Patterns de webhook que vous avez déjà mis en place côté Albert / n8n / Ollama ?
● Retours d’expérience sur d’autres tentatives d’éditeurs in-Grist ?
Issues et MR bienvenues sur le dépôt.
Démo live : 🏭Artefactory v1 - Grist
Code et docs : GitHub - nic01asFr/Widgets-Grist · GitHub
#Grist #CustomWidget #LLM #IDE #OpenSource