@klein-kit/react

React hooks for klein-kit. Stream local coding-agent sessions — Codex, Claude Code, OpenCode, Cursor, Pi — straight into your UI: messages, tool runs, checklists, approval prompts, token usage, and cross-agent workflows.

npm install @klein-kit/react @klein-kit/core react

import { useAgentSession, useProviders } from "@klein-kit/react";

function Chat() {
  const { available } = useProviders();
  const agent = useAgentSession({ provider: "codex", permissionMode: "ask" });

  return (
    <>
      {agent.messages.map((m) => (
        <div key={m.id} data-role={m.role}>
          {m.text}
          {m.tools.map((t) => <Tool key={t.id} name={t.name} status={t.status} output={t.output} />)}
        </div>
      ))}

      {agent.permissions.map((p) => (
        <Approve key={p.id} title={p.title}
          onAllow={() => agent.respond(p.id, { behavior: "allow" })}
          onDeny={() => agent.respond(p.id, { behavior: "deny" })} />
      ))}

      {agent.queued.map((q) => (
        <Queued key={q.turnId} text={q.text} onCancel={() => agent.cancelQueued(q.turnId)} />
      ))}

      <Composer onSend={agent.send} busy={agent.status === "streaming"} />
    </>
  );
}

Hooks

useAgentSession(options) — creates a session on mount, closes it on unmount, and folds the event stream into render-ready state: messages (with nested tools carrying live output), checklist, permissions, usage, limits, filesChanged, diff, queued, status, error. Actions: send, respond, interrupt, cancelQueued, clear. Pass resume to continue a persisted session, enabled: false to defer creation, or onPermissionRequest to decide approvals in code instead of prompting.

useProviders(only?, connector?) — side-effect-free probe of what's installed and logged in; available is the list you'd put in a picker.

Remote sessions — both hooks accept a connector. A KleinClient from @klein-kit/client satisfies SessionConnector as-is, so useAgentSession({ provider: "codex", connector: client }) drives an agent on a remote @klein-kit/server — same hooks, same UI, agent on another machine.

useWorkflow() — from @klein-kit/react/workflow (keeps @klein-kit/orchestrate out of the main entry). Runs a cross-agent workflow and exposes per-step status, provider, streamed output, review verdicts, and the live task document.

Built on useSyncExternalStore, so rapid token deltas don't thrash React.

Full docs: github.com/yvescomputer/klein-kit · MIT © Yves Computer Company