Lets agents inspect and edit live Three.js scenes, including objects, materials, shaders, lights and performance stats.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add three-js-devtools -- npx -y threejs-devtools-mcp~/.codex/config.toml
[mcp_servers.three-js-devtools]
command = "npx"
args = ["-y", "threejs-devtools-mcp"]
# codex mcp add three-js-devtools -- npx -y threejs-devtools-mcp~/.cursor/mcp.json
{
"mcpServers": {
"three-js-devtools": {
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"three-js-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"three-js-devtools": {
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"three-js-devtools": {
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"three-js-devtools": {
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
]
}
}
}