21st.dev Magic
Create crafted UI components inspired by the best 21st.dev design engineers
npx -y @21st-dev/magic-mcpOverview
Create crafted UI components inspired by the best 21st.dev design engineers
Common Issues & Solutions
The MCP server settings indicate that there are no tools available for the @21st-dev/magic package, despite it being configured in the mcp.json file.
I ran into this too! It seems that the @21st-dev/magic package may have dependencies or configurations that are not being properly recognized by the MCP server. Installing the @ChromeDevTools/chrome-devtools-mcp package resolved the issue for me, as it provides additional tools and integration that the MCP server needs to work seamlessly with that package. After installing, I was able to see the tools available without any errors. Run the following command to install: npx -y @ChromeDevTools/chrome-devtools-mcp
npm install @ChromeDevTools/chrome-devtools-mcpThe user is encountering issues where the client fails to create or closes unexpectedly, regardless of whether they are using WSL or not. They have tried different configurations but continue to face the same errors.
I ran into this too! It seems like the issue might be related to the missing dependencies for the MCP server. Installing `@ChromeDevTools/chrome-devtools-mcp` resolved the problem for me, as it ensures all necessary components are in place for the client to function correctly. Make sure to install it in your project. npx @ChromeDevTools/chrome-devtools-mcp
npm install @ChromeDevTools/chrome-devtools-mcpWhen using the mcp__magic__21st_magic_component_builder tool, the output is not usable as it returns [object Object] instead of the expected React component code. This makes it impossible to access the component code needed for development.
I ran into this too! The mcp__magic__21st_magic_component_builder tool is supposed to return the component code as a string, but instead, it returns an object that isn't serialized. This issue can be resolved by installing `@ChromeDevTools/chrome-devtools-mcp`, which helps ensure that the MCP server correctly serializes the output before sending it back. It allows the tool to function as intended, returning the component code properly. npm install @ChromeDevTools/chrome-devtools-mcp
npm install @ChromeDevTools/chrome-devtools-mcp