21st.dev Magic AI Agent

### 1. Basic Configuration This is a minimal, realistic configuration to run the **21st.dev Magic AI Agent** MCP server via a local CLI binary called `21st-magic-agent` (adjust the path/command to whatever the actual executable is on your system). ```json { "21st.dev Magic AI Agent": { "command": "21st-magic-agent", "args": [], "env": {}, "disabled": false } } ``` **Explanation (not part of JSON):** - `"21st.dev Magic AI Agent"`: The MCP server name as it will appear in Claude Code. - `"command"`: The executable or script that starts the MCP server. Replace `21st-magic-agent` with the real command if different. - `"args"`: Empty array means no extra command-line arguments are passed. - `"env"`: Empty object; no extra environment variables are set. - `"disabled": false`: Ensures this MCP server is enabled and available to Claude Code. --- ### 2. Advanced Configuration This example shows a more complete setup: specifying a full path, passing arguments, and configuring environment variables (e.g., API keys, environment, logging). ```json { "21st.dev Magic AI Agent": { "command": "/usr/local/bin/21st-magic-agent", "args": [ "--port", "3334", "--log-level", "debug", "--config", "/etc/21st-magic-agent/config.yaml" ], "env": { "MAGIC_AGENT_API_KEY": "your-api-key-here", "MAGIC_AGENT_ENV": "development", "MAGIC_AGENT_PROJECT_ID": "local-dev-project", "MAGIC_AGENT_LOG_FORMAT": "json" }, "disabled": false } } ``` **Explanation (not part of JSON):** - `"command"`: Absolute path to the MCP server binary for reliability. - `"args"`: - `--port 3334`: Run the MCP server on a specific port (if the server supports this option). - `--log-level debug`: More verbose logging for development and troubleshooting. - `--config /etc/21st-magic-agent/config.yaml`: External config file for the agent (if supported). - `"env"`: - `MAGIC_AGENT_API_KEY`: Secret token for authenticating the agent with 21st.dev or your backend. - `MAGIC_AGENT_ENV`: Sets the environment (e.g., `development`, `staging`, `production`). - `MAGIC_AGENT_PROJECT_ID`: Associates this agent instance with a specific project/workspace. - `MAGIC_AGENT_LOG_FORMAT`: Example of controlling log output format (`json`, `text`, etc.). - This configuration is appropriate for local dev with richer logging and explicit configuration. --- ### 3. Use Case Specific Configuration – Production CI/CD Integration This configuration is tailored for using the **21st.dev Magic AI Agent** in a production-like environment, integrated with a CI/CD pipeline (e.g., GitHub Actions, GitLab CI, or a dedicated build agent). It assumes the agent helps with automated code review, static analysis, or deployment checks. ```json { "21st.dev Magic AI Agent": { "command": "/opt/21st-dev/magic-agent", "args": [ "--mode", "ci", "--port", "3335", "--log-level", "info", "--read-only", "--workspace", "/var/repos/current" ], "env": { "MAGIC_AGENT_API_KEY": "${MAGIC_AGENT_API_KEY}", "MAGIC_AGENT_ENV": "production", "MAGIC_AGENT_PROJECT_ID": "backend-service-prod", "MAGIC_AGENT_CI_PROVIDER": "github-actions", "MAGIC_AGENT_ALLOW_WRITE": "false", "MAGIC_AGENT_TIMEOUT_SECONDS": "120", "MAGIC_AGENT_ALLOWED_REPOS": "git@github.com:your-org/backend-service.git" }, "disabled": false } } ``` **Explanation (not part of JSON):** - `"command"`: Installed in a stable location on your CI/build agent host. - `"args"`: - `--mode ci`: Puts the agent into CI-optimized behavior (non-interactive, deterministic) if supported. - `--port 3335`: Uses a dedicated port to avoid conflicts with dev instances. - `--log-level info`: Less noisy logs suitable for production pipelines. - `--read-only`: Ensures the agent does not modify files directly (safer for CI). - `--workspace /var/repos/current`: Points at the checked-out repository used by the CI job. - `"env"`: - `MAGIC_AGENT_API_KEY`: Injected from CI secrets (e.g., GitHub Actions secrets). The `${...}` notation indicates it should come from the environment, not be hard-coded. - `MAGIC_AGENT_ENV`: `production` to enable stricter behavior, rate limits, or audit logging. - `MAGIC_AGENT_PROJECT_ID`: Ties this instance to the production backend project. - `MAGIC_AGENT_CI_PROVIDER`: Lets the agent adjust behavior or metadata for the specific CI system. - `MAGIC_AGENT_ALLOW_WRITE`: Explicitly disables write operations, even if the server supports them. - `MAGIC_AGENT_TIMEOUT_SECONDS`: Caps how long the agent can run per request (useful for CI time limits). - `MAGIC_AGENT_ALLOWED_REPOS`: Whitelist of repositories this agent is allowed to operate on. - This setup is aimed at safe, auditable use in automated pipelines, where Claude Code can still connect to the same MCP server for debugging or reproducing CI behavior.