React and CopilotKit

import { useState } from "react";
import { createAGUITransport, useChat } from "@hastekit/react";

const transport = createAGUITransport({ baseUrl: "/api/agui" });

export function Chat() {
  const chat = useChat({ agent: "assistant", transport });
  const [draft, setDraft] = useState("");
  return (
    <main>
      {chat.error && <p role="alert">{chat.error.message}</p>}
      {chat.messages.map((message) => (
        <p key={message.id}>
          <strong>{message.role}: </strong>
          {typeof message.content === "string" ? message.content : "[Attachment]"}
        </p>
      ))}
      <form onSubmit={async (event) => {
        event.preventDefault();
        const text = draft.trim();
        if (!text) return;
        setDraft("");
        await chat.sendMessage(text).catch(() => {});
      }}>
        <input value={draft} onChange={(event) => setDraft(event.target.value)} />
        <button disabled={chat.connection !== "idle" || chat.loadingMessages}>Send</button>
      </form>
      {chat.isRunning && (
        <button onClick={() => void chat.stop().catch(() => {})}>Stop</button>
      )}
    </main>
  );
}

import { useMemo } from "react";
import { CopilotChat, CopilotKitProvider } from "@copilotkit/react-core/v2";
import "@copilotkit/react-core/v2/styles.css";
import { HastekitAgent } from "@hastekit/copilotkit";

export function Chat({ threadId }: { threadId: string }) {
  const agent = useMemo(() => new HastekitAgent({
    agentName: "assistant", threadId, baseUrl: "/api/agui",
  }), [threadId]);
  return (
    <CopilotKitProvider selfManagedAgents={{ assistant: agent }}>
      <CopilotChat agentId="assistant" threadId={threadId} />
    </CopilotKitProvider>
  );
}