The chrome-devtools-mcp https://github.com/ChromeDevTools/chrome-devtools-mcp/ [1]
Is an official MCP
(Model Context Protocol) server from the chrome team that gives AI coding
agents direct access to a live chrome browser and its DevTools Capabilities.
Why is this
important? It gives your AI a way to
access the internet via its own Chrome browser so its not coding blind. It can make a change and see that change in
its own browser.
Getting it set up
In Grok you can install it via the Marketplace
Start Grok
|
> grok |
Run the marketplace tool.
|
> /marketplace |
Open the official Plugins
Scroll down to chrome-devtools and press i to install it.
It will take a moment and is now installed.
OK now a simple test.
In grok run this command
|
> Open https://example.com and take a screen
shot |
OK that worked
Let me see the file
It did create the file
And this is the image.
Looks like I still have an issue myself. (It worked but not in the way I wanted it to)
I am running Ubuntu 24.04 on WSL
Here is a simple procedure to fix this. (For Ubuntu 24.04 in WSL)
|
> wget
https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb |
Now test it.
|
> google-chrome --version |
Now if I restart grok and run
|
> Open https://example.com and take a screen
shot |
That worked and it opened It’s web browser
What If I did not want it to open a browser?
|
> Open https://example.com and take a screen
shot, but do it in headless mode |
That worked
You could set it to always be headless by tweaking the
settings in ~/.grok/config.toml
|
> vi ~/.grok/config.toml |
I would add this section
|
[mcp_servers.chrome-devtools] |
I am not going to now... I might change my mind in the future.
References
[1] chrome-devtools-mcp github
repo
https://github.com/ChromeDevTools/chrome-devtools-mcp/
Accessed 07/2026
No comments:
Post a Comment