useChat

import { useChat } from "@base44/platform/react";
import Markdown from "react-markdown";

// ...

// Inside your component
const chat = useChat({ appId, backend, onAppCreated: selectApp });
return (
  <>
    {chat.items.map((item) => (
      <div key={item.id} className={item.role}>
        {item.text && <Markdown>{item.text}</Markdown>}
        {item.steps.map((step) =>
          step.question?.kind === "approval" ? (
            <button key={step.id} onClick={step.question.approve}>Allow {step.question.action}</button>
          ) : (
            <small key={step.id}>{step.label}</small>
          ),
        )}
      </div>
    ))}
    {chat.error && <p role="alert">{chat.error.message}</p>}
    <button onClick={() => (appId ? chat.send(prompt) : chat.create(prompt))}>Send</button>
  </>
);

function PromptForm({ chat }: { chat: UseChatResult }) {
  const [prompt, setPrompt] = useState("");
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        chat.send(prompt);
        setPrompt("");
      }}
    >
      <input value={prompt} onChange={(event) => setPrompt(event.target.value)} />
      <button type="submit" disabled={!prompt.trim()}>Send</button>
      {chat.status === "building" && <small>The AI is working. New prompts wait in the queue.</small>}
    </form>
  );
}

const [appId, setAppId] = useState<string | null>(null);
const chat = useChat({ appId, backend, onAppCreated: (app) => setAppId(app.id) });

const submit = (prompt: string) => (appId ? chat.send(prompt) : chat.create(prompt));

{chat.error && (
  <div role="alert">
    {chat.error.message}
    {chat.error.code !== "build_failed" && <button onClick={chat.clearError}>Dismiss</button>}
  </div>
)}

async function post<T>(path: string, body: unknown): Promise<T> {
  const response = await fetch(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
  if (!response.ok) throw new Error(`${path} failed: ${response.status}`);
  return response.json();
}

const backend: ChatBackend = {
  createApp: (prompt) => post("/api/chat/apps", { prompt }),
  openLiveSession: (appId) => post("/api/chat/session", { appId }),
  sendMessage: (appId, content) => post("/api/chat/message", { appId, content }),
  submitToolCallInput: (appId, answer) => post("/api/chat/answer", { appId, answer }),
};

export async function POST(request: Request) {
  const { prompt } = await request.json();
  const response = await fetch("https://app.base44.com/api/apps", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.BASE44_ACCESS_TOKEN}`, "Content-Type": "application/json" },
    body: JSON.stringify({ initial_message: { content: prompt } }),
  });
  if (!response.ok) return new Response("Create app failed", { status: response.status });
  const app = await response.json();
  return Response.json({ id: app.id, name: app.name });
}

export async function POST(request: Request) {
  const { appId } = await request.json();
  const response = await fetch("https://app.base44.com/api/v1/socket-sessions", {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.BASE44_API_KEY}`, "Content-Type": "application/json" },
    body: JSON.stringify({ app_ids: [appId] }),
  });
  if (!response.ok) return new Response("Create socket session failed", { status: response.status });
  const { session_token, socket_url, socket_path, session_id } = await response.json();
  await saveSession(appId, session_id); // Keep it on your server to change or end the session
  return Response.json({ session_token, socket_url, socket_path });
}

function ChoiceButtons({ question }: { question: ChoiceQuestion }) {
  const [entry] = question.questions;
  return (
    <div>
      <p>{entry.text}</p>
      {entry.options.map((label) => (
        <button key={label} onClick={() => question.answer([[label]])}>{label}</button>
      ))}
      <button onClick={question.decline}>Skip</button>
    </div>
  );
}

<button onClick={question.decline}>Skip</button>

function SecretsForm({ question }: { question: SecretsQuestion }) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        question.submit(Object.fromEntries(question.fields.map((field) => [field.name, String(form.get(field.name) ?? "")])));
      }}
    >
      {question.fields.map((field) => (
        <label key={field.name}>
          {field.name}
          <input name={field.name} type="password" placeholder={field.description} />
        </label>
      ))}
      <button type="submit">Save</button>
      <button type="button" onClick={question.decline}>Skip</button>
    </form>
  );
}

<button onClick={question.decline}>Skip</button>

function ApprovalPrompt({ question }: { question: ApprovalQuestion }) {
  return (
    <div>
      <p>The AI wants to run {question.action}.</p>
      {question.reason && <p>{question.reason}</p>}
      <button onClick={question.approve}>Allow</button>
      <button onClick={question.decline}>Decline</button>
    </div>
  );
}

<button onClick={question.decline}>Decline</button>