21st_magic_component_builder returns [object Object] and internal errors

View original issue on GitHub  ·  Variant 1

Fixing "[object Object]" and Internal Errors with 21st_magic_component_builder

You're encountering a frustrating issue with the 21st_magic_component_builder in the magic-mcp project. When using @21st-dev/magic@latest via MCP stdio transport, calls to the builder are returning unexpected results. The first call yields a generic [object Object] response, often with just Shadcn installation instructions instead of the component code you expected. Subsequent calls then completely fail, displaying a [Tool result missing due to internal error] message.

Understanding the Root Cause

While a definitive root cause wasn't explicitly identified in the original issue, the symptoms strongly suggest a few potential problems:

Solutions and Workarounds

Here are several strategies you can try to mitigate the issue:

1. Sequential Calls

The simplest workaround is to ensure that calls to 21st_magic_component_builder are made sequentially, waiting for each call to complete before initiating the next. This reduces the likelihood of resource contention and state management problems.


async function buildComponents() {
  const component1 = await magic.buildComponent("button variants");
  console.log("Component 1:", component1);

  const component2 = await magic.buildComponent("card component");
  console.log("Component 2:", component2);

  const component3 = await magic.buildComponent("input text field");
  console.log("Component 3:", component3);
}

buildComponents();

2. Implement a Queue

If you need to make multiple component building requests, consider implementing a queue to manage them. This ensures that requests are processed one at a time, even if they are initiated concurrently.


class ComponentQueue {
  constructor() {
    this.queue = [];
    this.isProcessing = false;
  }

  enqueue(task) {
    this.queue.push(task);
    if (!this.isProcessing) {
      this.processNext();
    }
  }

  async processNext() {
    if (this.queue.length === 0) {
      this.isProcessing = false;
      return;
    }

    this.isProcessing = true;
    const task = this.queue.shift();

    try {
      const result = await task();
      console.log("Task result:", result);
    } catch (error) {
      console.error("Task failed:", error);
    } finally {
      this.processNext();
    }
  }
}

const componentQueue = new ComponentQueue();

componentQueue.enqueue(() => magic.buildComponent("button variants"));
componentQueue.enqueue(() => magic.buildComponent("card component"));
componentQueue.enqueue(() => magic.buildComponent("input text field"));

3. Check for Updates

Ensure you are using the latest version of @21st-dev/magic. The developers might have addressed this issue in a newer release.


npm update @21st-dev/magic

4. Simplify Search Queries

Sometimes overly complex search queries can cause issues. Try simplifying your search queries to see if that improves the results. For example, instead of "button variants", try just "button".

5. Report the Issue

If none of these solutions work, it's crucial to report the issue to the magic-mcp project maintainers. Provide detailed information about your environment (OS, Node version, package versions), the exact search queries you are using, and the steps to reproduce the error. This will help them diagnose and fix the underlying problem.

Practical Tips and Considerations