Generative UI in React

npm create vite@latest my-chat -- --template react-ts
cd my-chat
npm install @morphscreen/web express

// Two routes for the page in Express 5: /api/agent carries connectAgent's
// runs on to /v1/ui, and /api/chat streams /v1/chat/completions for a chat
// UI of your own. The key stays on the server, and the server picks the model.
import express from "express";
import { Readable } from "node:stream";
const API = process.env.MORPHSCREEN_API ?? "https://api.morphscreen.com/v1";
const MODEL = process.env.MODEL ?? "deepseek/deepseek-v4.1-flash";
const HEADERS = { "Content-Type": "application/json", "X-MorphScreen-Key": process.env.MORPHSCREEN_KEY };
const app = express();
app.use(express.json({ limit: "1mb" }));
// Sends the body on and streams the answer back. When the reader leaves, the
// call to MorphScreen stops too, so no model keeps writing for nobody.
async function relay(req, res, path, body) {
  const stop = new AbortController();
  res.on("close", () => stop.abort());
  const upstream = await fetch(${</span><span class="t1">API</span><span class="t3">}${</span><span class="t1">path</span><span class="t3">}, { method: "POST", headers: HEADERS, body: JSON.stringify(body), signal: stop.signal });
  res.status(upstream.status).type(upstream.headers.get("content-type") ?? "text/event-stream");
  Readable.fromWeb(upstream.body).pipe(res);
}
app.post("/api/agent", (req, res) => relay(req, res, "/ui", { ...req.body, forwardedProps: { ...req.body.forwardedProps, model: MODEL } }));
app.post("/api/chat", (req, res) => relay(req, res, "/chat/completions", { model: MODEL, stream: true, messages: req.body.messages }));
app.listen(process.env.PORT ?? 3000);

MORPHSCREEN_KEY=ms_live_... node server.mjs

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],
  server: { proxy: { "/api": "http://localhost:3000" } },
});

import { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import { connectAgent, loadCore, type Conversation } from "@morphscreen/web";
import "@morphscreen/web/morphscreen.css";
import coreUrl from "@morphscreen/web/morphscreen-agent.wasm?url";
// Loaded once for the page: the core is about 250 KB compressed.
const core = loadCore(coreUrl);
function Chat() {
  const element = useRef<HTMLDivElement>(null);
  const [chat, setChat] = useState<Conversation | null>(null);
  const [busy, setBusy] = useState(false);
  // connectAgent holds the conversation: what the reader types, each answer
  // as it streams, and buttons and forms sent back as the next turn.
  useEffect(() => {
    let live: Conversation | undefined;
    let gone = false;
    core.then((c) => {
      if (gone) return;
      live = connectAgent(element.current!, { core: c, url: "/api/agent" });
      setChat(live);
    });
    return () => {
      gone = true;
      live?.destroy();
    };
  }, []);
  async function send(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const input = e.currentTarget.elements.namedItem("message") as HTMLInputElement;
    const text = input.value;
    input.value = "";
    setBusy(true);
    try {
      await chat?.send(text);
    } finally {
      setBusy(false);
    }
  }
  return (
    <main>
      <div ref={element} />
      <form onSubmit={send}>
        <input name="message" placeholder="Ask anything" aria-label="Your message" required />
        <button disabled={!chat || busy}>Send</button>
      </form>
    </main>
  );
}
createRoot(document.getElementById("root")!).render(<Chat />);

npm run dev