Cana Desktop
A browser the agent can see and use
Cana Desktop has a built-in browser the agent can open, click through and check, with Elements, Console and Network tools, and Cana Companion lets it work in your own Chrome tabs too.
How it works
The idea in 4 steps
- 1
The agent uses the page like a person
Cana Desktop has its own browser. The agent opens pages in it, clicks, types, fills forms, scrolls and reads what is on screen, so it can try your app instead of guessing.
- 2
You point, it gets the details
Developer tools under the page show the elements, console messages and network requests. Anything you select there can be sent to the agent with its full detail, so you never copy errors by hand.
- 3
It fixes, then checks its own work
After changing code the agent reloads the page and looks again, including whether the layout overlaps or overflows, before it reports back.
- 4
Your own Chrome when you need it
Cana Companion is a Chrome extension that pairs with Cana Desktop over a local connection you approve. The agent can then work in your real tabs, signed in as you, and you can chat and approve actions from Chrome's side panel.
Tutorial
Step by step
Before you start
- Cana Desktop installed and signed in
- A web app running on your computer, for example on localhost:3000
- For the Chrome steps: Google Chrome with the Cana Companion extension
- 1
Open the browser
In Cana Desktop, click More tools on the left rail and choose Browser. If it is pinned, it sits on the rail itself.
You'll see: A browser pane opens with an empty address bar that reads Enter URL....
Tip: Not listed? Open Mods, go to Marketplace and add it from the Cana tools type.
- 2
Load your app
Click the Enter URL... bar, type the address of your running app, such as localhost:3000, and press Enter.
You'll see: Your app loads in the pane, just as it would in a normal browser.
- 3
Open the developer tools
Click DevTools in the browser toolbar.
You'll see: A panel opens beside the page with three tabs: Elements, Console and Network.
- 4
Pick the part that looks wrong
In Elements, hover over the page and click the broken part, for example a button that overlaps the footer.
You'll see: The element is selected and its details appear in the Elements panel.
- 5
Send it to the agent
Press Send to Agent, then type what you want in the chat, such as "Fix this overlap on small screens", and send.
You'll see: The element goes into the chat with your message, and the agent starts editing the code.
Tip: Console and Network have the same Send to Agent button for an error or a failed request.
- 6
Pair Cana Companion with Chrome
In Chrome, open the Cana Companion popup and press Pair with Cana Desktop. Back in Cana, approve the Pair with Cana Companion? request.
You'll see: Once approved, Chrome appears as ready in Cana's Browser mode menu.
- 7
Move the agent into Chrome
In Cana, open the Browser mode menu and choose Chrome instead of Embedded.
You'll see: The agent's next browser commands run in your real Chrome tabs, signed in as you.
Tip: Choose Embedded again to bring it back to Cana's own browser pane.
Worked example
Fix a broken sign-up page
Your sign-up form posts but nothing happens, and the console shows a red error. You want it fixed and proven to work without copying the error anywhere.
You type
Fix this error, then sign up as a new test user and tell me what you saw.
- 1.Open Browser and load localhost:3000/signup
- 2.Click DevTools, open Console and select the red error
- 3.Press Send to Agent and send the prompt
Result: The agent fixes the handler, reloads the page, signs up as a test user in the browser and reports that the account was created, with what it checked.
Troubleshooting
If something doesn't work
- Browser is not in the More tools menu
- It is a Cana tool you add once. Open Mods, then Marketplace, set the type filter to Cana tools and add Browser.
- The page stays blank
- Your app may not be running. Start it in a terminal, or ask the agent to start the dev server, then load the address again.
- Chrome says "Not connected" in the Browser mode menu
- Cana Companion is not paired yet. Use Install & connect in that menu, or press Pair with Cana Desktop in the Companion and approve the request in Cana.
- The agent sent nothing about my selection
- Select an element, a console message or a request row first, then press Send to Agent. Each tab sends only what is selected in it.
For you
Debug from the screen: send the element, error or request to the agent
The agent sees the same DOM, console and network traffic you do. Send it the failing request or the misaligned element with one click, and it fixes the code and verifies the page in the browser before calling it done.
Failed API call
Select the 500 in Network, press Send to Agent, and ask why the payload is rejected. It reads the request and fixes the handler.
End-to-end smoke test
"Sign up, create a project, invite a teammate, and tell me anything that breaks." It clicks through and reports what it saw.
Test with real sessions
Switch to Chrome so the agent tests the staging site already signed in with your account.
What changes for developers: Shorter loops from seeing a bug to a verified fix, without copying errors between windows.
Technical details
What it connects to, and the controls you have
- Built-in browser tools
- Elements, Console and Network tabs, each with a Send to Agent button
- What the agent can do
- Open and navigate pages, click, type, fill forms, scroll, read content, take screenshots, audit layout and watch pages for changes
- Browser targets
- Embedded (Cana's own browser pane) or Chrome through Cana Companion, chosen in the Browser mode menu
- Where to find it
- Browser is a Cana tool: open it from More tools on the left rail (or pin it), and add it from Mods, Marketplace if it is missing
- Pairing
- Started from the Companion's Pair button and approved in Cana Desktop, or by typing a one-time token shown in Cana's Settings
- Connection
- Companion talks to Cana Desktop over a local connection on your computer; web pages and other extensions are refused, and the pairing token stays in local storage and can be revoked
- Site knowledge
- Route and form maps for a site can be added in Settings so the agent goes straight to the right page
Why Cana
What you get here
- The agent drives, reads and checks pages itself, so it verifies its own fixes
- Elements, Console and Network each send their selection to the agent in one click
- One toggle moves the agent between the built-in browser and your own Chrome
- Cana Companion pairs over a local connection that you approve, and can be disconnected at any time
Keep exploring
Build an app from one prompt
Go from idea to a tested, running app without the boilerplate
Code, terminal and approvals
An agent that works in your repo, with the guardrails you choose
Memory, knowledge, skills and commands
Stop re-explaining your stack in every chat
Permissions and approvals
Let the agent move fast on the safe stuff and ask on the rest