Créer un clone de Manus avec l'API Baguette Bot : une tâche, un ordinateur, un livrable

mkdir mon-agent && cd mon-agent
npm init -y && npm pkg set type=module
npm i express
mkdir public

// server.js (Node 18+)
import express from "express";

const KEY = process.env.BAGUETTE_API_KEY;
const BASE = "https://api.baguettebot.com";
const auth = { Authorization: `Bearer ${KEY}` };

const api = (path, body, method = body ? "POST" : "GET") =>
  fetch(BASE + path, {
    method,
    headers: { ...auth, "Content-Type": "application/json" },
    body: body && JSON.stringify(body),
  }).then(async (r) => {
    if (!r.ok) throw new Error((await r.json()).error?.message ?? r.statusText);
    return r.json();
  });

const INSTRUCTIONS = `Tu es un agent autonome qui travaille sur ton propre ordinateur (Chrome, terminal, fichiers).
Mène la tâche jusqu'au bout sans poser de questions, sauf si tu es vraiment bloqué.
Enregistre le livrable final dans le dossier ~/Deliverables/ (Markdown, CSV, HTML, code ou archive .zip).
Termine ta réponse par un court résumé, puis une dernière ligne exactement de la forme :
LIVRABLE: ~/Deliverables/nom-du-fichier.ext`;

// agentId -> { content, started, messageId, result, file }. En mémoire : une base de données en production.
const tasks = new Map();

const app = express();
app.use(express.json({ limit: "40mb" }));
app.use(express.static("public"));
const route = (fn) => (req, res) => fn(req, res).catch((e) => res.status(500).json({ error: e.message }));
const find = (req, res) => {
  const t = tasks.get(req.params.id);
  if (!t) res.status(404).json({ error: "Tâche inconnue" });
  return t;
};

// Toute la conversation après un message, page par page (200 messages max par appel)
async function messagesAfter(id, after) {
  const all = [];
  for (;;) {
    const { data } = await api(`/v1/agents/${id}/messages?after=${after}&limit=200`);
    all.push(...data);
    if (data.length < 200) return all;
    after = data.at(-1).id;
  }
}

// 1. Nouvelle tâche : un agent neuf, et le fichier d'entrée déposé sur son ordinateur
app.post("/api/tasks", route(async (req, res) => {
  const { prompt, file } = req.body;
  if (!prompt?.trim()) return res.status(400).json({ error: "Décris la tâche" });
  const agent = await api("/v1/agents", {
    name: prompt.slice(0, 80),
    instructions: INSTRUCTIONS,
    idle_minutes: 3,
    metadata: { app: "mon-agent" },
  });
  let content = prompt;
  if (file) {
    const path = `~/Uploads/${file.name.replace(/[^\w.-]/g, "_")}`;
    await api(`/v1/agents/${agent.id}/files`, { path, content_base64: file.base64 });
    content += `\n\nFichier fourni : ${path}`;
  }
  tasks.set(agent.id, { content });
  res.json({ id: agent.id });
}));

// 2. Les événements de l'agent, relayés tels quels à la page (la clé reste ici)
app.get("/api/tasks/:id/events", route(async (req, res) => {
  if (!find(req, res)) return;
  const ctrl = new AbortController();
  res.on("close", () => ctrl.abort());
  const upstream = await fetch(`${BASE}/v1/agents/${req.params.id}/events`, { headers: auth, signal: ctrl.signal });
  if (!upstream.ok) return res.status(upstream.status).end();
  res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-store" });
  try { for await (const chunk of upstream.body) res.write(chunk); } catch { /* page fermée */ }
  res.end();
}));

// 3. Lancer la tâche, une fois que la page écoute (pour ne rater aucun événement)
app.post("/api/tasks/:id/run", route(async (req, res) => {
  const t = find(req, res); if (!t) return;
  if (!t.started) {
    t.started = true;
    const run = await api(`/v1/agents/${req.params.id}/messages`, { content: t.content, wait: false });
    t.messageId = run.message_id;
  }
  res.json({ ok: true });
}));

// Répondre à l'agent (par exemple après avoir pris la main pour une connexion)
app.post("/api/tasks/:id/reply", route(async (req, res) => {
  if (!find(req, res)) return;
  await api(`/v1/agents/${req.params.id}/messages`, { content: req.body.text, wait: false });
  res.json({ ok: true });
}));

// 4. L'écran en direct : seule l'URL signée part vers la page
app.post("/api/tasks/:id/live", route(async (req, res) => {
  if (!find(req, res)) return;
  const live = await api(`/v1/agents/${req.params.id}/computer/live`, {
    interactive: req.query.interactive === "1",
    ttl_seconds: 1800,
  });
  res.json({ url: live.url });
}));

app.post("/api/tasks/:id/stop", route(async (req, res) => {
  if (!find(req, res)) return;
  await api(`/v1/agents/${req.params.id}/stop`, {});
  res.json({ ok: true });
}));

