Spaces:

Sk0lovek
/

AIBuilder

Configuration error

App Files Files Community

Sk0lovek commited on Mar 27

Commit

ef50209

verified ·

1 Parent(s): af98494

Upload 13 files

Browse files

Files changed (13) hide show

.env.example +9 -0
.gitignore +8 -0
README.md +20 -10
index.html +13 -0
metadata.json +5 -0
package-lock.json +0 -0
package.json +39 -0
server.ts +258 -0
src/App.tsx +358 -0
src/index.css +1 -0
src/main.tsx +10 -0
tsconfig.json +26 -0
vite.config.ts +24 -0

.env.example ADDED Viewed

	@@ -0,0 +1,9 @@

+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

README.md CHANGED Viewed

@@ -1,10 +1,20 @@
----
-title: AIBuilder
-emoji: 📉
-colorFrom: pink
-colorTo: purple
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+# Run and deploy your AI Studio app
+This contains everything you need to run your app locally.
+View your app in AI Studio: https://ai.studio/apps/e637c9a3-5d3d-4b65-a91f-769d105c53be
+## Run Locally
+**Prerequisites:**  Node.js
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+  "name": "Minecraft AI Architect",
+  "description": "Web dashboard to manage an AI-powered Minecraft bot that builds structures from chat prompts using Gemini.",
+  "requestFramePermissions": []
+}

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,39 @@

+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsx server.ts",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.46.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "cors": "^2.8.6",
+    "dotenv": "^17.2.3",
+    "express": "^4.22.1",
+    "lucide-react": "^0.546.0",
+    "mineflayer": "^4.35.0",
+    "mineflayer-pathfinder": "^2.4.5",
+    "motion": "^12.23.24",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
+    "vite": "^6.2.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

server.ts ADDED Viewed

	@@ -0,0 +1,258 @@

