Tutoriel : premiers pas avec Ori

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

# Tutoriel : premiers pas avec Ori

À 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.

## Prérequis

- Go 1.26 ou plus récent (`go version`)
- Node.js 24 ou plus récent avec npm (`node --version`)
- Un navigateur web

## Étape 1 — Installer les dépendances du front

Depuis la racine du dépôt, tapez :

```bash
make deps
```

Vous devriez voir npm résoudre les paquets et terminer par une ligne du type :

```
added 158 packages, and audited 159 packages in 9s
```

Nous venons d'installer tout ce dont le build de la SPA a besoin.

## Étape 2 — Compiler et lancer Ori avec l'agent de démonstration

Tapez :

```bash
make run-mock
```

Vous devriez voir le build de la SPA, le build Go, puis :

```
INFO starting agent command="[bin/ori-mock-agent]" cwd=…
INFO agent session ready sessionId=mock-1
INFO ori listening addr=:8888
```

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.

## Étape 3 — Ouvrir le panel

Ouvrez [http://localhost:8888](http://localhost:8888) dans votre navigateur.

Vous devriez voir le panel Ori : un entête affichant `online · mock-1`, une conversation vide, et une zone de saisie en bas.

## Étape 4 — Envoyer votre premier message

Tapez `bonjour` dans la zone de saisie et appuyez sur Entrée.

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 :

- votre propre message, aligné à droite ;
- 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) ;
- une checklist **Plan (0/2)** ;
- une carte de tool call **📖 Reading README.md** dont le badge passe à **done** ;
- le début de la réponse de l'agent.

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.

## Étape 5 — Accorder la permission

Le panel affiche maintenant une carte **🔐 Write hello.txt** avec deux boutons.

Cliquez sur **Allow once**.

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)**.

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.

## Et maintenant ?

Vous avez fait tourner Ori de bout en bout avec l'agent de démonstration. Pour aller plus loin :

- Pour parler à un vrai agent → [Lancer Ori avec Claude Code](../how-to/run-with-claude-code.md)
- Pour brancher un autre agent → [Utiliser un autre agent ACP](../how-to/use-another-agent.md)
- Pour comprendre ce qui s'est passé entre le navigateur et l'agent → [Explication : architecture](../explanation/architecture.md)