Skip to main content

Remote Browser Support

The Remote Browser feature in Careti 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 Careti​

What is Remote Browser?​

Remote Browser allows Careti to view and interact with websites directly. This feature enables Careti 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 Careti 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​

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

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

Browser Must Be Closed Before Using Other Tools​

If you want Careti 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 Careti Sees​

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

Console Logs​

Careti 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 Careti 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 Careti 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 Careti in VS Code:​

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

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