| 1 | # nanobot webui |
| 2 | |
| 3 | The browser front-end for the nanobot gateway. It is built with Vite + React 18 + |
| 4 | TypeScript + Tailwind 3 + shadcn/ui, talks to the gateway over the WebSocket |
| 5 | multiplex protocol, and reads session metadata from the embedded REST surface |
| 6 | on the same port. |
| 7 | |
| 8 | For the project overview, install guide, and general docs map, see the root |
| 9 | [`README.md`](../README.md). |
| 10 | |
| 11 | ## Current status |
| 12 | |
| 13 | > [!NOTE] |
| 14 | > The standalone WebUI development workflow currently requires a source |
| 15 | > checkout. |
| 16 | > |
| 17 | > WebUI changes in the GitHub repository may land before they are included in |
| 18 | > the next packaged release, so source installs and published package versions |
| 19 | > are not yet guaranteed to move in lockstep. |
| 20 | |
| 21 | ## Layout |
| 22 | |
| 23 | ```text |
| 24 | webui/ source tree (this directory) |
| 25 | nanobot/web/dist/ build output served by the gateway |
| 26 | ``` |
| 27 | |
| 28 | ## Develop from source |
| 29 | |
| 30 | ### 1. Install nanobot from source |
| 31 | |
| 32 | From the repository root: |
| 33 | |
| 34 | ```bash |
| 35 | pip install -e . |
| 36 | ``` |
| 37 | |
| 38 | ### 2. Enable the WebSocket channel |
| 39 | |
| 40 | In `~/.nanobot/config.json`: |
| 41 | |
| 42 | ```json |
| 43 | { "channels": { "websocket": { "enabled": true } } } |
| 44 | ``` |
| 45 | |
| 46 | ### 3. Start the gateway |
| 47 | |
| 48 | In one terminal: |
| 49 | |
| 50 | ```bash |
| 51 | nanobot gateway |
| 52 | ``` |
| 53 | |
| 54 | ### 4. Start the WebUI dev server |
| 55 | |
| 56 | In another terminal: |
| 57 | |
| 58 | ```bash |
| 59 | cd webui |
| 60 | bun install # npm install also works |
| 61 | bun run dev |
| 62 | ``` |
| 63 | |
| 64 | Then open `http://127.0.0.1:5173`. |
| 65 | |
| 66 | By default, the dev server proxies `/api`, `/webui`, `/auth`, and WebSocket |
| 67 | traffic to `http://127.0.0.1:8765`. |
| 68 | |
| 69 | If your gateway listens on a non-default port, point the dev server at it: |
| 70 | |
| 71 | ```bash |
| 72 | NANOBOT_API_URL=http://127.0.0.1:9000 bun run dev |
| 73 | ``` |
| 74 | |
| 75 | ## Build for packaged runtime |
| 76 | |
| 77 | ```bash |
| 78 | cd webui |
| 79 | bun run build |
| 80 | ``` |
| 81 | |
| 82 | This writes the production assets to `../nanobot/web/dist`, which is the |
| 83 | directory served by `nanobot gateway` and bundled into the Python wheel. |
| 84 | |
| 85 | If you are cutting a release, run the build before packaging so the published |
| 86 | wheel contains the current WebUI assets. |
| 87 | |
| 88 | ## Test |
| 89 | |
| 90 | ```bash |
| 91 | cd webui |
| 92 | bun run test |
| 93 | ``` |
| 94 | |
| 95 | ## Acknowledgements |
| 96 | |
| 97 | - [`agent-chat-ui`](https://github.com/langchain-ai/agent-chat-ui) for UI and |
| 98 | interaction inspiration across the chat surface. |
| 99 |