+ {output.query}
+
+ A lightweight chat UI component for LLM-powered applications
+ +{`${action.field} ${action.operator} ${action.value}`}
+ )}
+/>
+```
+
+### RefinementMessage
+
+For iterative structured output with preview.
+
+```tsx
+import { RefinementMessage } from "@llmpane/react";
+
+interface SQLQuery {
+ query: string;
+ tables: string[];
+}
+
+{output.query}}
+/>
+```
+
+## Hooks
+
+### useChat
+
+Core hook for managing chat state and SSE streaming.
+
+```tsx
+import { useChat } from "@llmpane/react";
+
+function MyChat() {
+ const {
+ messages,
+ isLoading,
+ error,
+ sendMessage,
+ stopStream,
+ clearMessages,
+ } = useChat({
+ endpoint: "/api/chat",
+ onComplete: (message) => console.log("Done:", message),
+ });
+
+ return (
+ {`${action.field} ${action.operator} ${action.value}`}
+ * )}
+ * />
+ * ```
+ */
+export function ActionMessage
+ {JSON.stringify(action, null, 2)}
+
+ )}
+ No messages yet. Start a conversation!
+{output.query}
+ Tables: {output.tables.join(", ")}
+ {output.query}
+ * Tables: {output.tables.join(", ")}
+ *
+ {JSON.stringify(output, null, 2)}
+
+ )}
+