forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | # Tutorial: getting started with Ori |
| 2 | ||
| 3 | By the end of this tutorial, you will have built Ori, started it with its bundled demo agent, and held a complete conversation in your browser — including a streamed answer, a visible plan, tool calls and a permission you grant yourself. No prior knowledge of ACP is required. | |
| 4 | ||
| 5 | ## Prerequisites | |
| 6 | ||
| 7 | - Go 1.26 or newer (`go version`) | |
| 8 | - Node.js 24 or newer with npm (`node --version`) | |
| 9 | - A web browser | |
| 10 | ||
| 11 | ## Step 1 — Install the frontend dependencies | |
| 12 | ||
| 13 | From the repository root, type: | |
| 14 | ||
| 15 | ```bash | |
| 16 | make deps | |
| 17 | ``` | |
| 18 | ||
| 19 | You should see npm resolve the packages and end with a line like: | |
| 20 | ||
| 21 | ``` | |
| 22 | added 158 packages, and audited 159 packages in 9s | |
| 23 | ``` | |
| 24 | ||
| 25 | We have just installed everything the SPA build needs. | |
| 26 | ||
| 27 | ## Step 2 — Build and start Ori with the demo agent | |
| 28 | ||
| 29 | Type: | |
| 30 | ||
| 31 | ```bash | |
| 32 | make run-mock | |
| 33 | ``` | |
| 34 | ||
| 35 | You should see the SPA build, the Go build, then: | |
| 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 | We have just started the full application: the server is up and already connected, over ACP, to `ori-mock-agent` — a small deterministic agent that needs no account and no network. | |
| 44 | ||
| 45 | ## Step 3 — Open the panel | |
| 46 | ||
| 47 | Open [http://localhost:8888](http://localhost:8888) in your browser. | |
| 48 | ||
| 49 | You should see the Ori panel: a header showing `online · mock-1`, an empty conversation, and a message box at the bottom. | |
| 50 | ||
| 51 | ## Step 4 — Send your first message | |
| 52 | ||
| 53 | Type `hello` in the message box and press Enter. | |
| 54 | ||
| 55 | You should see a spinner appear at the bottom of the thread with rotating status phrases (*Pondering…*, *Brewing ideas…*), then, streaming in one after the other: | |
| 56 | ||
| 57 | - your own message, aligned to the right; | |
| 58 | - a **💭 Thinking…** block showing the agent's reasoning live while it streams (it collapses into *💭 Thought for a moment* once the turn ends — click it to reopen); | |
| 59 | - a **Plan (0/2)** checklist; | |
| 60 | - a tool call card **📖 Reading README.md** whose badge turns to **done**; | |
| 61 | - the beginning of the agent's answer. | |
| 62 | ||
| 63 | We have just run the first half of a prompt turn: the agent streams updates and the panel renders each kind in its own shape. | |
| 64 | ||
| 65 | ## Step 5 — Grant the permission | |
| 66 | ||
| 67 | The panel now shows a **🔐 Write hello.txt** card with two buttons. | |
| 68 | ||
| 69 | Click **Allow once**. | |
| 70 | ||
| 71 | You should see a second tool call card **✏️ Writing hello.txt** with a green diff, then the agent's final answer — `Done! You said: hello` followed by a small checklist — and the plan showing **Plan (2/2)**. | |
| 72 | ||
| 73 | We have just completed the whole loop: the agent asked for a permission, your click travelled back to it through the backend, and it finished its turn. | |
| 74 | ||
| 75 | ## What now? | |
| 76 | ||
| 77 | You have run Ori end to end with the demo agent. To go further: | |
| 78 | ||
| 79 | - To talk to a real agent → [How to run Ori with Claude Code](../how-to/run-with-claude-code.md) | |
| 80 | - To plug in another agent → [How to use another ACP agent](../how-to/use-another-agent.md) | |
| 81 | - To understand what happened between the browser and the agent → [Explanation: architecture](../explanation/architecture.md) |