Cloudflare Agents

Keep the Agent connection and durable chat lifecycle with Cloudflare’s native hook.

Bind the existing connection

Install agents@0.32.0 and @cloudflare/ai-chat@0.12.2 plus their native peers. Configure a server-side chat Agent with Cloudflare's chat guidance. Ghost reads the client hook; it does not create a Durable Object or websocket transport.

cloudflare-conversation.tsx

1234567891011121314151617181920212223242526272829import { useState } from "react";
import { Button } from "@ghost-ui/core/components/button";
import { useAgent } from "agents/react";
import { useAgentChat } from "@cloudflare/ai-chat/react";
import { createAiSdkAdapter } from "@ghost-ui/core/chat-adapter-ai-sdk";
import { useChatAdapter } from "@ghost-ui/core/chat-runtime-react";
import { Message, MessageBody } from "@ghost-ui/core/components/message";
import { MessageParts } from "@ghost-ui/core/components/message-parts";
const adapter = createAiSdkAdapter();
export function CloudflareConversation({ agentClass, name, revision }: { agentClass: string; name: string; revision: number }) {
  const agent = useAgent({ agent: agentClass, name });
  const chat = useAgentChat({ agent });
  const runtime = useChatAdapter(adapter, {
    ...chat,
    status: chat.isRecovering ? "submitted" : chat.isStreaming ? "streaming" : chat.status,
    error: chat.error ?? chat.connectionError ?? undefined,
  }, { identity: { threadId: name, revision } });
  const [error, setError] = useState<unknown>();
  return <>
    {runtime.messages.map(message => <Message key={message.id} actor={message.actor}><MessageBody>
      <MessageParts parts={message.parts} />
    </MessageBody></Message>)}
    <Button disabled={runtime.capabilities.send.support !== "supported" || !runtime.capabilities.send.available}
      onClick={() => { setError(undefined); void Promise.resolve().then(() => runtime.controller.send({ text: "Review the brief", attachments: [] })).catch(setError); }}>Review brief</Button>
    {runtime.capabilities.stop.support === "supported" && runtime.capabilities.stop.available &&
      <Button onClick={() => { void Promise.resolve().then(() => runtime.controller.stop?.()).catch(setError); }}>Stop</Button>}
    {(error || runtime.controller.error) ? <p role="alert">The request could not complete.</p> : null}
  </>;
}

isStreaming includes server-pushed continuations; isRecovering reports a durable turn being restored. Using only the underlying AI SDK status would miss those states. The native stop implementation also aborts tool continuations; retain it when binding the hook. Compose input/actions with runtime.controller and inspect current capabilities.

Server state and tools

Cloudflare owns websocket connection/recovery, durable turns and native message synchronization. Read application Agent state through the native connection and validate it for your UI. Browser tool callbacks and addToolOutput are application execution paths; do not connect arbitrary tool data to privileged execution. Approval acknowledgement remains distinct from a tool result.

Troubleshooting

A frozen-looking conversation may be recovering rather than streaming. A server continuation can be busy while the client request is idle. Keep the hook's connection error and native lifecycle fields, and replace the owner when changing thread identity. Use Message/Composer docs for appearance rather than adding Cloudflare-specific visual variants.