implement mock for cerebras ai api

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "build": "turbo run build --filter=react-grab --filter=@react-grab/cursor --filter=@react-grab/claude-code --filter=@react-grab/ami --filter=@react-grab/opencode --filter=@react-grab/codex --filter=@react-grab/gemini --filter=@react-grab/amp --filter=@react-grab/cli --filter=@react-grab/utils --filter=@react-grab/visual-edit && pnpm --filter grab build",
     "dev": "turbo dev --filter=react-grab --filter=@react-grab/cursor --filter=@react-grab/claude-code --filter=@react-grab/ami --filter=@react-grab/opencode --filter=@react-grab/codex --filter=@react-grab/gemini --filter=@react-grab/amp --filter=@react-grab/cli --filter=@react-grab/utils --filter=@react-grab/visual-edit",
-    "test": "turbo run test --filter=react-grab --filter=@react-grab/cli",
+    "test": "turbo run test --filter=react-grab --filter=@react-grab/cli --filter=@react-grab/website",
     "lint": "pnpm --filter react-grab lint",
     "lint:fix": "pnpm --filter react-grab lint:fix",
     "format": "prettier --write .",

packages/website/app/api/check-mock-cerebras/route.ts

@@ -0,0 +1,37 @@
+import { isUsingMocks } from "../../../lib/env";
+
+const getCorsHeaders = () => {
+  return {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+  };
+};
+
+export const OPTIONS = () => {
+  return new Response(null, {
+    status: 204,
+    headers: getCorsHeaders(),
+  });
+};
+
+export const GET = () => {
+  const corsHeaders = getCorsHeaders();
+
+  if (!isUsingMocks()) {
+    return Response.json(
+      { status: "disabled", mockMode: false },
+      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+
+  return Response.json(
+    {
+      status: "ok",
+      mockMode: true,
+      version: "1.0",
+      message: "Mock Cerebras service operational",
+    },
+    { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+  );
+};

packages/website/app/api/check-visual-edit/route.ts

@@ -1,5 +1,7 @@
 const IS_HEALTHY = true;
 
+import { isUsingMocks } from "../../../lib/env";
+
 const getCorsHeaders = () => {
   return {
     "Access-Control-Allow-Origin": "*",
@@ -16,7 +18,7 @@ export const OPTIONS = () => {
 export const GET = () => {
   const corsHeaders = getCorsHeaders();
   return Response.json(
-    { healthy: IS_HEALTHY },
+    { healthy: IS_HEALTHY, mockMode: isUsingMocks() },
     { headers: { ...corsHeaders, "Content-Type": "application/json" } },
   );
 };

packages/website/app/api/mock/cerebras/route.ts

@@ -0,0 +1,62 @@
+import { isUsingMocks } from "../../../../lib/env";
+import { generateCodeFromPrompt } from "../../../../lib/generator";
+
+interface MockCerebrasRequest {
+  messages: Array<{ role: string; content: string }>;
+}
+
+const getCorsHeaders = () => {
+  return {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type",
+  };
+};
+
+export const OPTIONS = () => {
+  return new Response(null, {
+    status: 204,
+    headers: getCorsHeaders(),
+  });
+};
+
+export const POST = async (request: Request) => {
+  if (!isUsingMocks()) {
+    return Response.json(
+      { error: "Mock endpoint is disabled. Set USE_MOCKS=true to enable." },
+      { status: 404, headers: getCorsHeaders() }
+    );
+  }
+
+  try {
+    const body = (await request.json()) as MockCerebrasRequest;
+    const userMessage = body.messages.find(
+      (message) => message.role === "user"
+    );
+
+    if (!userMessage) {
+      return Response.json(
+        { error: "No user message found in request" },
+        { status: 400, headers: getCorsHeaders() }
+      );
+    }
+
+    const generatedCode = generateCodeFromPrompt(userMessage.content);
+
+    return new Response(generatedCode, {
+      status: 200,
+      headers: {
+        ...getCorsHeaders(),
+        "Content-Type": "text/javascript",
+      },
+    });
+  } catch (error) {
+    return Response.json(
+      {
+        error: "Failed to process mock request",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+      { status: 500, headers: getCorsHeaders() }
+    );
+  }
+};

packages/website/app/api/visual-edit/route.ts

@@ -1,5 +1,6 @@
 import { generateText } from "ai";
 import type { ModelMessage } from "ai";
+import { getVisualEditConfig } from "../../../lib/env";
 
 interface ConversationMessage {
   role: "user" | "assistant";
@@ -154,6 +155,32 @@ export const POST = async (request: Request) => {
   }));
 
   try {
+    const config = getVisualEditConfig();
+
+    if (config.useMocks) {
+      const mockResponse = await fetch(config.mockUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ messages }),
+      });
+
+      if (!mockResponse.ok) {
+        throw new Error(`Mock endpoint returned ${mockResponse.status}`);
+      }
+
+      const generatedCode = await mockResponse.text();
+
+      return new Response(generatedCode, {
+        status: 200,
+        headers: {
+          ...corsHeaders,
+          "Content-Type": "text/javascript",
+        },
+      });
+    }
+
     let generatedCode: string;
 
     console.log("shouldUsePrimaryModel", shouldUsePrimaryModel);