+import express from "express";
+import { createServer } from "http";
+import { Server } from "socket.io";
+import { createServer as createViteServer } from "vite";
+import path from "path";
+import mineflayer from "mineflayer";
+import { pathfinder, Movements, goals } from "mineflayer-pathfinder";
+import { GoogleGenAI, Type } from "@google/genai";
+const app = express();
+const httpServer = createServer(app);
+const io = new Server(httpServer, {
+  cors: {
+    origin: "*",
+  },
+});
+const PORT = 3000;
+let bot: mineflayer.Bot | null = null;
+let ai: GoogleGenAI | null = null;
+let selectedModel: string = "gemini-3-flash-preview";
+let apiType: string = "google";
+let apiBaseUrl: string = "";
+let customModel: string = "";
+let maxBlocks: number = 10000;
+let globalApiKey: string = "";
+// Helper to log to frontend
+const log = (message: string, type: "info" | "success" | "error" | "chat" = "info") => {
+  io.emit("bot-log", { message, type, timestamp: new Date().toISOString() });
+  console.log(`[${type.toUpperCase()}] ${message}`);
+};
+async function startServer() {
+  // API Routes
+  app.get("/api/status", (req, res) => {
+    res.json({ connected: !!bot, username: bot?.username });
+  });
+  // Socket.io for Bot Control
+  io.on("connection", (socket) => {
+    log("Frontend connected to control panel");
+    socket.on("connect-bot", (config) => {
+      const { host, port, version, username, apiKey, model } = config;
+      if (bot) {
+        bot.quit();
+        log("Existing bot disconnected");
+      }
+      try {
+        globalApiKey = apiKey;
+        apiType = config.apiType || "google";
+        apiBaseUrl = config.apiBaseUrl || "";
+        customModel = config.customModel || "";
+        maxBlocks = parseInt(config.maxBlocks) || 10000;
+        selectedModel = model || "gemini-3-flash-preview";
+        if (apiType === "google") {
+          ai = new GoogleGenAI({ apiKey });
+        } else {
+          ai = null;
+        }
+        bot = mineflayer.createBot({
+          host,
+          port: parseInt(port) || 25565,
+          username,
+          version: version || false,
+        });
+        bot.loadPlugin(pathfinder);
+        bot.on("spawn", () => {
+          log(`Bot ${bot?.username} spawned on ${host}:${port}`, "success");
+          io.emit("bot-status", { connected: true, username: bot?.username });
+        });
+        bot.on("chat", async (username, message) => {
+          if (username === bot?.username) return;
+          log(`${username}: ${message}`, "chat");
+          if (message.startsWith("!build ")) {
+            const prompt = message.replace("!build ", "");
+            await handleBuildRequest(prompt, username);
+          }
+        });
+        bot.on("error", (err) => log(`Bot error: ${err.message}`, "error"));
+        bot.on("kicked", (reason) => {
+          log(`Bot kicked: ${reason}`, "error");
+          bot = null;
+          io.emit("bot-status", { connected: false });
+        });
+      } catch (error: any) {
+        log(`Failed to initialize: ${error.message}`, "error");
+      }
+    });
+    socket.on("disconnect-bot", () => {
+      if (bot) {
+        bot.quit();
+        bot = null;
+        log("Bot disconnected manually");
+        io.emit("bot-status", { connected: false });
+      }
+    });
+  });
+  async function handleBuildRequest(prompt: string, requestingUser: string) {
+    if (!bot) return;
+    log(`AI is thinking about: "${prompt}"...`);
+    bot.chat(`Request received from ${requestingUser}, beginning generation...`);
+    try {
+      const promptText = `You are a Minecraft architect and admin. The user "${requestingUser}" wants: "${prompt}".
+        You can build structures or execute commands (like giving items, summoning entities, etc.).
+        Coordinates (x, y, z) for blocks are relative to the bot's current position (0,0,0).
+        For commands (like /summon), use relative coordinates (~ ~ ~) which are relative to the bot!
+        Use standard Minecraft 1.21.1 block names and command syntax.
+        CRITICAL 1.21.1 COMMAND SYNTAX:
+        - Items with custom names/enchantments: give ${requestingUser} cobblestone[custom_name=[{"text":"Name","italic":false}],enchantments={channeling:1}]
+        - Summoning entities with visible names: summon armor_stand ~2 ~ ~ {CustomName:'{"text":"Palace"}',CustomNameVisible:1b,ArmorItems:[{},{},{},{id:"minecraft:shield",count:1}]}
+        You can build large structures up to ${maxBlocks} blocks.
+        To save tokens, output a JSON object containing an "actions" array.
+        Action type 1 (Place Block): [x, y, z, "block_name"]
+        Action type 2 (Execute Command): ["cmd", "command_string"]
+        Example:
+        {
+          "actions": [
+            [0, 0, 0, "stone"],
+            [0, 1, 0, "oak_planks"],
+            ["cmd", "give ${requestingUser} diamond_sword[custom_name=[{\\"text\\":\\"Epic Sword\\",\\"italic\\":false}]] 1"],
+            ["cmd", "summon armor_stand ~2 ~ ~ {CustomName:'{\\"text\\":\\"Guard\\"}',CustomNameVisible:1b}"]
+          ]
+        }
+        Output ONLY the JSON object.`;
+      let responseText = "";
+      if (apiType === "openai") {
+        const url = apiBaseUrl.replace(/\/+$/, '') + '/chat/completions';
+        const res = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${globalApiKey}`
+          },
+          body: JSON.stringify({
+            model: customModel || "gpt-3.5-turbo",
+            messages: [{ role: "user", content: promptText }]
+          })
+        });
+        if (!res.ok) {
+          const errText = await res.text();
+          throw new Error(`Custom API Error: ${res.status} ${errText}`);
+        }
+        const data = await res.json();
+        responseText = data.choices[0].message.content;
+      } else {
+        if (!ai) throw new Error("Google GenAI not initialized");
+        const response = await ai.models.generateContent({
+          model: selectedModel,
+          contents: promptText,
+          config: {
+            responseMimeType: "application/json",
+          }
+        });
+        responseText = response.text;
+      }
+      // Clean up markdown formatting if present
+      responseText = responseText.replace(/```json/g, '').replace(/```/g, '').trim();
+      // Fix bad control characters (like literal newlines or tabs inside strings) that break JSON.parse
+      responseText = responseText.replace(/[\n\r\t]/g, ' ').replace(/[\x00-\x1F\x7F-\x9F]/g, '');
+      const parsed = JSON.parse(responseText);
+      const actions = parsed.actions;
+      if (!Array.isArray(actions)) throw new Error("Invalid AI response format: missing 'actions' array");
+      log(`AI generated ${actions.length} actions. Muting command feedback and starting execution...`, "success");
+      // Disable command feedback in Minecraft to prevent chat spam
+      bot.chat('/gamerule sendCommandFeedback false');
+      bot.chat('/gamerule logAdminCommands false');
+      const startPos = bot.entity.position.clone();
+      for (const action of actions) {
+        if (!bot) break;
+        if (!Array.isArray(action)) continue;
+        try {
+           // 100ms delay to speed up building while avoiding anti-spam kicks (10 blocks/sec)
+           await new Promise(r => setTimeout(r, 100));
+           if (action[0] === "cmd" && typeof action[1] === "string") {
+             let cmd = action[1];
+             if (cmd.startsWith("/")) cmd = cmd.substring(1);
+             log(`Executing command: /${cmd}`, "info");
+             bot.chat(`/${cmd}`);
+           } else if (action.length >= 4) {
+             const [x, y, z, rawBlock] = action;
+             const targetPos = startPos.offset(x, y, z);
+             // Ensure block name has minecraft: prefix if it doesn't already
+             let blockName = String(rawBlock).toLowerCase();
+             if (!blockName.startsWith('minecraft:')) {
+               blockName = `minecraft:${blockName}`;
+             }
+             // @ts-ignore
+             bot.chat(`/setblock ${Math.floor(targetPos.x)} ${Math.floor(targetPos.y)} ${Math.floor(targetPos.z)} ${blockName}`);
+           }
+        } catch (e) {
+           log(`Failed to execute action: ${JSON.stringify(action)}`, "error");
+        }
+      }
+      bot.chat("Generation complete.");
+      log("Generation complete!", "success");
+    } catch (error: any) {
+      log(`AI Error: ${error.message}`, "error");
+      bot.chat(`Error during generation: ${error.message}`);
+    }
+  }
+  // Vite middleware for development
+  if (process.env.NODE_ENV !== "production") {
+    const vite = await createViteServer({
+      server: { middlewareMode: true },
+      appType: "spa",
+    });
+    app.use(vite.middlewares);
+  } else {
+    const distPath = path.join(process.cwd(), "dist");
+    app.use(express.static(distPath));
+    app.get("*", (req, res) => {
+      res.sendFile(path.join(distPath, "index.html"));
+    });
+  }
+  httpServer.listen(PORT, "0.0.0.0", () => {
+    log(`Server running on http://localhost:${PORT}`, "success");
+  });
+}
+startServer();

src/App.tsx ADDED Viewed

	@@ -0,0 +1,358 @@

+import React, { useState, useEffect, useRef } from "react";
+import { io, Socket } from "socket.io-client";
+import {
+  Terminal,
+  Settings,
+  Play,
+  Square,
+  Cpu,
+  Globe,
+  User,
+  Key,
+  MessageSquare,
+  Activity
+} from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+interface LogEntry {
+  message: string;
+  type: "info" | "success" | "error" | "chat";
+  timestamp: string;
+}
+export default function App() {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [config, setConfig] = useState(() => {
+    const saved = localStorage.getItem("ai_architect_config");
+    if (saved) {
+      try {
+        return JSON.parse(saved);
+      } catch (e) {}
+    }
+    return {
+      host: "localhost",
+      port: "25565",
+      version: "1.21.11",
+      username: "AI_Architect",
+      apiKey: "",
+      model: "gemini-3-flash-preview",
+      apiType: "google",
+      apiBaseUrl: "https://api.openai.com/v1",
+      customModel: "gpt-4o",
+      maxBlocks: 10000
+    };
+  });
+  useEffect(() => {
+    localStorage.setItem("ai_architect_config", JSON.stringify(config));
+  }, [config]);
+  const [status, setStatus] = useState({ connected: false, username: "" });
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const logEndRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const newSocket = io();
+    setSocket(newSocket);
+    newSocket.on("bot-log", (log: LogEntry) => {
+      setLogs((prev) => [...prev.slice(-100), log]);
+    });
+    newSocket.on("bot-status", (status) => {
+      setStatus(status);
+    });
+    return () => {
+      newSocket.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    logEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [logs]);
+  const handleConnect = () => {
+    if (!socket) return;
+    if (!config.apiKey) {
+      alert("Please enter a Gemini API Key");
+      return;
+    }
+    socket.emit("connect-bot", config);
+  };
+  const handleDisconnect = () => {
+    if (!socket) return;
+    socket.emit("disconnect-bot");
+  };
+  return (
+    <div className="min-h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono p-4 md:p-8 flex flex-col gap-6">
+      {/* Header */}
+      <header className="flex items-center justify-between border-b border-[#333] pb-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-[#1a1a1a] border border-[#333] rounded">
+            <Cpu className="w-6 h-6 text-[#00ff00]" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold tracking-tighter uppercase">Minecraft AI Architect</h1>
+            <p className="text-xs text-[#666]">v1.0.0 // SPIGOT 1.21.1 INTEGRATION</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 px-3 py-1 bg-[#1a1a1a] border border-[#333] rounded-full">
+            <div className={`w-2 h-2 rounded-full ${status.connected ? "bg-[#00ff00] animate-pulse" : "bg-[#ff0000]"}`} />
+            <span className="text-[10px] uppercase tracking-widest">
+              {status.connected ? `ONLINE: ${status.username}` : "OFFLINE"}
+            </span>
+          </div>
+        </div>
+      </header>
+      <main className="grid grid-cols-1 lg:grid-cols-12 gap-6 flex-grow">
+        {/* Configuration Panel */}
+        <section className="lg:col-span-4 flex flex-col gap-4">
+          <div className="bg-[#111] border border-[#333] rounded-lg p-5 flex flex-col gap-4">
+            <div className="flex items-center gap-2 mb-2">
+              <Settings className="w-4 h-4 text-[#666]" />
+              <h2 className="text-xs uppercase tracking-widest font-bold">Bot Configuration</h2>
+            </div>
+            <div className="space-y-4">
+              <div className="space-y-1">
+                <label className="text-[10px] text-[#666] uppercase">Server Host</label>
+                <div className="relative">
+                  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#444]" />
+                  <input
+                    type="text"
+                    value={config.host}
+                    onChange={(e) => setConfig({...config, host: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 pl-9 text-sm focus:border-[#00ff00] outline-none transition-colors"
+                    placeholder="localhost"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">Port</label>
+                  <input
+                    type="text"
+                    value={config.port}
+                    onChange={(e) => setConfig({...config, port: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none"
+                    placeholder="25565"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">Version</label>
+                  <input
+                    type="text"
+                    value={config.version}
+                    onChange={(e) => setConfig({...config, version: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none"
+                    placeholder="Auto"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">Bot Name</label>
+                  <div className="relative">
+                    <User className="absolute left-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#444]" />
+                    <input
+                      type="text"
+                      value={config.username}
+                      onChange={(e) => setConfig({...config, username: e.target.value})}
+                      className="w-full bg-[#050505] border border-[#222] rounded p-2 pl-9 text-sm focus:border-[#00ff00] outline-none"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="space-y-1">
+                <label className="text-[10px] text-[#666] uppercase">API Key (Gemini or Custom)</label>
+                <div className="relative">
+                  <Key className="absolute left-3 top-1/2 -translate-y-1/2 w-3 h-3 text-[#444]" />
+                  <input
+                    type="password"
+                    value={config.apiKey}
+                    onChange={(e) => setConfig({...config, apiKey: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 pl-9 text-sm focus:border-[#00ff00] outline-none transition-colors"
+                    placeholder="Enter your API Key..."
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">API Provider</label>
+                  <select
+                    value={config.apiType}
+                    onChange={(e) => setConfig({...config, apiType: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none appearance-none cursor-pointer"
+                  >
+                    <option value="google">Google Gemini</option>
+                    <option value="openai">OpenAI / Custom API</option>
+                  </select>
+                </div>
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">Max Blocks Limit</label>
+                  <input
+                    type="number"
+                    value={config.maxBlocks}
+                    onChange={(e) => setConfig({...config, maxBlocks: parseInt(e.target.value) || 1000})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none"
+                  />
+                </div>
+              </div>
+              {config.apiType === 'google' ? (
+                <div className="space-y-1">
+                  <label className="text-[10px] text-[#666] uppercase">Gemini Model</label>
+                  <select
+                    value={config.model}
+                    onChange={(e) => setConfig({...config, model: e.target.value})}
+                    className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none appearance-none cursor-pointer"
+                  >
+                    <option value="gemini-pro-latest">🌌 Gemini Pro Latest (Latest Pro)</option>
+                    <option value="gemini-flash-latest">🌌 Gemini Flash Latest (Latest Flash)</option>
+                    <option value="gemini-3-pro-preview">🌌 Gemini 3 Pro (Gen 3 Pro)</option>
+                    <option value="gemini-3-flash-preview">🌌 Gemini 3 Flash (Gen 3 Flash)</option>
+                    <option value="gemini-2.5-pro">💎 Gemini 2.5 Pro (Powerful)</option>
+                    <option value="gemini-2.5-flash">⚡ Gemini 2.5 Flash (Fast)</option>
+                    <option value="gemini-2.5-flash-lite">🔦 Gemini 2.5 Lite (Lite)</option>
+                  </select>
+                </div>
+              ) : (
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1">
+                    <label className="text-[10px] text-[#666] uppercase">API Base URL</label>
+                    <input
+                      type="text"
+                      value={config.apiBaseUrl}
+                      onChange={(e) => setConfig({...config, apiBaseUrl: e.target.value})}
+                      className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none"
+                      placeholder="https://api.openai.com/v1"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[10px] text-[#666] uppercase">Model Name</label>
+                    <input
+                      type="text"
+                      value={config.customModel}
+                      onChange={(e) => setConfig({...config, customModel: e.target.value})}
+                      className="w-full bg-[#050505] border border-[#222] rounded p-2 text-sm focus:border-[#00ff00] outline-none"
+                      placeholder="gpt-4o"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="mt-4 flex gap-2">
+              {!status.connected ? (
+                <button
+                  onClick={handleConnect}
+                  className="flex-grow flex items-center justify-center gap-2 bg-[#00ff00] text-black font-bold py-3 rounded hover:bg-[#00cc00] transition-colors uppercase text-xs"
+                >
+                  <Play className="w-4 h-4 fill-current" /> Initialize Bot
+                </button>
+              ) : (
+                <button
+                  onClick={handleDisconnect}
+                  className="flex-grow flex items-center justify-center gap-2 bg-[#ff0000] text-white font-bold py-3 rounded hover:bg-[#cc0000] transition-colors uppercase text-xs"
+                >
+                  <Square className="w-4 h-4 fill-current" /> Terminate Session
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="bg-[#111] border border-[#333] rounded-lg p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <Activity className="w-4 h-4 text-[#666]" />
+              <h2 className="text-xs uppercase tracking-widest font-bold">Quick Commands</h2>
+            </div>
+            <div className="grid grid-cols-1 gap-2">
+              <p className="text-[10px] text-[#666] mb-2 leading-relaxed">
+                Use these commands in Minecraft chat to interact with the AI Architect:
+              </p>
+              <div className="bg-[#050505] border border-[#222] p-2 rounded flex flex-col gap-1">
+                <code className="text-[#00ff00] text-xs">!build [prompt]</code>
+                <span className="text-[9px] text-[#444]">Example: !build a small stone tower</span>
+              </div>
+            </div>
+          </div>
+        </section>
+        {/* Console / Logs */}
+        <section className="lg:col-span-8 flex flex-col">
+          <div className="bg-[#050505] border border-[#333] rounded-lg flex flex-col h-[600px]">
+            <div className="flex items-center justify-between px-4 py-2 border-b border-[#333] bg-[#111] rounded-t-lg">
+              <div className="flex items-center gap-2">
+                <Terminal className="w-3 h-3 text-[#666]" />
+                <span className="text-[10px] uppercase tracking-widest font-bold">System Terminal</span>
+              </div>
+              <div className="flex gap-1">
+                <div className="w-2 h-2 rounded-full bg-[#333]" />
+                <div className="w-2 h-2 rounded-full bg-[#333]" />
+                <div className="w-2 h-2 rounded-full bg-[#333]" />
+              </div>
+            </div>
+            <div className="flex-grow overflow-y-auto p-4 space-y-2 font-mono text-xs custom-scrollbar">
+              <AnimatePresence initial={false}>
+                {logs.length === 0 && (
+                  <div className="text-[#333] italic">Waiting for connection...</div>
+                )}
+                {logs.map((log, i) => (
+                  <motion.div
+                    key={i}
+                    initial={{ opacity: 0, x: -5 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="flex gap-3 border-l border-[#222] pl-3 py-1"
+                  >
+                    <span className="text-[#444] shrink-0">[{new Date(log.timestamp).toLocaleTimeString()}]</span>
+                    <span className={`
+                      ${log.type === "error" ? "text-[#ff0000]" : ""}
+                      ${log.type === "success" ? "text-[#00ff00]" : ""}
+                      ${log.type === "chat" ? "text-[#00ffff]" : ""}
+                      ${log.type === "info" ? "text-[#888]" : ""}
+                    `}>
+                      {log.type === "chat" && <MessageSquare className="inline w-3 h-3 mr-2 opacity-50" />}
+                      {log.message}
+                    </span>
+                  </motion.div>
+                ))}
+              </AnimatePresence>
+              <div ref={logEndRef} />
+            </div>
+          </div>
+        </section>
+      </main>
+      <footer className="mt-auto pt-4 border-t border-[#333] flex justify-between items-center text-[10px] text-[#444] uppercase tracking-widest">
+        <span>© 2026 AI ARCHITECT PROTOCOL</span>
+        <div className="flex gap-4">
+          <span>LATENCY: 42MS</span>
+          <span>UPTIME: 99.9%</span>
+        </div>
+      </footer>
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: #050505;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: #222;
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: #333;
+        }
+      `}</style>
+    </div>
+  );
+}

src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modifyâfile watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+    },
+  };
+});