docs: update README and webui documentation for WebUI development workflow

This commit is contained in:
Xubin Ren 2026-04-19 13:10:36 +00:00
parent c4b3837c5f
commit f9e1d92abd
3 changed files with 84 additions and 16 deletions

View File

@ -185,6 +185,29 @@ nanobot agent
- Want to run nanobot in chat apps like Telegram, Discord, WeChat or Feishu? See [Chat Apps](./docs/chat-apps.md) - Want to run nanobot in chat apps like Telegram, Discord, WeChat or Feishu? See [Chat Apps](./docs/chat-apps.md)
- Want Docker or Linux service deployment? See [Deployment](./docs/deployment.md) - Want Docker or Linux service deployment? See [Deployment](./docs/deployment.md)
## 🧪 WebUI (Development)
> [!NOTE]
> The WebUI development workflow currently requires a source checkout and is not yet shipped together with the official packaged release. See [WebUI Document](./webui/README.md) for full WebUI development docs, build steps, and release notes.
<p align="center">
<img src="images/nanobot_webui.png" alt="nanobot webui preview" width="900">
</p>
**1. Start the gateway**
```bash
nanobot gateway
```
**2. Start the webui dev server**
```bash
cd webui
bun install
bun run dev
```
## 🏗️ Architecture ## 🏗️ Architecture
<p align="center"> <p align="center">

BIN
images/nanobot_webui.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

View File

@ -1,45 +1,90 @@
# nanobot webui # nanobot webui
The browser front-end for `nanobot web`. Built with Vite + React 18 + The browser front-end for `nanobot web`. It is built with Vite + React 18 +
TypeScript + Tailwind 3 + shadcn/ui. Talks to the gateway over the WebSocket TypeScript + Tailwind 3 + shadcn/ui, talks to the gateway over the WebSocket
multiplex protocol; session metadata comes from the embedded REST surface on multiplex protocol, and reads session metadata from the embedded REST surface
the same port. on the same port.
For the project overview, install guide, and general docs map, see the root
[`README.md`](../README.md).
## Current status
> [!NOTE]
> The standalone WebUI development workflow currently requires a source
> checkout.
>
> WebUI changes in the GitHub repository may land before they are included in
> the next packaged release, so source installs and published package versions
> are not yet guaranteed to move in lockstep.
## Layout ## Layout
``` ```text
webui/ source tree (this directory) webui/ source tree (this directory)
nanobot/web/dist/ build output, shipped in the Python wheel nanobot/web/dist/ build output consumed by `nanobot web`
``` ```
## Develop ## Develop from source
### 1. Install nanobot from source
From the repository root:
```bash
pip install -e .
```
### 2. Start the gateway
In one terminal:
```bash
nanobot gateway
```
### 3. Start the WebUI dev server
In another terminal:
```bash ```bash
cd webui cd webui
bun install # npm install also works bun install # npm install also works
bun run dev # http://127.0.0.1:5173 (proxies /api /webui /auth -> 8765) bun run dev
``` ```
In a separate shell, start the gateway with the WebSocket channel: Then open `http://127.0.0.1:5173`.
```bash By default, the dev server proxies `/api`, `/webui`, `/auth`, and WebSocket
uv run nanobot gateway # or `nanobot web` once you've built once traffic to `http://127.0.0.1:8765`.
```
If the gateway listens on a non-default port, point the dev server at it: If your gateway listens on a non-default port, point the dev server at it:
```bash ```bash
NANOBOT_API_URL=http://127.0.0.1:9000 bun run dev NANOBOT_API_URL=http://127.0.0.1:9000 bun run dev
``` ```
## Build ## Build for packaged runtime
```bash ```bash
bun run build # writes ../nanobot/web/dist (consumed by `nanobot web`) cd webui
bun run build
``` ```
This writes the production assets to `../nanobot/web/dist`, which is the
directory served by `nanobot web` and bundled into the Python wheel.
If you are cutting a release, run the build before packaging so the published
wheel contains the current WebUI assets.
## Test ## Test
```bash ```bash
bun run test # vitest, jsdom-style happy-dom environment cd webui
bun run test
``` ```
## Acknowledgements
- [`agent-chat-ui`](https://github.com/langchain-ai/agent-chat-ui) for UI and
interaction inspiration across the chat surface.