A responsive preview and inspection tool for web apps. View a URL across device profiles, capture screenshots, and let MCP clients automate the workflow.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add kaleidoscope -- npx -y kaleidoscope-mcp-server@latest~/.codex/config.toml
[mcp_servers.kaleidoscope]
command = "npx"
args = ["-y", "kaleidoscope-mcp-server@latest"]
# codex mcp add kaleidoscope -- npx -y kaleidoscope-mcp-server@latest~/.cursor/mcp.json
{
"mcpServers": {
"kaleidoscope": {
"command": "npx",
"args": [
"-y",
"kaleidoscope-mcp-server@latest"
]
}
}
}.vscode/mcp.json
{
"servers": {
"kaleidoscope": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"kaleidoscope-mcp-server@latest"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"kaleidoscope": {
"command": "npx",
"args": [
"-y",
"kaleidoscope-mcp-server@latest"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"kaleidoscope": {
"command": "npx",
"args": [
"-y",
"kaleidoscope-mcp-server@latest"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"kaleidoscope": {
"command": "npx",
"args": [
"-y",
"kaleidoscope-mcp-server@latest"
]
}
}
}