Remote Browser Support

The Remote Browser capability in Sypha permits the AI assistant to interact with web content directly via a controlled browser instance. This facilitates several powerful functionalities:

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

Remote Browser in Sypha

What is Remote Browser?

Remote Browser permits Sypha to view and interact with websites directly. This capability enables Sypha to:

• Access websites and examine their content
• Test your web applications running locally
• Complete forms and click on elements
• Capture screenshots of what it observes
• Scroll through pages to view additional content

How to Use Remote Browser

Basic Commands

You can request Sypha to utilize the browser through 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

Sypha can only utilize one browser at a time. If you want to access a different website, you can either:

• Request Sypha to navigate to a new URL within the same browser session
• Request Sypha to close the current browser and launch a new one

Browser Must Be Closed Before Using Other Tools

If you want Sypha to modify files or execute commands after utilizing the browser, you must first request it to close the browser:

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

What Sypha Sees

The browser maintains a fixed viewport size (900x600 pixels by default), comparable to a small laptop screen. Sypha will share screenshots following each action so you can observe exactly what it observes.

Console Logs

Sypha captures browser console logs, which prove helpful for debugging web applications. These logs accompany each screenshot.

Common Use Cases

• Web Development: Test your websites and web applications
• UI/UX Review: Obtain feedback on website design and usability
• Content Research: Have Sypha browse websites to collect information
• Form Testing: Verify that forms function correctly
• Responsive Design Testing: Check how websites appear at different screen sizes

Troubleshooting

• If a website doesn't load: Attempt providing a direct URL with the http:// or https:// prefix
• If clicking doesn't work: Attempt describing the element's location more precisely
• If the browser seems stuck: Request Sypha to close the browser and attempt again

Using Remote Browser with VS Code in WSL

When operating VS Code in WSL, you'll need to configure Windows to permit 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 Sypha in VS Code:

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

Sypha should now be capable of using the Remote Browser feature from within WSL.