Link install methods and put quick npm install in header

openhands/usage/agent-canvas/setup.mdx

@@ -3,12 +3,22 @@
 description: Install, run, update, or uninstall Agent Canvas.
 ---
 
-Install the desktop preview for macOS, Windows, or Linux to use Agent Canvas without setting up npm or a source checkout.
+## Quick Start
+
+With [Node.js 24 or later and `uv`](#verify-prerequisites) installed, run:
+
+```bash
+npm install -g @openhands/agent-canvas && agent-canvas
+```
+
+Open `http://localhost:8000` if your browser does not open automatically, then follow [First Time Setup](/openhands/usage/agent-canvas/first-time-setup) to configure a model and open a workspace. Keep the terminal running while you use Agent Canvas.
+
+Prefer an installer? Use the [desktop preview](#desktop-app-preview-build) for macOS, Windows, or Linux without setting up npm or a source checkout.
 
 The `agent-canvas` launcher can run the Canvas client with Agent Server, Automation Server, and ingress as an all-in-one local stack. Use npm or npx for direct local execution, or Docker for a containerized stack with explicit project mounts. You can also run the client separately and connect it to an existing backend.
 
 <Warning>
   Treat agents and ACP processes as untrusted: they can run shell commands, read files, write files, and use connected tools within their execution environment. Agent Canvas is the client and does not provide isolation. If the backend runs directly on your machine, the agent can act with your user account's permissions. Use a container, sandbox, or VM to define a tighter boundary. Before exposing backend services to a network you do not control, review [VM / Self-Hosted Installation](/openhands/usage/agent-canvas/backend-setup/vm).
 </Warning>
 
 ## Choose An Install Method
@@ -16,14 +26,14 @@
 | Method | Use It When | What The Agent Can Access |
 |--------|-------------|---------------------------|
 | **[Desktop app (preview)](#desktop-app-preview-build)** | You want an installer with bundled Node.js and `uv`. Go to [macOS](#macos), [Windows](#windows), or [Linux](#linux) instructions. | The default local backend runs directly on your machine and can work in local workspaces you open. |
-| **npm local install** | You want the quickest local browser setup. | Runs directly on your machine and can work in local workspaces you open. |
-| **Docker** | You want a local sandbox with clearer file boundaries. | Runs inside a container and can access mounted project directories. |
-| **npx** | You want to try Agent Canvas without installing the package globally. | Runs directly on your machine and can work in local workspaces you open. |
-| **VM / self-hosted** | You want an always-on backend, stronger hardware, or a team-accessible server. | Runs on the VM or dedicated host you configure. |
-| **From source** | You are contributing to Agent Canvas or changing the frontend/backend stack. | Runs your local development checkout. |
+| **[npm local install](#install-npm)** | You want the quickest local browser setup. | Runs directly on your machine and can work in local workspaces you open. |
+| **[Docker](#install-docker)** | You want a local sandbox with clearer file boundaries. | Runs inside a container and can access mounted project directories. |
+| **[npx](#install-npx)** | You want to try Agent Canvas without installing the package globally. | Runs directly on your machine and can work in local workspaces you open. |
+| **[VM / self-hosted](/openhands/usage/agent-canvas/backend-setup/vm)** | You want an always-on backend, stronger hardware, or a team-accessible server. | Runs on the VM or dedicated host you configure. |
+| **[From source](#install-from-source)** | You are contributing to Agent Canvas or changing the frontend/backend stack. | Runs your local development checkout. |
 
 <Note>
   For an installer, choose the desktop preview below. For a browser setup, use `npx` for a quick first run or npm for a reusable `agent-canvas` command. Use Docker when you specifically want sandboxing.
 </Note>
 
 ## Desktop App (Preview Build)
@@ -77,7 +87,7 @@
 
 ## Verify Prerequisites
 
 These prerequisites apply to the npm, npx, and Docker methods. Desktop installer users can go directly to [First Time Setup](/openhands/usage/agent-canvas/first-time-setup).
 
 <Tabs>
 
@@ -119,14 +129,14 @@
 </Tabs>
 
 <Note>
   Termux and other mobile Linux environments are not a primary supported target. For the most reliable local setup, use macOS, Linux, Windows with PowerShell, or Windows with WSL2.
 </Note>
 
 ## Install And Run
 
 <Tabs>
 
-  <Tab title="npm">
+  <Tab title="npm" id="install-npm">
     Install the published package globally:
 
     ```bash
@@ -142,7 +152,7 @@
     Agent Canvas starts on `http://localhost:8000` by default. If your browser does not open automatically, open that URL manually.
   </Tab>
 
-  <Tab title="Docker">
+  <Tab title="Docker" id="install-docker">
     Use a named Docker volume for persistent settings and a host directory for project files, then start the container.
 
     **macOS / Linux:**
@@ -201,7 +211,7 @@
       PowerShell uses backticks (`` ` ``) for line continuation. If Docker reports that it cannot connect to the daemon, start Docker Desktop and run the command again.
     </Note>
   </Tab>
-    <Tab title="npx">
+  <Tab title="npx" id="install-npx">
     Run the latest published package without installing it globally:
 
     ```bash
@@ -214,7 +224,7 @@
   </Tab>
 
 
-  <Tab title="From Source">
+  <Tab title="From Source" id="install-from-source">
     Use the source workflow only when you want to modify Agent Canvas itself:
 
     ```bash
@@ -292,7 +302,7 @@
 | `OH_SECRET_KEY` | Secret used to protect stored settings and secrets. |
 | `OH_AGENT_SERVER_VERSION` | Pin a specific agent server version, such as `0.1.0`. |
 | `AUTOMATION_KV_SECRET` | Secret used to protect automation key-value storage. When it is not set, the launcher pins the first session key to `automation-kv-secret.txt` and reuses it, so rotating `SESSION_API_KEY` does not make existing automation KV data unreadable. The pin file must be a regular file with private permissions; otherwise the launcher fails closed. |
 | `LOG_LEVEL` | Log level for the agent server. Overrides the `WARNING` default; Uvicorn's `--log-level` follows it. |
 | `AUTOMATION_LOG_LEVEL` | Log level for the automation service. Overrides the `WARNING` default. |
 | `PORT` | Ingress port inside the Docker container. Map it with `-p <host>:<PORT>`. |
 
@@ -382,7 +392,7 @@
   </Tab>
 </Tabs>
 
 Your settings and conversation data are stored outside the package or image: in `~/.openhands` for npm and npx, and in the `openhands-data` volume for Docker. Pulling a new image does not change the volume.
 
 <Note>
   **Recover or reset:** Use [Troubleshooting](/openhands/usage/agent-canvas/troubleshooting) when the browser is blank, a port is busy, the backend is unreachable, a model or API key fails, or an update or uninstall is stuck. It also explains clean removal and reinstall.
@@ -428,7 +438,7 @@
   </Tab>
 </Tabs>
 
 Uninstalling the package or image does not automatically remove your persisted data. To delete local settings, secrets, and conversation history, remove `~/.openhands` for npm and npx, or the `openhands-data` volume for Docker. If you bound `~/.openhands` in an older Docker setup, remove that directory too.
 
 ## Next Steps