🎯 Build the Moltbot Voice Bot (Local)

Make a local web app that lets you talk to Moltbot with voice, fast.

---

🤔 What You’ll Get

• ✅ A local website you open in your browser
• ✅ A cute Moltbot character on screen
• ✅ A **Connect** button + **Start/Stop Talking**
• ✅ Optional: say **“run tool …”** to run Codex CLI and read results out loud

---

📋 What You Need

• ✅ A Mac (or Linux)
• ✅ Node.js installed
• ✅ An OpenAI API key (starts with `sk-`)
• ✅ Google Chrome (recommended)

⚠️ **Important:** Keep your API key secret. Never paste it into public code.

---

🚀 Step 1: Create the project folder

1. Open **Terminal**

2. Run this:

mkdir -p ~/clawd/projects/moltbot-voice-local/public
cd ~/clawd/projects/moltbot-voice-local

---

🔨 Step 2: Create `package.json`

1. In the folder, create `package.json`

2. Paste this:

{
  "name": "moltbot-voice-local",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2"
  }
}

---

🔑 Step 3: Add your API key in `.env`

1. Create a file called `.env`

2. Paste this (and put your key):

OPENAI_API_KEY=sk-your-key-here
OPENAI_REALTIME_MODEL=gpt-4o-realtime-preview
OPENAI_REALTIME_VOICE=alloy
PORT=4187

⚠️ **Important:** Add `.env` to `.gitignore` so it never gets committed.

---

🔨 Step 4: Create `server.js`

1. Create a file called `server.js`

2. Paste this:

import express from "express";
import dotenv from "dotenv";
import { execFile } from "node:child_process";
import { promisify } from "node:util";

dotenv.config();
const execFileAsync = promisify(execFile);

const app = express();
app.use(express.json({ limit: "1mb" }));

const PORT = Number(process.env.PORT || 4187);
const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
const MODEL = process.env.OPENAI_REALTIME_MODEL || "gpt-4o-realtime-preview";
const VOICE = process.env.OPENAI_REALTIME_VOICE || "alloy";

if (!OPENAI_API_KEY) {
  console.error("Missing OPENAI_API_KEY in .env");
  process.exit(1);
}

// Serve the UI
app.use(express.static("public"));

// Create an ephemeral key (browser never sees your real API key)
app.get("/session", async (req, res) => {
  try {
    const r = await fetch("https://api.openai.com/v1/realtime/sessions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${OPENAI_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ model: MODEL, voice: VOICE }),
    });

    const data = await r.json();
    if (!r.ok) return res.status(r.status).json({ ok: false, data });

    res.json({
      ok: true,
      model: MODEL,
      voice: VOICE,
      client_secret: data?.client_secret?.value,
    });
  } catch (e) {
    res.status(500).json({ ok: false, error: String(e) });
  }
});

// Optional: run Codex CLI when you say "run tool ..."
app.post("/tool", async (req, res) => {
  try {
    const prompt = String(req.body?.prompt || "").trim();
    if (!prompt) return res.status(400).json({ ok: false, error: "Missing prompt" });

    const { stdout: codexPathOut } = await execFileAsync("/bin/sh", ["-lc", "command -v codex || true"]);
    const CODEX_BIN = (codexPathOut || "").trim();
    if (!CODEX_BIN) return res.status(500).json({ ok: false, error: "codex CLI not found" });

    const { stdout: tmpOut } = await execFileAsync("/bin/sh", ["-lc", "mktemp -d"]);
    const tmpDir = (tmpOut || "").trim();

    const shellCmd = `set -e; cd ${JSON.stringify(tmpDir)}; git init -q; ${JSON.stringify(CODEX_BIN)} exec ${JSON.stringify(prompt)}`;
    const { stdout, stderr } = await execFileAsync("/bin/sh", ["-lc", shellCmd], {
      timeout: 180_000,
      maxBuffer: 1024 * 1024,
    });

    res.json({ ok: true, text: (stdout || stderr || "").trim() });
  } catch (e) {
    res.status(500).json({ ok: false, error: String(e?.message || e) });
  }
});

app.listen(PORT, () => {
  console.log(`Moltbot Voice MVP running: http://localhost:${PORT}`);
});

---

🎨 Step 5: Create the UI files

5A) Create `public/index.html`

1. Create `public/index.html`

2. Paste your HTML (the page layout)

5B) Create `public/style.css`

1. Create `public/style.css`

2. Paste your CSS (the design)

5C) Create `public/app.js`

1. Create `public/app.js`

2. Paste your JavaScript

3. Make it:

– Connect to OpenAI Realtime

– Use browser speech recognition (English)

– Send text to the model

– Play voice back

---

✅ Step 6: Install and run

1. Install:

cd ~/clawd/projects/moltbot-voice-local
npm install

2. Start:

npm start

3. Open this in your browser:

http://localhost:4187

---

💡 Pro Tips

**Tip 1: Use Chrome**

Chrome works best for speech recognition.

**Tip 2: Keep the model English**

Always force:

• `lang = "en-US"`
• instructions: “Respond in English”

**Tip 3: Keep keys safe**

Never commit `.env`.

---

❓ Common Questions

**Q: Why do we create a /session endpoint?**

So your browser gets a short-lived key. Your real API key stays on your machine.

**Q: Why does Codex need a git repo?**

Codex CLI won’t run unless it is inside a trusted git folder.

**Q: Why does the server get killed sometimes?**

That happens when we restart while editing. Just run `npm start` again.

---

🎉 You Did It!

You now have a local Moltbot voice bot.

Try this:

• 🗣️ “What should I post today?”
• 🧰 “run tool write 10 YouTube titles about AI automation”

---

*If you want, I can turn this into a real desktop app next.*