frontend/app/page.js

"use client";

import Link from "next/link";
import { useState } from "react";

export default function Home() {
  const [starting, setStarting] = useState(false);
  const [roomUrl, setRoomUrl] = useState();

  async function start() {
    setStarting(true);
    const resp = await fetch(
      `${process.env.API_URL || "http://localhost:8000"}/start`,
      {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({}),
      }
    );

    const data = await resp.json();

    setRoomUrl(data.room_url);
  }

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      {!starting ? (
        <button
          onClick={() => start()}
          disabled={starting}
          className="bg-white text-black rounded-xl p-4 px-6"
        >
          Connect
        </button>
      ) : (
        <div>
          {roomUrl ? (
            <Link href={roomUrl}>Open Room</Link>
          ) : (
            "Waiting for bot to load..."
          )}
        </div>
      )}
    </main>
  );
}