React Integration FAQs

Question 1

When should I use this skill?

Accepted Answer

You should use this skill whenever you need to build a custom user interface for a Claude-powered agent. It is specifically designed for developers using React who need to implement features like 'useAgentSession', 'useMessages', or 'AgentServiceProvider' to stream agent responses and manage session lifecycles.

Question 2

What does the React Integration skill do?

Accepted Answer

This skill provides a comprehensive suite of React hooks and context providers via the @hhopkins/agent-runtime-react package. It enables developers to connect frontend applications to agent runtimes, handling complex tasks like WebSocket management, state synchronization, and real-time message streaming.

Question 3

Can I monitor file changes made by the agent?

Accepted Answer

Yes. The skill includes the 'useWorkspaceFiles' hook, which tracks files modified or created by the agent. This allows your React application to display a live file explorer or code viewer that stays in sync with the agent's workspace.

Question 4

What are the core hooks provided by this integration?

Accepted Answer

The primary hooks include 'useAgentSession' for session lifecycle, 'useMessages' for conversation management, 'useSessionList' for navigation, and specialized hooks like 'useSubagents' and 'useWorkspaceFiles' for advanced monitoring.

Question 5

How does this skill handle real-time streaming updates?

Accepted Answer

It manages streaming through the 'useMessages' hook and WebSocket connections. It automatically merges incoming data chunks into structured conversation blocks, allowing your UI to render 'thinking' states, assistant text, and tool results as they happen with optimistic UI updates.

React Integration

React Integration

Características Principales

Casos de Uso

Características Principales

Casos de Uso