fix(http-client): throw on non-2xx responses so MCP tools surface errors correctly

src/utils/http-client.test.ts

@@ -5,3 +5,57 @@ describe("http-client", () => {
     expect(BASE_URL).toBe("https://magic.21st.dev");
   });
 });
+
+describe("http-client error handling", () => {
+  let originalFetch: typeof fetch;
+
+  beforeEach(() => {
+    originalFetch = globalThis.fetch;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it("throws on non-2xx response with status and error message", async () => {
+    const { twentyFirstClient } = await import("./http-client.js");
+
+    globalThis.fetch = async () =>
+      new Response(JSON.stringify({ error: "Anthropic experiencing high load" }), {
+        status: 500,
+        statusText: "Internal Server Error",
+      }) as Response;
+
+    await expect(
+      twentyFirstClient.post("/api/refine-ui", { foo: "bar" })
+    ).rejects.toThrow("HTTP 500 Internal Server Error: {\"error\":\"Anthropic experiencing high load\"}");
+  });
+
+  it("throws on non-2xx response when response has no body", async () => {
+    const { twentyFirstClient } = await import("./http-client.js");
+
+    globalThis.fetch = async () =>
+      new Response(null, {
+        status: 503,
+        statusText: "Service Unavailable",
+      }) as Response;
+
+    await expect(
+      twentyFirstClient.post("/api/refine-ui", { foo: "bar" })
+    ).rejects.toThrow("HTTP 503 Service Unavailable");
+  });
+
+  it("throws on 401 with the error body from server", async () => {
+    const { twentyFirstClient } = await import("./http-client.js");
+
+    globalThis.fetch = async () =>
+      new Response(JSON.stringify({ error: "Invalid or inactive API key" }), {
+        status: 401,
+        statusText: "Unauthorized",
+      }) as Response;
+
+    await expect(
+      twentyFirstClient.get("/api/some-endpoint")
+    ).rejects.toThrow("HTTP 401 Unauthorized: {\"error\":\"Invalid or inactive API key\"}");
+  });
+});

src/utils/http-client.ts

@@ -59,6 +59,14 @@ const createMethod = (method: HttpMethod) => {
     });
 
     console.log("response", response);
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      throw new Error(
+        `HTTP ${response.status} ${response.statusText}${errorText ? `: ${errorText}` : ""}`
+      );
+    }
+
     return { status: response.status, data: (await response.json()) as T };
   };
 };