forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | # Tutoriel : premiers pas avec Ori |
| 2 | ||
| 3 | À la fin de ce tutoriel, vous aurez compilé Ori, lancé l'application avec son agent de démonstration intégré, et mené une conversation complète dans votre navigateur — réponse streamée, plan visible, tool calls et une permission que vous accorderez vous-même. Aucune connaissance préalable d'ACP n'est requise. | |
| 4 | ||
| 5 | ## Prérequis | |
| 6 | ||
| 7 | - Go 1.26 ou plus récent (`go version`) | |
| 8 | - Node.js 24 ou plus récent avec npm (`node --version`) | |
| 9 | - Un navigateur web | |
| 10 | ||
| 11 | ## Étape 1 — Installer les dépendances du front | |
| 12 | ||
| 13 | Depuis la racine du dépôt, tapez : | |
| 14 | ||
| 15 | ```bash | |
| 16 | make deps | |
| 17 | ``` | |
| 18 | ||
| 19 | Vous devriez voir npm résoudre les paquets et terminer par une ligne du type : | |
| 20 | ||
| 21 | ``` | |
| 22 | added 158 packages, and audited 159 packages in 9s | |
| 23 | ``` | |
| 24 | ||
| 25 | Nous venons d'installer tout ce dont le build de la SPA a besoin. | |
| 26 | ||
| 27 | ## Étape 2 — Compiler et lancer Ori avec l'agent de démonstration | |
| 28 | ||
| 29 | Tapez : | |
| 30 | ||
| 31 | ```bash | |
| 32 | make run-mock | |
| 33 | ``` | |
| 34 | ||
| 35 | Vous devriez voir le build de la SPA, le build Go, puis : | |
| 36 | ||
| 37 | ``` | |
| 38 | INFO starting agent command="[bin/ori-mock-agent]" cwd=… | |
| 39 | INFO agent session ready sessionId=mock-1 | |
| 40 | INFO ori listening addr=:8888 | |
| 41 | ``` | |
| 42 | ||
| 43 | Nous venons de démarrer l'application complète : le serveur écoute et il est déjà connecté, en ACP, à `ori-mock-agent` — un petit agent déterministe qui n'exige ni compte ni réseau. | |
| 44 | ||
| 45 | ## Étape 3 — Ouvrir le panel | |
| 46 | ||
| 47 | Ouvrez [http://localhost:8888](http://localhost:8888) dans votre navigateur. | |
| 48 | ||
| 49 | Vous devriez voir le panel Ori : un entête affichant `online · mock-1`, une conversation vide, et une zone de saisie en bas. | |
| 50 | ||
| 51 | ## Étape 4 — Envoyer votre premier message | |
| 52 | ||
| 53 | Tapez `bonjour` dans la zone de saisie et appuyez sur Entrée. | |
| 54 | ||
| 55 | Vous devriez voir un spinner apparaître en bas du fil avec des phrases d'attente tournantes (*Pondering…*, *Brewing ideas…*), puis, en streaming, l'un après l'autre : | |
| 56 | ||
| 57 | - votre propre message, aligné à droite ; | |
| 58 | - un bloc **💭 Thinking…** montrant la réflexion de l'agent en direct pendant qu'elle streame (il se replie en *💭 Thought for a moment* à la fin du tour — cliquez pour le rouvrir) ; | |
| 59 | - une checklist **Plan (0/2)** ; | |
| 60 | - une carte de tool call **📖 Reading README.md** dont le badge passe à **done** ; | |
| 61 | - le début de la réponse de l'agent. | |
| 62 | ||
| 63 | Nous venons d'exécuter la première moitié d'un tour : l'agent streame ses updates et le panel donne à chaque type sa propre forme. | |
| 64 | ||
| 65 | ## Étape 5 — Accorder la permission | |
| 66 | ||
| 67 | Le panel affiche maintenant une carte **🔐 Write hello.txt** avec deux boutons. | |
| 68 | ||
| 69 | Cliquez sur **Allow once**. | |
| 70 | ||
| 71 | Vous devriez voir une seconde carte de tool call **✏️ Writing hello.txt** avec un diff en vert, puis la réponse finale de l'agent — `Done! You said: bonjour` suivie d'une petite checklist — et le plan afficher **Plan (2/2)**. | |
| 72 | ||
| 73 | Nous venons de boucler le cycle complet : l'agent a demandé une permission, votre clic lui est revenu à travers le backend, et il a terminé son tour. | |
| 74 | ||
| 75 | ## Et maintenant ? | |
| 76 | ||
| 77 | Vous avez fait tourner Ori de bout en bout avec l'agent de démonstration. Pour aller plus loin : | |
| 78 | ||
| 79 | - Pour parler à un vrai agent → [Lancer Ori avec Claude Code](../how-to/run-with-claude-code.md) | |
| 80 | - Pour brancher un autre agent → [Utiliser un autre agent ACP](../how-to/use-another-agent.md) | |
| 81 | - Pour comprendre ce qui s'est passé entre le navigateur et l'agent → [Explication : architecture](../explanation/architecture.md) |