Skip to main content

Remote Browser Support

The Remote Browser feature in Caret allows the AI assistant to interact with web content directly through a controlled browser instance. This enables several powerful capabilities:

  • Viewing and interacting with websites
  • Testing locally running web applications
  • Monitoring console logs and errors
  • Performing browser actions like clicking, typing, and scrolling

Remote Browser in Caret​

What is Remote Browser?​

Remote Browser allows Caret to view and interact with websites directly. This feature enables Caret to:

  • Visit websites and view their content
  • Test your locally running web applications
  • Fill out forms and click on elements
  • Capture screenshots of what it sees
  • Scroll through pages to see more content

How to Use Remote Browser​

Basic Commands​

You can ask Caret to use the browser with simple instructions:

  • Open a website: "Use the browser to check the website at https://example.com"
  • Click on elements: "Click the login button"
  • Type text: "Type 'Hello world' in the search box"
  • Scroll the page: "Scroll down to see more content"
  • Close the browser: "Close the browser now"

Example Workflows​

Testing a Web Application:

Can you start my React app with "npm start" and then check if it's working properly at http://localhost:3000?

Analyzing a Website:

Can you visit https://example.com and tell me what you think about its design and layout?

Filling Out a Form:

Please go to https://example.com/contact, fill out the contact form with some test data, and submit it.

Important Things to Know​

One Browser at a Time​

Caret can only use one browser at a time. If you want to visit a different website, you can either:

  • Ask Caret to navigate to a new URL within the same browser session
  • Ask Caret to close the current browser and open a new one

Browser Must Be Closed Before Using Other Tools​

If you want Caret to edit files or run commands after using the browser, you must first ask it to close the browser:

Close the browser and then update the CSS file to fix the alignment issue we saw.

What Caret Sees​

The browser has a fixed viewport size (900x600 pixels by default), similar to a small laptop screen. Caret will share screenshots after each action so you can see exactly what it sees.

Console Logs​

Caret captures browser console logs, which can be helpful for debugging web applications. These logs are included with each screenshot.

Common Use Cases​

  • Web Development: Test your websites and web applications
  • UI/UX Review: Get feedback on website design and usability
  • Content Research: Have Caret browse websites to gather information
  • Form Testing: Verify that forms work correctly
  • Responsive Design Testing: Check how websites look at different screen sizes

Troubleshooting​

  • If a website doesn't load: Try providing a direct URL with the http:// or https:// prefix
  • If clicking doesn't work: Try describing the location of the element more precisely
  • If the browser seems stuck: Ask Caret to close the browser and try again

Using Remote Browser with VS Code in WSL​

When running VS Code in WSL, you'll need to configure Windows to allow WSL to connect to Chrome. Follow these steps:

Open PowerShell as Administrator and Run:​

# Allow WSL to connect to Chrome's debugging port
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow

Configure Caret in VS Code:​

  1. Open VS Code settings
  2. Search for "Caret: Chrome Executable Path"
  3. Set the value to the path of your Chrome executable (e.g., C:\Program Files\Google\Chrome\Application\chrome.exe)

Caret should now be able to use the Remote Browser feature from within WSL.