// 5. Le résultat : dernière réponse, livrable rapatrié, puis ordinateur éteint
app.get("/api/tasks/:id/result", route(async (req, res) => {
  const t = find(req, res); if (!t) return;
  const id = req.params.id;
  if (!t.result) {
    const messages = await messagesAfter(id, t.messageId);
    const output = [...messages].reverse().find((m) => m.role === "assistant" && m.content)?.content ?? "";
    const path = /LIVRABLE:\s*(~\/Deliverables\/[^\s`*]+)/.exec(output)?.[1];
    if (path) {
      const r = await fetch(`${BASE}/v1/agents/${id}/files?path=${encodeURIComponent(path)}`, { headers: auth });
      if (r.ok) t.file = { name: path.split("/").pop(), data: Buffer.from(await r.arrayBuffer()) };
    }
    await api(`/v1/agents/${id}/computer/stop`, {});
    t.result = { output, file: t.file?.name ?? null };
  }
  res.json(t.result);
}));

app.get("/api/tasks/:id/file", (req, res) => {
  const f = tasks.get(req.params.id)?.file;
  if (!f) return res.sendStatus(404);
  res.attachment(f.name).send(f.data);
});

app.listen(3000, () => console.log("http://localhost:3000"));

<!-- public/index.html -->
<!doctype html>
<html lang="fr">
<meta charset="utf-8">
<title>Mon agent</title>
<style>
  body { font: 15px/1.5 system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; }
  textarea { width: 100%; height: 90px; }
  iframe { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: 12px; background: #111; }
  #log { font: 13px ui-monospace, monospace; color: #555; max-height: 220px; overflow: auto; }
  pre { white-space: pre-wrap; background: #f4f4f4; padding: 12px; border-radius: 8px; }
</style>
<h1>Mon agent</h1>
<textarea id="prompt" placeholder="Ex. : liste les 15 principaux salons tech européens de 2027 avec dates, ville et prix, en CSV"></textarea>
<p>
  <input type="file" id="file">
  <button id="go">Lancer</button>
  <button id="stop" hidden>Arrêter</button>
  <button id="resume" hidden>C'est fait, continue</button>
</p>
<p id="status"></p>
<iframe id="screen" hidden></iframe>
<div id="log"></div>
<pre id="output" hidden></pre>
<p><a id="download" hidden></a></p>

<script type="module">
const $ = (s) => document.querySelector(s);
const post = (url, body) => fetch(url, {
  method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body ?? {}),
}).then((r) => r.json());
const log = (text) => { const d = document.createElement("div"); d.textContent = text; $("#log").prepend(d); };
const toBase64 = (f) => new Promise((ok) => {
  const r = new FileReader(); r.onload = () => ok(r.result.split(",")[1]); r.readAsDataURL(f);
});

$("#go").onclick = async () => {
  const f = $("#file").files[0];
  $("#go").disabled = true;
  $("#status").textContent = "Préparation de l'agent…";
  const file = f && { name: f.name, base64: await toBase64(f) };
  const { id, error } = await post("/api/tasks", { prompt: $("#prompt").value, file });
  if (error) { $("#status").textContent = error; $("#go").disabled = false; return; }
  follow(id);
};

function follow(id) {
  const events = new EventSource(`/api/tasks/${id}/events`);
  let started = false, working = false, mode = "";
  const showScreen = async (interactive) => {
    const want = interactive ? "main" : "regard";
    if (mode === want) return;
    mode = want;
    const { url } = await post(`/api/tasks/${id}/live${interactive ? "?interactive=1" : ""}`);
    $("#screen").src = url; $("#screen").hidden = false;
  };
  $("#stop").hidden = false;
  $("#stop").onclick = () => post(`/api/tasks/${id}/stop`);
  $("#resume").onclick = () => {
    $("#resume").hidden = true;
    post(`/api/tasks/${id}/reply`, { text: "C'est fait, tu peux continuer." });
  };

  events.addEventListener("ready", () => {
    if (!started) { started = true; post(`/api/tasks/${id}/run`); }
  });
  events.addEventListener("computer", (e) => {
    if (JSON.parse(e.data).status === "running") showScreen(false);
  });
  events.addEventListener("message", (e) => {
    const m = JSON.parse(e.data);
    if (m.role === "tool") log(`${m.tool.ok ? "ok    " : "échec "} ${m.tool.name} · ${m.tool.summary ?? ""}`);
  });
  events.addEventListener("status", (e) => {
    const s = JSON.parse(e.data);
    $("#status").textContent = s.text ?? s.status;
    if (s.status === "working") { working = true; showScreen(false); }
    if (s.status === "blocked") {
      $("#status").textContent = "L'agent a besoin de toi : prends la main dans l'écran, puis clique sur « C'est fait ».";
      $("#resume").hidden = false;
      showScreen(true);
    }
    if (s.status === "idle" && working) finish(id, events);
  });
}

async function finish(id, events) {
  events.close();
  $("#stop").hidden = true; $("#resume").hidden = true;
  $("#status").textContent = "Terminé, récupération du livrable…";
  const { output, file, error } = await fetch(`/api/tasks/${id}/result`).then((r) => r.json());
  $("#output").textContent = error ?? output;
  $("#output").hidden = false;
  if (file) {
    const a = $("#download");
    a.href = `/api/tasks/${id}/file`; a.download = file; a.textContent = `Télécharger ${file}`; a.hidden = false;
  }
  $("#status").textContent = "Terminé.";
  $("#go").disabled = false;
}
</script>

BAGUETTE_API_KEY=bb_live_… node server.js

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

async function runTask(agentId, content) {
  const run = await api(`/v1/agents/${agentId}/messages`, { content, wait: true });
  if (run.status === "done") return run.output;
  // Toujours en cours après 120 s : on attend la fin
  while ((await api(`/v1/agents/${agentId}`)).status === "working") await sleep(5000);
  const messages = await messagesAfter(agentId, run.message_id);
  return [...messages].reverse().find((m) => m.role === "assistant" && m.content)?.content ?? null;
}