From 8881a160755254cb5028ea88dae02285de115423 Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Wed, 7 Jan 2026 19:08:44 +0100
Subject: [PATCH 1/5] Preact ui

---
 ai-preact-ui/CHANGELOG.md                     |   1 +
 ai-preact-ui/README.md                        | 307 ++++++++++++++++++
 ai-preact-ui/package.json                     |  57 ++++
 ai-preact-ui/src/chat-input.tsx               | 177 ++++++++++
 ai-preact-ui/src/chat-message.tsx             | 266 +++++++++++++++
 ai-preact-ui/src/chat-messages.tsx            |  83 +++++
 ai-preact-ui/src/chat.tsx                     |  96 ++++++
 ai-preact-ui/src/index.ts                     |  61 ++++
 ai-preact-ui/src/text-part.tsx                |  76 +++++
 ai-preact-ui/src/thinking-part.tsx            |  83 +++++
 ai-preact-ui/src/tool-approval.tsx            | 129 ++++++++
 ai-preact-ui/tsconfig.json                    |  15 +
 ai-preact-ui/vite.config.ts                   |  36 ++
 packages/typescript/ai-preact-ui/CHANGELOG.md |   1 +
 packages/typescript/ai-preact-ui/README.md    | 307 ++++++++++++++++++
 packages/typescript/ai-preact-ui/package.json |  57 ++++
 .../ai-preact-ui/src/chat-input.tsx           | 177 ++++++++++
 .../ai-preact-ui/src/chat-message.tsx         | 266 +++++++++++++++
 .../ai-preact-ui/src/chat-messages.tsx        |  83 +++++
 packages/typescript/ai-preact-ui/src/chat.tsx |  96 ++++++
 packages/typescript/ai-preact-ui/src/index.ts |  61 ++++
 .../typescript/ai-preact-ui/src/text-part.tsx |  76 +++++
 .../ai-preact-ui/src/thinking-part.tsx        |  83 +++++
 .../ai-preact-ui/src/tool-approval.tsx        | 129 ++++++++
 .../typescript/ai-preact-ui/tsconfig.json     |  15 +
 .../typescript/ai-preact-ui/vite.config.ts    |  36 ++
 pnpm-lock.yaml                                |  93 +++++-
 27 files changed, 2859 insertions(+), 8 deletions(-)
 create mode 100644 ai-preact-ui/CHANGELOG.md
 create mode 100644 ai-preact-ui/README.md
 create mode 100644 ai-preact-ui/package.json
 create mode 100644 ai-preact-ui/src/chat-input.tsx
 create mode 100644 ai-preact-ui/src/chat-message.tsx
 create mode 100644 ai-preact-ui/src/chat-messages.tsx
 create mode 100644 ai-preact-ui/src/chat.tsx
 create mode 100644 ai-preact-ui/src/index.ts
 create mode 100644 ai-preact-ui/src/text-part.tsx
 create mode 100644 ai-preact-ui/src/thinking-part.tsx
 create mode 100644 ai-preact-ui/src/tool-approval.tsx
 create mode 100644 ai-preact-ui/tsconfig.json
 create mode 100644 ai-preact-ui/vite.config.ts
 create mode 100644 packages/typescript/ai-preact-ui/CHANGELOG.md
 create mode 100644 packages/typescript/ai-preact-ui/README.md
 create mode 100644 packages/typescript/ai-preact-ui/package.json
 create mode 100644 packages/typescript/ai-preact-ui/src/chat-input.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/chat-message.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/chat-messages.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/chat.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/index.ts
 create mode 100644 packages/typescript/ai-preact-ui/src/text-part.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/thinking-part.tsx
 create mode 100644 packages/typescript/ai-preact-ui/src/tool-approval.tsx
 create mode 100644 packages/typescript/ai-preact-ui/tsconfig.json
 create mode 100644 packages/typescript/ai-preact-ui/vite.config.ts

diff --git a/ai-preact-ui/CHANGELOG.md b/ai-preact-ui/CHANGELOG.md
new file mode 100644
index 00000000..2b402699
--- /dev/null
+++ b/ai-preact-ui/CHANGELOG.md
@@ -0,0 +1 @@
+# @tanstack/ai-preact-ui
diff --git a/ai-preact-ui/README.md b/ai-preact-ui/README.md
new file mode 100644
index 00000000..a9b3ada8
--- /dev/null
+++ b/ai-preact-ui/README.md
@@ -0,0 +1,307 @@
+<div align="center">
+  <img src="./media/header_ai.png" >
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+</a>
+<a href="https://github.com/TanStack/ai" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+	</a>
+<a href="https://twitter.com/tan_stack">
+  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+</a>
+</div>
+
+<div align="center">
+  
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# TanStack AI Preact UI
+
+Headless Preact components for building AI chat interfaces with TanStack AI.
+
+## Features
+
+- 🎨 **Headless components** - Full control over styling and markup
+- 🔄 **Parts-based rendering** - Native support for text, tool calls, thinking, and tool results
+- ⚡ **Streaming support** - Real-time message updates
+- 🔧 **Tool approval workflows** - Built-in support for tool approval UI
+- 📦 **Compound components** - Composable API with `<Chat>`, `<ChatMessages>`, `<ChatInput>`, etc.
+- 🎯 **Type-safe** - Full TypeScript support
+- 🎭 **Render props** - Customize any part of the UI
+- 🪝 **Preact hooks** - Built on `@tanstack/ai-preact`
+
+## Installation
+
+```bash
+npm install @tanstack/ai-preact-ui @tanstack/ai-preact
+# or
+pnpm add @tanstack/ai-preact-ui @tanstack/ai-preact
+# or
+yarn add @tanstack/ai-preact-ui @tanstack/ai-preact
+```
+
+## Quick Start
+
+```tsx
+import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+function App() {
+  return (
+    <Chat connection={fetchServerSentEvents('/api/chat')}>
+      <ChatMessages>
+        {(message) => <ChatMessage message={message} />}
+      </ChatMessages>
+      <ChatInput placeholder="Type your message..." />
+    </Chat>
+  )
+}
+```
+
+## Components
+
+### `<Chat>`
+
+Root component that provides chat context to all child components.
+
+```tsx
+<Chat 
+  connection={fetchServerSentEvents('/api/chat')}
+  initialMessages={[]}
+  onFinish={(message) => console.log('Message complete:', message)}
+>
+  {/* child components */}
+</Chat>
+```
+
+### `<ChatMessages>`
+
+Container for rendering all messages in the conversation.
+
+```tsx
+<ChatMessages
+  autoScroll={true}
+  emptyState={<p>No messages yet. Start a conversation!</p>}
+  loadingState={<p>Loading...</p>}
+>
+  {(message) => <ChatMessage message={message} />}
+</ChatMessages>
+```
+
+### `<ChatMessage>`
+
+Renders a single message with all its parts (text, thinking, tool calls, tool results).
+
+```tsx
+<ChatMessage
+  message={message}
+  className="mb-4"
+  userClassName="text-blue-500"
+  assistantClassName="text-gray-700"
+/>
+```
+
+#### Custom Part Renderers
+
+```tsx
+<ChatMessage
+  message={message}
+  textPartRenderer={({ content }) => (
+    <TextPart 
+      content={content} 
+      className="prose dark:prose-invert"
+    />
+  )}
+  thinkingPartRenderer={({ content, isComplete }) => (
+    <ThinkingPart 
+      content={content} 
+      isComplete={isComplete}
+      className="bg-gray-100 dark:bg-gray-800"
+    />
+  )}
+  toolsRenderer={{
+    weatherLookup: ({ arguments: args, output }) => (
+      <WeatherCard data={JSON.parse(args)} result={output} />
+    ),
+  }}
+/>
+```
+
+### `<ChatInput>`
+
+Input component for sending messages.
+
+```tsx
+<ChatInput 
+  placeholder="Type a message..."
+  submitOnEnter={true}
+/>
+```
+
+#### Custom Input UI
+
+```tsx
+<ChatInput>
+  {({ value, onChange, onSubmit, isLoading }) => (
+    <div className="flex gap-2">
+      <input
+        value={value}
+        onInput={(e) => onChange(e.target.value)}
+        className="flex-1 px-4 py-2 border rounded"
+      />
+      <button 
+        onClick={onSubmit} 
+        disabled={isLoading}
+        className="px-6 py-2 bg-blue-500 text-white rounded"
+      >
+        {isLoading ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )}
+</ChatInput>
+```
+
+### `<TextPart>`
+
+Renders text content with markdown support and syntax highlighting.
+
+```tsx
+<TextPart
+  content="Hello **world**! Here's some code:\n```js\nconsole.log('hi')\n```"
+  role="assistant"
+  className="prose dark:prose-invert"
+/>
+```
+
+### `<ThinkingPart>`
+
+Renders model thinking/reasoning content with collapsible UI.
+
+```tsx
+<ThinkingPart
+  content="Let me think about this step by step..."
+  isComplete={false}
+  className="bg-gray-100 p-4 rounded"
+/>
+```
+
+### `<ToolApproval>`
+
+Renders approve/deny buttons for tools that require approval.
+
+```tsx
+<ToolApproval
+  toolCallId={part.id}
+  toolName={part.name}
+  input={JSON.parse(part.arguments)}
+  approval={part.approval}
+/>
+```
+
+## Hooks
+
+### `useChatContext()`
+
+Access the chat context from any child component.
+
+```tsx
+import { useChatContext } from '@tanstack/ai-preact-ui'
+
+function CustomComponent() {
+  const { messages, isLoading, sendMessage } = useChatContext()
+  
+  return (
+    <div>
+      <p>Messages: {messages.length}</p>
+      <p>Loading: {isLoading ? 'Yes' : 'No'}</p>
+    </div>
+  )
+}
+```
+
+## Styling
+
+All components are headless and use data attributes for styling:
+
+```css
+/* Message styling */
+[data-message-role="user"] {
+  background: #e3f2fd;
+  text-align: right;
+}
+
+[data-message-role="assistant"] {
+  background: #f5f5f5;
+}
+
+/* Part type styling */
+[data-part-type="text"] {
+  padding: 1rem;
+}
+
+[data-part-type="thinking"] {
+  opacity: 0.8;
+  font-style: italic;
+}
+
+[data-part-type="tool-call"] {
+  border-left: 3px solid #2196f3;
+  padding-left: 1rem;
+}
+```
+
+## Advanced Usage
+
+### Custom Tool Renderers
+
+```tsx
+const toolRenderers = {
+  searchWeb: ({ arguments: args, output }) => (
+    <SearchResults query={JSON.parse(args).query} results={output} />
+  ),
+  generateImage: ({ arguments: args, output }) => (
+    <ImagePreview prompt={JSON.parse(args).prompt} url={output?.url} />
+  ),
+}
+
+<ChatMessage message={message} toolsRenderer={toolRenderers} />
+```
+
+### Error Handling
+
+```tsx
+<ChatMessages
+  errorState={({ error, reload }) => (
+    <div className="error">
+      <p>Error: {error.message}</p>
+      <button onClick={reload}>Retry</button>
+    </div>
+  )}
+/>
+```
+
+## Documentation
+
+For full documentation, visit [https://tanstack.com/ai](https://tanstack.com/ai)
+
+## License
+
+MIT
diff --git a/ai-preact-ui/package.json b/ai-preact-ui/package.json
new file mode 100644
index 00000000..d597fb03
--- /dev/null
+++ b/ai-preact-ui/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/ai-preact-ui",
+  "version": "0.0.0",
+  "description": "Headless Preact components for building AI chat interfaces",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/ai.git",
+    "directory": "packages/typescript/ai-preact-ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "premove ./build ./dist",
+    "test:build": "publint --strict",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc"
+  },
+  "keywords": [
+    "tanstack",
+    "ai",
+    "preact",
+    "chat",
+    "ui",
+    "headless",
+    "components"
+  ],
+  "dependencies": {
+    "@tanstack/ai-preact": "workspace:*",
+    "preact-markdown": "^2.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "@tanstack/ai-preact": "workspace:*",
+    "preact": ">=10.11.0"
+  },
+  "devDependencies": {
+    "@tanstack/ai-client": "workspace:*",
+    "@vitest/coverage-v8": "4.0.14",
+    "vite": "^7.2.7"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/ai-preact-ui/src/chat-input.tsx b/ai-preact-ui/src/chat-input.tsx
new file mode 100644
index 00000000..4121ea28
--- /dev/null
+++ b/ai-preact-ui/src/chat-input.tsx
@@ -0,0 +1,177 @@
+import { useRef, useState } from 'preact/hooks'
+import { useChatContext } from './chat'
+import type { ComponentChildren, RefObject } from 'preact'
+
+export interface ChatInputRenderProps {
+  /** Current input value */
+  value: string
+  /** Set input value */
+  onChange: (value: string) => void
+  /** Submit the message */
+  onSubmit: () => void
+  /** Is the chat currently loading */
+  isLoading: boolean
+  /** Is input disabled */
+  disabled: boolean
+  /** Ref to the input element */
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+}
+
+export interface ChatInputProps {
+  /** Render prop for full control */
+  children?: (props: ChatInputRenderProps) => ComponentChildren
+  /** CSS class name */
+  className?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Disable input */
+  disabled?: boolean
+  /** Submit on Enter (Shift+Enter for new line) */
+  submitOnEnter?: boolean
+}
+
+/**
+ * Chat input component - handles message input and submission
+ *
+ * Features:
+ * - Auto-growing textarea
+ * - Submit on Enter (Shift+Enter for new line)
+ * - Loading state management
+ * - Full render prop support for custom UIs
+ *
+ * @example
+ * ```tsx
+ * <Chat.Input placeholder="Type your message..." />
+ * ```
+ *
+ * @example Custom UI with render prop
+ * ```tsx
+ * <Chat.Input>
+ *   {({ value, onChange, onSubmit, isLoading }) => (
+ *     <div>
+ *       <textarea value={value} onChange={(e) => onChange(e.currentTarget.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export function ChatInput({
+  children,
+  className,
+  placeholder = 'Type a message...',
+  disabled: disabledProp,
+  submitOnEnter = true,
+}: ChatInputProps) {
+  const { sendMessage, isLoading } = useChatContext()
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+
+  const disabled = disabledProp || isLoading
+
+  const handleSubmit = () => {
+    if (!value.trim() || disabled) return
+    sendMessage(value)
+    setValue('')
+  }
+
+  const renderProps: ChatInputRenderProps = {
+    value,
+    onChange: setValue,
+    onSubmit: handleSubmit,
+    isLoading,
+    disabled,
+    inputRef,
+  }
+
+  // Render prop pattern
+  if (children) {
+    return <>{children(renderProps)}</>
+  }
+
+  // Default implementation
+  return (
+    <div
+      className={className}
+      data-chat-input
+      style={{
+        display: 'flex',
+        gap: '0.75rem',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <input
+        ref={inputRef as RefObject<HTMLInputElement>}
+        type="text"
+        value={value}
+        onInput={(e) => setValue((e.currentTarget as HTMLInputElement).value)}
+        onKeyDown={(e) => {
+          if (submitOnEnter && e.key === 'Enter') {
+            e.preventDefault()
+            handleSubmit()
+          }
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        data-chat-textarea
+        style={{
+          flex: 1,
+          padding: '0.75rem 1rem',
+          fontSize: '0.875rem',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          borderRadius: '0.75rem',
+          backgroundColor: 'rgba(31, 41, 55, 0.5)',
+          color: 'white',
+          outline: 'none',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+            'rgba(249, 115, 22, 0.4)'
+          ;(e.currentTarget as HTMLInputElement).style.boxShadow =
+            '0 0 0 2px rgba(249, 115, 22, 0.2)'
+        }}
+        onBlur={(e) => {
+          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+            'rgba(255, 255, 255, 0.1)'
+          ;(e.currentTarget as HTMLInputElement).style.boxShadow = 'none'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={disabled || !value.trim()}
+        data-chat-submit
+        style={{
+          padding: '0.75rem 1.5rem',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          color: 'white',
+          backgroundColor:
+            disabled || !value.trim()
+              ? 'rgba(107, 114, 128, 0.5)'
+              : 'rgb(249, 115, 22)',
+          border: 'none',
+          borderRadius: '0.75rem',
+          cursor: disabled || !value.trim() ? 'not-allowed' : 'pointer',
+          transition: 'all 0.2s',
+          whiteSpace: 'nowrap',
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+              'rgb(234, 88, 12)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+              'rgb(249, 115, 22)'
+          }
+        }}
+      >
+        {isLoading ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )
+}
diff --git a/ai-preact-ui/src/chat-message.tsx b/ai-preact-ui/src/chat-message.tsx
new file mode 100644
index 00000000..62543ab9
--- /dev/null
+++ b/ai-preact-ui/src/chat-message.tsx
@@ -0,0 +1,266 @@
+import { ThinkingPart } from './thinking-part'
+import type { ComponentChildren } from 'preact'
+import type { UIMessage } from '@tanstack/ai-preact'
+
+export interface ToolCallRenderProps {
+  id: string
+  name: string
+  arguments: string
+  state: string
+  approval?: any
+  output?: any
+}
+
+export interface ChatMessageProps {
+  /** The message to render */
+  message: UIMessage
+  /** Base CSS class name */
+  className?: string
+  /** Additional className for user messages */
+  userClassName?: string
+  /** Additional className for assistant messages */
+  assistantClassName?: string
+  /** Custom renderer for text parts */
+  textPartRenderer?: (props: { content: string }) => ComponentChildren
+  /** Custom renderer for thinking parts */
+  thinkingPartRenderer?: (props: {
+    content: string
+    isComplete?: boolean
+  }) => ComponentChildren
+  /** Named tool renderers - use the tool name as the key */
+  toolsRenderer?: Record<string, (props: ToolCallRenderProps) => ComponentChildren>
+  /** Default tool renderer when tool name not found in toolsRenderer */
+  defaultToolRenderer?: (props: ToolCallRenderProps) => ComponentChildren
+  /** Custom renderer for tool result parts */
+  toolResultRenderer?: (props: {
+    toolCallId: string
+    content: string
+    state: string
+  }) => ComponentChildren
+}
+
+/**
+ * Message component - renders a single message with all its parts
+ *
+ * This component natively understands TanStack AI's parts-based message format:
+ * - thinking parts: rendered as collapsible thinking/reasoning sections (auto-collapses when complete)
+ * - text parts: rendered as content
+ * - tool-call parts: rendered with state, approvals, etc.
+ * - tool-result parts: rendered with results
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Chat.Message message={message} />
+ * ```
+ *
+ * @example With role-based styling
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   className="flex"
+ *   userClassName="justify-end"
+ *   assistantClassName="justify-start"
+ * />
+ * ```
+ *
+ * @example With custom thinking renderer
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   thinkingPartRenderer={({ content, isComplete }) => (
+ *     <details open={!isComplete}>
+ *       <summary>💭 Thinking...</summary>
+ *       <pre>{content}</pre>
+ *     </details>
+ *   )}
+ * />
+ * ```
+ *
+ * @example With named tool renderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   toolsRenderer={{
+ *     recommendGuitar: ({ id, arguments: args }) => <GuitarCard {...JSON.parse(args)} />,
+ *     weatherLookup: ({ id, arguments: args }) => <WeatherWidget {...JSON.parse(args)} />,
+ *   }}
+ *   defaultToolRenderer={() => null}
+ * />
+ * ```
+ */
+export function ChatMessage({
+  message,
+  className = '',
+  userClassName = '',
+  assistantClassName = '',
+  textPartRenderer,
+  thinkingPartRenderer,
+  toolsRenderer,
+  defaultToolRenderer,
+  toolResultRenderer,
+}: ChatMessageProps) {
+  // Combine classes based on role
+  const roleClassName =
+    message.role === 'user' ? userClassName : assistantClassName
+
+  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
+
+  return (
+    <div
+      className={combinedClassName || undefined}
+      data-message-id={message.id}
+      data-message-role={message.role}
+      data-message-created={message.createdAt?.toISOString()}
+    >
+      {message.parts.map((part, index) => {
+        // Check if thinking is complete (if there's a text part after this thinking part)
+        const isThinkingComplete =
+          part.type === 'thinking' &&
+          message.parts.slice(index + 1).some((p) => p.type === 'text')
+
+        return (
+          <MessagePart
+            key={`${message.id}-part-${index}`}
+            part={part}
+            isThinkingComplete={isThinkingComplete}
+            textPartRenderer={textPartRenderer}
+            thinkingPartRenderer={thinkingPartRenderer}
+            toolsRenderer={toolsRenderer}
+            defaultToolRenderer={defaultToolRenderer}
+            toolResultRenderer={toolResultRenderer}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+function MessagePart({
+  part,
+  isThinkingComplete,
+  textPartRenderer,
+  thinkingPartRenderer,
+  toolsRenderer,
+  defaultToolRenderer,
+  toolResultRenderer,
+}: {
+  part: any
+  isThinkingComplete?: boolean
+  textPartRenderer?: ChatMessageProps['textPartRenderer']
+  thinkingPartRenderer?: ChatMessageProps['thinkingPartRenderer']
+  toolsRenderer?: ChatMessageProps['toolsRenderer']
+  defaultToolRenderer?: ChatMessageProps['defaultToolRenderer']
+  toolResultRenderer?: ChatMessageProps['toolResultRenderer']
+}) {
+  // Text part
+  if (part.type === 'text') {
+    if (textPartRenderer) {
+      return <>{textPartRenderer({ content: part.content })}</>
+    }
+    return (
+      <div data-part-type="text" data-part-content>
+        {part.content}
+      </div>
+    )
+  }
+
+  // Thinking part
+  if (part.type === 'thinking') {
+    if (thinkingPartRenderer) {
+      return (
+        <>
+          {thinkingPartRenderer({
+            content: part.content,
+            isComplete: isThinkingComplete,
+          })}
+        </>
+      )
+    }
+    return (
+      <ThinkingPart content={part.content} isComplete={isThinkingComplete} />
+    )
+  }
+
+  // Tool call part
+  if (part.type === 'tool-call') {
+    const toolProps: ToolCallRenderProps = {
+      id: part.id,
+      name: part.name,
+      arguments: part.arguments,
+      state: part.state,
+      approval: part.approval,
+      output: part.output,
+    }
+
+    // Check if there's a specific renderer for this tool
+    if (toolsRenderer?.[part.name]) {
+      return <>{toolsRenderer[part.name]?.(toolProps)}</>
+    }
+
+    // Use default tool renderer if provided
+    if (defaultToolRenderer) {
+      return <>{defaultToolRenderer(toolProps)}</>
+    }
+
+    // Fallback to built-in default renderer
+    return (
+      <div
+        data-part-type="tool-call"
+        data-tool-name={part.name}
+        data-tool-state={part.state}
+        data-tool-id={part.id}
+      >
+        <div data-tool-header>
+          <strong>{part.name}</strong>
+          <span data-tool-state-badge>{part.state}</span>
+        </div>
+        {part.arguments && (
+          <div data-tool-arguments>
+            <pre>{part.arguments}</pre>
+          </div>
+        )}
+        {part.approval && (
+          <div data-tool-approval>
+            {part.approval.approved !== undefined
+              ? part.approval.approved
+                ? '✓ Approved'
+                : '✗ Denied'
+              : '⏳ Awaiting approval...'}
+          </div>
+        )}
+        {part.output && (
+          <div data-tool-output>
+            <pre>{JSON.stringify(part.output, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Tool result part
+  if (part.type === 'tool-result') {
+    if (toolResultRenderer) {
+      return (
+        <>
+          {toolResultRenderer({
+            toolCallId: part.toolCallId,
+            content: part.content,
+            state: part.state,
+          })}
+        </>
+      )
+    }
+
+    return (
+      <div
+        data-part-type="tool-result"
+        data-tool-call-id={part.toolCallId}
+        data-tool-result-state={part.state}
+      >
+        <div data-tool-result-content>{part.content}</div>
+      </div>
+    )
+  }
+
+  return null
+}
diff --git a/ai-preact-ui/src/chat-messages.tsx b/ai-preact-ui/src/chat-messages.tsx
new file mode 100644
index 00000000..3f1dd84a
--- /dev/null
+++ b/ai-preact-ui/src/chat-messages.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { useChatContext } from './chat'
+import { ChatMessage } from './chat-message'
+import type { ComponentChildren } from 'preact'
+import type { UIMessage } from '@tanstack/ai-preact'
+
+export interface ChatMessagesProps {
+  /** Custom render function for each message */
+  children?: (message: UIMessage, index: number) => ComponentChildren
+  /** CSS class name */
+  className?: string
+  /** Element to show when there are no messages */
+  emptyState?: ComponentChildren
+  /** Element to show while loading the first message */
+  loadingState?: ComponentChildren
+  /** Custom error renderer */
+  errorState?: (props: { error: Error; reload: () => void }) => ComponentChildren
+  /** Auto-scroll to bottom on new messages */
+  autoScroll?: boolean
+}
+
+/**
+ * Messages container - renders all messages in the conversation
+ *
+ * @example
+ * ```tsx
+ * <Chat.Messages>
+ *   {(message) => <Chat.Message message={message} />}
+ * </Chat.Messages>
+ * ```
+ */
+export function ChatMessages({
+  children,
+  className,
+  emptyState,
+  loadingState,
+  errorState,
+  autoScroll = true,
+}: ChatMessagesProps) {
+  const { messages, isLoading, error, reload } = useChatContext()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [messages, autoScroll])
+
+  // Error state
+  if (error && errorState) {
+    return <>{errorState({ error, reload })}</>
+  }
+
+  // Loading state (only show if no messages yet)
+  if (isLoading && messages.length === 0 && loadingState) {
+    return <>{loadingState}</>
+  }
+
+  // Empty state
+  if (messages.length === 0 && emptyState) {
+    return <>{emptyState}</>
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      data-chat-messages
+      data-message-count={messages.length}
+    >
+      {messages.map((message, index) =>
+        children ? (
+          <div key={message.id} data-message-id={message.id}>
+            {children(message, index)}
+          </div>
+        ) : (
+          <ChatMessage key={message.id} message={message} />
+        ),
+      )}
+    </div>
+  )
+}
diff --git a/ai-preact-ui/src/chat.tsx b/ai-preact-ui/src/chat.tsx
new file mode 100644
index 00000000..2b76ff1c
--- /dev/null
+++ b/ai-preact-ui/src/chat.tsx
@@ -0,0 +1,96 @@
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+import { useChat } from '@tanstack/ai-preact'
+import type { ComponentChildren } from 'preact'
+import type {
+  ConnectionAdapter,
+  UIMessage,
+  UseChatReturn,
+} from '@tanstack/ai-preact'
+
+/**
+ * Chat context - provides chat state to all child components
+ */
+const ChatContext = createContext<UseChatReturn | null>(null)
+
+/**
+ * Hook to access chat context
+ * @throws Error if used outside of Chat component
+ */
+export function useChatContext() {
+  const context = useContext(ChatContext)
+  if (!context) {
+    throw new Error(
+      "Chat components must be wrapped in <Chat>. Make sure you're using Chat.Messages, Chat.Input, etc. inside a <Chat> component.",
+    )
+  }
+  return context
+}
+
+export interface ChatProps {
+  /** Child components (Chat.Messages, Chat.Input, etc.) */
+  children: ComponentChildren
+  /** CSS class name for the root element */
+  className?: string
+  /** Connection adapter for communicating with your API */
+  connection: ConnectionAdapter
+  /** Initial messages to display */
+  initialMessages?: Array<UIMessage>
+  /** Custom message ID generator */
+  id?: string
+  /** Additional body data to send with requests */
+  body?: any
+  /** Callback when a response is received */
+  onResponse?: (response?: Response) => void | Promise<void>
+  /** Callback when each chunk arrives */
+  onChunk?: (chunk: any) => void
+  /** Callback when a message is complete */
+  onFinish?: (message: UIMessage) => void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Custom tool components registry */
+  tools?: Record<string, any>
+}
+
+/**
+ * Root Chat component - provides context for all chat subcomponents
+ *
+ * @example
+ * ```tsx
+ * <Chat connection={fetchServerSentEvents("/api/chat")}>
+ *   <Chat.Messages />
+ *   <Chat.Input />
+ * </Chat>
+ * ```
+ */
+export function Chat({
+  children,
+  className,
+  connection,
+  initialMessages,
+  id,
+  body,
+  onResponse,
+  onChunk,
+  onFinish,
+  onError,
+}: ChatProps) {
+  const chat = useChat({
+    connection,
+    initialMessages,
+    id,
+    body,
+    onResponse,
+    onChunk,
+    onFinish,
+    onError,
+  })
+
+  return (
+    <ChatContext.Provider value={chat}>
+      <div className={className} data-chat-root>
+        {children}
+      </div>
+    </ChatContext.Provider>
+  )
+}
diff --git a/ai-preact-ui/src/index.ts b/ai-preact-ui/src/index.ts
new file mode 100644
index 00000000..c54f175e
--- /dev/null
+++ b/ai-preact-ui/src/index.ts
@@ -0,0 +1,61 @@
+/**
+ * @tanstack/ai-preact-ui
+ *
+ * Headless Preact components for building AI chat interfaces.
+ *
+ * Features:
+ * - Parts-based message rendering (text, tool calls, tool results)
+ * - Native tool approval workflows
+ * - Client-side tool execution support
+ * - Streaming support
+ * - Fully customizable with render props
+ * - Compound component pattern
+ *
+ * @example
+ * ```tsx
+ * import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
+ *
+ * <Chat connection={fetchServerSentEvents('/api/chat')}>
+ *   <ChatMessages>
+ *     {(message) => <ChatMessage message={message} />}
+ *   </ChatMessages>
+ *   <ChatInput />
+ * </Chat>
+ * ```
+ */
+
+// Main components
+export { Chat, useChatContext, type ChatProps } from './chat'
+export { ChatMessages, type ChatMessagesProps } from './chat-messages'
+export {
+  ChatMessage,
+  type ChatMessageProps,
+  type ToolCallRenderProps,
+} from './chat-message'
+export {
+  ChatInput,
+  type ChatInputProps,
+  type ChatInputRenderProps,
+} from './chat-input'
+export {
+  ToolApproval,
+  type ToolApprovalProps,
+  type ToolApprovalRenderProps,
+} from './tool-approval'
+export { TextPart, type TextPartProps } from './text-part'
+export { ThinkingPart, type ThinkingPartProps } from './thinking-part'
+
+// Re-export hooks from @tanstack/ai-preact for convenience
+export { useChat } from '@tanstack/ai-preact'
+
+// Re-export types from @tanstack/ai-preact
+export type {
+  UIMessage,
+  MessagePart,
+  ToolCallPart,
+  ToolResultPart,
+  TextPart as TextPartType,
+  ConnectionAdapter,
+} from '@tanstack/ai-client'
+
+export type { UseChatOptions, UseChatReturn } from '@tanstack/ai-preact'
diff --git a/ai-preact-ui/src/text-part.tsx b/ai-preact-ui/src/text-part.tsx
new file mode 100644
index 00000000..1d11e151
--- /dev/null
+++ b/ai-preact-ui/src/text-part.tsx
@@ -0,0 +1,76 @@
+import { h } from 'preact'
+import Markdown from 'preact-markdown'
+
+export interface TextPartProps {
+  /** The text content to render */
+  content: string
+  /** The role of the message (user, assistant, or system) - optional for standalone use */
+  role?: 'user' | 'assistant' | 'system'
+  /** Base className applied to all text parts */
+  className?: string
+  /** Additional className for user messages */
+  userClassName?: string
+  /** Additional className for assistant messages (also used for system messages) */
+  assistantClassName?: string
+}
+
+/**
+ * TextPart component - renders markdown text with syntax highlighting
+ *
+ * Features:
+ * - Full markdown support with GFM (tables, strikethrough, etc.)
+ * - Syntax highlighting for code blocks
+ * - Sanitized HTML rendering
+ * - Role-based styling (user vs assistant)
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <TextPart
+ *   content="Hello **world**!"
+ *   role="user"
+ *   className="p-4 rounded"
+ *   userClassName="bg-blue-500"
+ *   assistantClassName="bg-gray-500"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     text: ({ content }) => (
+ *       <TextPart
+ *         content={content}
+ *         role={message.role}
+ *         className="px-5 py-3 rounded-2xl"
+ *         userClassName="bg-orange-500 text-white"
+ *         assistantClassName="bg-gray-800 text-white"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export function TextPart({
+  content,
+  role,
+  className = '',
+  userClassName = '',
+  assistantClassName = '',
+}: TextPartProps) {
+  // Combine classes based on role
+  const roleClassName =
+    role === 'user'
+      ? userClassName
+      : role === 'assistant'
+        ? assistantClassName
+        : ''
+  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
+
+  return (
+    <div className={combinedClassName || undefined}>
+      {h(Markdown, { markdown: content })}
+    </div>
+  )
+}
diff --git a/ai-preact-ui/src/thinking-part.tsx b/ai-preact-ui/src/thinking-part.tsx
new file mode 100644
index 00000000..9e841bb6
--- /dev/null
+++ b/ai-preact-ui/src/thinking-part.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export interface ThinkingPartProps {
+  /** The thinking content to render */
+  content: string
+  /** Base className applied to thinking parts */
+  className?: string
+  /** Whether thinking is complete (has text content after) */
+  isComplete?: boolean
+}
+
+/**
+ * ThinkingPart component - renders thinking/reasoning content
+ *
+ * This component displays the model's internal reasoning process,
+ * typically shown in a collapsed or expandable format to distinguish
+ * it from the final response. It automatically collapses when thinking
+ * is complete.
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <ThinkingPart
+ *   content="Let me think about this step by step..."
+ *   className="p-4 rounded bg-gray-100"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     thinking: ({ content, isComplete }) => (
+ *       <ThinkingPart
+ *         content={content}
+ *         isComplete={isComplete}
+ *         className="px-5 py-3 rounded-2xl bg-gray-800/50"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export function ThinkingPart({
+  content,
+  className = '',
+  isComplete = false,
+}: ThinkingPartProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  // Auto-collapse when thinking completes
+  useEffect(() => {
+    if (isComplete) {
+      setIsCollapsed(true)
+    }
+  }, [isComplete])
+
+  return (
+    <div
+      className={className || undefined}
+      data-part-type="thinking"
+      data-part-content
+    >
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300 transition-colors mb-2"
+        aria-expanded={!isCollapsed}
+        aria-label={isCollapsed ? 'Expand thinking' : 'Collapse thinking'}
+      >
+        <span className="text-xs">{isCollapsed ? '▶' : '▼'}</span>
+        <span className="italic">💭 Thinking...</span>
+        {isComplete && (
+          <span className="text-xs text-gray-500">(complete)</span>
+        )}
+      </button>
+      {!isCollapsed && (
+        <div className="text-gray-300 whitespace-pre-wrap font-mono text-sm">
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/ai-preact-ui/src/tool-approval.tsx b/ai-preact-ui/src/tool-approval.tsx
new file mode 100644
index 00000000..2f5073c1
--- /dev/null
+++ b/ai-preact-ui/src/tool-approval.tsx
@@ -0,0 +1,129 @@
+import { useChatContext } from './chat'
+import type { ComponentChildren } from 'preact'
+
+export interface ToolApprovalProps {
+  /** Tool call ID */
+  toolCallId: string
+  /** Tool name */
+  toolName: string
+  /** Parsed tool arguments/input */
+  input: any
+  /** Approval metadata */
+  approval: {
+    id: string
+    needsApproval: boolean
+    approved?: boolean
+  }
+  /** CSS class name */
+  className?: string
+  /** Custom render prop */
+  children?: (props: ToolApprovalRenderProps) => ComponentChildren
+}
+
+export interface ToolApprovalRenderProps {
+  /** Tool name */
+  toolName: string
+  /** Parsed input */
+  input: any
+  /** Approve the tool call */
+  onApprove: () => void
+  /** Deny the tool call */
+  onDeny: () => void
+  /** Whether user has responded */
+  hasResponded: boolean
+  /** User's decision (if responded) */
+  approved?: boolean
+}
+
+/**
+ * Tool approval component - renders approve/deny buttons for tools that need approval
+ *
+ * @example
+ * ```tsx
+ * {part.approval && (
+ *   <ToolApproval
+ *     toolCallId={part.id}
+ *     toolName={part.name}
+ *     input={JSON.parse(part.arguments)}
+ *     approval={part.approval}
+ *   />
+ * )}
+ * ```
+ */
+export function ToolApproval({
+  toolCallId: _,
+  toolName,
+  input,
+  approval,
+  className,
+  children,
+}: ToolApprovalProps) {
+  const { addToolApprovalResponse } = useChatContext()
+
+  const handleApprove = () => {
+    addToolApprovalResponse({
+      id: approval.id,
+      approved: true,
+    })
+  }
+
+  const handleDeny = () => {
+    addToolApprovalResponse({
+      id: approval.id,
+      approved: false,
+    })
+  }
+
+  const hasResponded = approval.approved !== undefined
+
+  const renderProps: ToolApprovalRenderProps = {
+    toolName,
+    input,
+    onApprove: handleApprove,
+    onDeny: handleDeny,
+    hasResponded,
+    approved: approval.approved,
+  }
+
+  // Render prop pattern
+  if (children) {
+    return <>{children(renderProps)}</>
+  }
+
+  // Already responded - show decision
+  if (hasResponded) {
+    return (
+      <div
+        className={className}
+        data-tool-approval
+        data-approval-status={approval.approved ? 'approved' : 'denied'}
+      >
+        {approval.approved ? '✓ Approved' : '✗ Denied'}
+      </div>
+    )
+  }
+
+  // Default approval UI
+  return (
+    <div
+      className={className}
+      data-tool-approval
+      data-approval-status="pending"
+    >
+      <div data-approval-header>
+        <strong>{toolName}</strong> requires approval
+      </div>
+      <div data-approval-input>
+        <pre>{JSON.stringify(input, null, 2)}</pre>
+      </div>
+      <div data-approval-actions>
+        <button onClick={handleApprove} data-approval-approve>
+          Approve
+        </button>
+        <button onClick={handleDeny} data-approval-deny>
+          Deny
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/ai-preact-ui/tsconfig.json b/ai-preact-ui/tsconfig.json
new file mode 100644
index 00000000..2ce68976
--- /dev/null
+++ b/ai-preact-ui/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "declaration": true,
+    "declarationMap": true,
+    "composite": true,
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/ai-preact-ui/vite.config.ts b/ai-preact-ui/vite.config.ts
new file mode 100644
index 00000000..77bcc2e6
--- /dev/null
+++ b/ai-preact-ui/vite.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/vite-config'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        'tests/',
+        '**/*.test.ts',
+        '**/*.config.ts',
+        '**/types.ts',
+      ],
+      include: ['src/**/*.ts'],
+    },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)
diff --git a/packages/typescript/ai-preact-ui/CHANGELOG.md b/packages/typescript/ai-preact-ui/CHANGELOG.md
new file mode 100644
index 00000000..2b402699
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/CHANGELOG.md
@@ -0,0 +1 @@
+# @tanstack/ai-preact-ui
diff --git a/packages/typescript/ai-preact-ui/README.md b/packages/typescript/ai-preact-ui/README.md
new file mode 100644
index 00000000..a9b3ada8
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/README.md
@@ -0,0 +1,307 @@
+<div align="center">
+  <img src="./media/header_ai.png" >
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
+</a>
+<a href="https://github.com/TanStack/ai" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
+	</a>
+<a href="https://twitter.com/tan_stack">
+  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+</a>
+</div>
+
+<div align="center">
+  
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# TanStack AI Preact UI
+
+Headless Preact components for building AI chat interfaces with TanStack AI.
+
+## Features
+
+- 🎨 **Headless components** - Full control over styling and markup
+- 🔄 **Parts-based rendering** - Native support for text, tool calls, thinking, and tool results
+- ⚡ **Streaming support** - Real-time message updates
+- 🔧 **Tool approval workflows** - Built-in support for tool approval UI
+- 📦 **Compound components** - Composable API with `<Chat>`, `<ChatMessages>`, `<ChatInput>`, etc.
+- 🎯 **Type-safe** - Full TypeScript support
+- 🎭 **Render props** - Customize any part of the UI
+- 🪝 **Preact hooks** - Built on `@tanstack/ai-preact`
+
+## Installation
+
+```bash
+npm install @tanstack/ai-preact-ui @tanstack/ai-preact
+# or
+pnpm add @tanstack/ai-preact-ui @tanstack/ai-preact
+# or
+yarn add @tanstack/ai-preact-ui @tanstack/ai-preact
+```
+
+## Quick Start
+
+```tsx
+import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
+import { fetchServerSentEvents } from '@tanstack/ai-client'
+
+function App() {
+  return (
+    <Chat connection={fetchServerSentEvents('/api/chat')}>
+      <ChatMessages>
+        {(message) => <ChatMessage message={message} />}
+      </ChatMessages>
+      <ChatInput placeholder="Type your message..." />
+    </Chat>
+  )
+}
+```
+
+## Components
+
+### `<Chat>`
+
+Root component that provides chat context to all child components.
+
+```tsx
+<Chat 
+  connection={fetchServerSentEvents('/api/chat')}
+  initialMessages={[]}
+  onFinish={(message) => console.log('Message complete:', message)}
+>
+  {/* child components */}
+</Chat>
+```
+
+### `<ChatMessages>`
+
+Container for rendering all messages in the conversation.
+
+```tsx
+<ChatMessages
+  autoScroll={true}
+  emptyState={<p>No messages yet. Start a conversation!</p>}
+  loadingState={<p>Loading...</p>}
+>
+  {(message) => <ChatMessage message={message} />}
+</ChatMessages>
+```
+
+### `<ChatMessage>`
+
+Renders a single message with all its parts (text, thinking, tool calls, tool results).
+
+```tsx
+<ChatMessage
+  message={message}
+  className="mb-4"
+  userClassName="text-blue-500"
+  assistantClassName="text-gray-700"
+/>
+```
+
+#### Custom Part Renderers
+
+```tsx
+<ChatMessage
+  message={message}
+  textPartRenderer={({ content }) => (
+    <TextPart 
+      content={content} 
+      className="prose dark:prose-invert"
+    />
+  )}
+  thinkingPartRenderer={({ content, isComplete }) => (
+    <ThinkingPart 
+      content={content} 
+      isComplete={isComplete}
+      className="bg-gray-100 dark:bg-gray-800"
+    />
+  )}
+  toolsRenderer={{
+    weatherLookup: ({ arguments: args, output }) => (
+      <WeatherCard data={JSON.parse(args)} result={output} />
+    ),
+  }}
+/>
+```
+
+### `<ChatInput>`
+
+Input component for sending messages.
+
+```tsx
+<ChatInput 
+  placeholder="Type a message..."
+  submitOnEnter={true}
+/>
+```
+
+#### Custom Input UI
+
+```tsx
+<ChatInput>
+  {({ value, onChange, onSubmit, isLoading }) => (
+    <div className="flex gap-2">
+      <input
+        value={value}
+        onInput={(e) => onChange(e.target.value)}
+        className="flex-1 px-4 py-2 border rounded"
+      />
+      <button 
+        onClick={onSubmit} 
+        disabled={isLoading}
+        className="px-6 py-2 bg-blue-500 text-white rounded"
+      >
+        {isLoading ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )}
+</ChatInput>
+```
+
+### `<TextPart>`
+
+Renders text content with markdown support and syntax highlighting.
+
+```tsx
+<TextPart
+  content="Hello **world**! Here's some code:\n```js\nconsole.log('hi')\n```"
+  role="assistant"
+  className="prose dark:prose-invert"
+/>
+```
+
+### `<ThinkingPart>`
+
+Renders model thinking/reasoning content with collapsible UI.
+
+```tsx
+<ThinkingPart
+  content="Let me think about this step by step..."
+  isComplete={false}
+  className="bg-gray-100 p-4 rounded"
+/>
+```
+
+### `<ToolApproval>`
+
+Renders approve/deny buttons for tools that require approval.
+
+```tsx
+<ToolApproval
+  toolCallId={part.id}
+  toolName={part.name}
+  input={JSON.parse(part.arguments)}
+  approval={part.approval}
+/>
+```
+
+## Hooks
+
+### `useChatContext()`
+
+Access the chat context from any child component.
+
+```tsx
+import { useChatContext } from '@tanstack/ai-preact-ui'
+
+function CustomComponent() {
+  const { messages, isLoading, sendMessage } = useChatContext()
+  
+  return (
+    <div>
+      <p>Messages: {messages.length}</p>
+      <p>Loading: {isLoading ? 'Yes' : 'No'}</p>
+    </div>
+  )
+}
+```
+
+## Styling
+
+All components are headless and use data attributes for styling:
+
+```css
+/* Message styling */
+[data-message-role="user"] {
+  background: #e3f2fd;
+  text-align: right;
+}
+
+[data-message-role="assistant"] {
+  background: #f5f5f5;
+}
+
+/* Part type styling */
+[data-part-type="text"] {
+  padding: 1rem;
+}
+
+[data-part-type="thinking"] {
+  opacity: 0.8;
+  font-style: italic;
+}
+
+[data-part-type="tool-call"] {
+  border-left: 3px solid #2196f3;
+  padding-left: 1rem;
+}
+```
+
+## Advanced Usage
+
+### Custom Tool Renderers
+
+```tsx
+const toolRenderers = {
+  searchWeb: ({ arguments: args, output }) => (
+    <SearchResults query={JSON.parse(args).query} results={output} />
+  ),
+  generateImage: ({ arguments: args, output }) => (
+    <ImagePreview prompt={JSON.parse(args).prompt} url={output?.url} />
+  ),
+}
+
+<ChatMessage message={message} toolsRenderer={toolRenderers} />
+```
+
+### Error Handling
+
+```tsx
+<ChatMessages
+  errorState={({ error, reload }) => (
+    <div className="error">
+      <p>Error: {error.message}</p>
+      <button onClick={reload}>Retry</button>
+    </div>
+  )}
+/>
+```
+
+## Documentation
+
+For full documentation, visit [https://tanstack.com/ai](https://tanstack.com/ai)
+
+## License
+
+MIT
diff --git a/packages/typescript/ai-preact-ui/package.json b/packages/typescript/ai-preact-ui/package.json
new file mode 100644
index 00000000..d597fb03
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@tanstack/ai-preact-ui",
+  "version": "0.0.0",
+  "description": "Headless Preact components for building AI chat interfaces",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/ai.git",
+    "directory": "packages/typescript/ai-preact-ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "premove ./build ./dist",
+    "test:build": "publint --strict",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc"
+  },
+  "keywords": [
+    "tanstack",
+    "ai",
+    "preact",
+    "chat",
+    "ui",
+    "headless",
+    "components"
+  ],
+  "dependencies": {
+    "@tanstack/ai-preact": "workspace:*",
+    "preact-markdown": "^2.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "@tanstack/ai-preact": "workspace:*",
+    "preact": ">=10.11.0"
+  },
+  "devDependencies": {
+    "@tanstack/ai-client": "workspace:*",
+    "@vitest/coverage-v8": "4.0.14",
+    "vite": "^7.2.7"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/packages/typescript/ai-preact-ui/src/chat-input.tsx b/packages/typescript/ai-preact-ui/src/chat-input.tsx
new file mode 100644
index 00000000..4121ea28
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/chat-input.tsx
@@ -0,0 +1,177 @@
+import { useRef, useState } from 'preact/hooks'
+import { useChatContext } from './chat'
+import type { ComponentChildren, RefObject } from 'preact'
+
+export interface ChatInputRenderProps {
+  /** Current input value */
+  value: string
+  /** Set input value */
+  onChange: (value: string) => void
+  /** Submit the message */
+  onSubmit: () => void
+  /** Is the chat currently loading */
+  isLoading: boolean
+  /** Is input disabled */
+  disabled: boolean
+  /** Ref to the input element */
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+}
+
+export interface ChatInputProps {
+  /** Render prop for full control */
+  children?: (props: ChatInputRenderProps) => ComponentChildren
+  /** CSS class name */
+  className?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Disable input */
+  disabled?: boolean
+  /** Submit on Enter (Shift+Enter for new line) */
+  submitOnEnter?: boolean
+}
+
+/**
+ * Chat input component - handles message input and submission
+ *
+ * Features:
+ * - Auto-growing textarea
+ * - Submit on Enter (Shift+Enter for new line)
+ * - Loading state management
+ * - Full render prop support for custom UIs
+ *
+ * @example
+ * ```tsx
+ * <Chat.Input placeholder="Type your message..." />
+ * ```
+ *
+ * @example Custom UI with render prop
+ * ```tsx
+ * <Chat.Input>
+ *   {({ value, onChange, onSubmit, isLoading }) => (
+ *     <div>
+ *       <textarea value={value} onChange={(e) => onChange(e.currentTarget.value)} />
+ *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
+ *     </div>
+ *   )}
+ * </Chat.Input>
+ * ```
+ */
+export function ChatInput({
+  children,
+  className,
+  placeholder = 'Type a message...',
+  disabled: disabledProp,
+  submitOnEnter = true,
+}: ChatInputProps) {
+  const { sendMessage, isLoading } = useChatContext()
+  const [value, setValue] = useState('')
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+
+  const disabled = disabledProp || isLoading
+
+  const handleSubmit = () => {
+    if (!value.trim() || disabled) return
+    sendMessage(value)
+    setValue('')
+  }
+
+  const renderProps: ChatInputRenderProps = {
+    value,
+    onChange: setValue,
+    onSubmit: handleSubmit,
+    isLoading,
+    disabled,
+    inputRef,
+  }
+
+  // Render prop pattern
+  if (children) {
+    return <>{children(renderProps)}</>
+  }
+
+  // Default implementation
+  return (
+    <div
+      className={className}
+      data-chat-input
+      style={{
+        display: 'flex',
+        gap: '0.75rem',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <input
+        ref={inputRef as RefObject<HTMLInputElement>}
+        type="text"
+        value={value}
+        onInput={(e) => setValue((e.currentTarget as HTMLInputElement).value)}
+        onKeyDown={(e) => {
+          if (submitOnEnter && e.key === 'Enter') {
+            e.preventDefault()
+            handleSubmit()
+          }
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        data-chat-textarea
+        style={{
+          flex: 1,
+          padding: '0.75rem 1rem',
+          fontSize: '0.875rem',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          borderRadius: '0.75rem',
+          backgroundColor: 'rgba(31, 41, 55, 0.5)',
+          color: 'white',
+          outline: 'none',
+          transition: 'all 0.2s',
+        }}
+        onFocus={(e) => {
+          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+            'rgba(249, 115, 22, 0.4)'
+          ;(e.currentTarget as HTMLInputElement).style.boxShadow =
+            '0 0 0 2px rgba(249, 115, 22, 0.2)'
+        }}
+        onBlur={(e) => {
+          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+            'rgba(255, 255, 255, 0.1)'
+          ;(e.currentTarget as HTMLInputElement).style.boxShadow = 'none'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={disabled || !value.trim()}
+        data-chat-submit
+        style={{
+          padding: '0.75rem 1.5rem',
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          color: 'white',
+          backgroundColor:
+            disabled || !value.trim()
+              ? 'rgba(107, 114, 128, 0.5)'
+              : 'rgb(249, 115, 22)',
+          border: 'none',
+          borderRadius: '0.75rem',
+          cursor: disabled || !value.trim() ? 'not-allowed' : 'pointer',
+          transition: 'all 0.2s',
+          whiteSpace: 'nowrap',
+        }}
+        onMouseEnter={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+              'rgb(234, 88, 12)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!disabled && value.trim()) {
+            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+              'rgb(249, 115, 22)'
+          }
+        }}
+      >
+        {isLoading ? 'Sending...' : 'Send'}
+      </button>
+    </div>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/src/chat-message.tsx b/packages/typescript/ai-preact-ui/src/chat-message.tsx
new file mode 100644
index 00000000..62543ab9
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/chat-message.tsx
@@ -0,0 +1,266 @@
+import { ThinkingPart } from './thinking-part'
+import type { ComponentChildren } from 'preact'
+import type { UIMessage } from '@tanstack/ai-preact'
+
+export interface ToolCallRenderProps {
+  id: string
+  name: string
+  arguments: string
+  state: string
+  approval?: any
+  output?: any
+}
+
+export interface ChatMessageProps {
+  /** The message to render */
+  message: UIMessage
+  /** Base CSS class name */
+  className?: string
+  /** Additional className for user messages */
+  userClassName?: string
+  /** Additional className for assistant messages */
+  assistantClassName?: string
+  /** Custom renderer for text parts */
+  textPartRenderer?: (props: { content: string }) => ComponentChildren
+  /** Custom renderer for thinking parts */
+  thinkingPartRenderer?: (props: {
+    content: string
+    isComplete?: boolean
+  }) => ComponentChildren
+  /** Named tool renderers - use the tool name as the key */
+  toolsRenderer?: Record<string, (props: ToolCallRenderProps) => ComponentChildren>
+  /** Default tool renderer when tool name not found in toolsRenderer */
+  defaultToolRenderer?: (props: ToolCallRenderProps) => ComponentChildren
+  /** Custom renderer for tool result parts */
+  toolResultRenderer?: (props: {
+    toolCallId: string
+    content: string
+    state: string
+  }) => ComponentChildren
+}
+
+/**
+ * Message component - renders a single message with all its parts
+ *
+ * This component natively understands TanStack AI's parts-based message format:
+ * - thinking parts: rendered as collapsible thinking/reasoning sections (auto-collapses when complete)
+ * - text parts: rendered as content
+ * - tool-call parts: rendered with state, approvals, etc.
+ * - tool-result parts: rendered with results
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Chat.Message message={message} />
+ * ```
+ *
+ * @example With role-based styling
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   className="flex"
+ *   userClassName="justify-end"
+ *   assistantClassName="justify-start"
+ * />
+ * ```
+ *
+ * @example With custom thinking renderer
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   thinkingPartRenderer={({ content, isComplete }) => (
+ *     <details open={!isComplete}>
+ *       <summary>💭 Thinking...</summary>
+ *       <pre>{content}</pre>
+ *     </details>
+ *   )}
+ * />
+ * ```
+ *
+ * @example With named tool renderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   toolsRenderer={{
+ *     recommendGuitar: ({ id, arguments: args }) => <GuitarCard {...JSON.parse(args)} />,
+ *     weatherLookup: ({ id, arguments: args }) => <WeatherWidget {...JSON.parse(args)} />,
+ *   }}
+ *   defaultToolRenderer={() => null}
+ * />
+ * ```
+ */
+export function ChatMessage({
+  message,
+  className = '',
+  userClassName = '',
+  assistantClassName = '',
+  textPartRenderer,
+  thinkingPartRenderer,
+  toolsRenderer,
+  defaultToolRenderer,
+  toolResultRenderer,
+}: ChatMessageProps) {
+  // Combine classes based on role
+  const roleClassName =
+    message.role === 'user' ? userClassName : assistantClassName
+
+  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
+
+  return (
+    <div
+      className={combinedClassName || undefined}
+      data-message-id={message.id}
+      data-message-role={message.role}
+      data-message-created={message.createdAt?.toISOString()}
+    >
+      {message.parts.map((part, index) => {
+        // Check if thinking is complete (if there's a text part after this thinking part)
+        const isThinkingComplete =
+          part.type === 'thinking' &&
+          message.parts.slice(index + 1).some((p) => p.type === 'text')
+
+        return (
+          <MessagePart
+            key={`${message.id}-part-${index}`}
+            part={part}
+            isThinkingComplete={isThinkingComplete}
+            textPartRenderer={textPartRenderer}
+            thinkingPartRenderer={thinkingPartRenderer}
+            toolsRenderer={toolsRenderer}
+            defaultToolRenderer={defaultToolRenderer}
+            toolResultRenderer={toolResultRenderer}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+function MessagePart({
+  part,
+  isThinkingComplete,
+  textPartRenderer,
+  thinkingPartRenderer,
+  toolsRenderer,
+  defaultToolRenderer,
+  toolResultRenderer,
+}: {
+  part: any
+  isThinkingComplete?: boolean
+  textPartRenderer?: ChatMessageProps['textPartRenderer']
+  thinkingPartRenderer?: ChatMessageProps['thinkingPartRenderer']
+  toolsRenderer?: ChatMessageProps['toolsRenderer']
+  defaultToolRenderer?: ChatMessageProps['defaultToolRenderer']
+  toolResultRenderer?: ChatMessageProps['toolResultRenderer']
+}) {
+  // Text part
+  if (part.type === 'text') {
+    if (textPartRenderer) {
+      return <>{textPartRenderer({ content: part.content })}</>
+    }
+    return (
+      <div data-part-type="text" data-part-content>
+        {part.content}
+      </div>
+    )
+  }
+
+  // Thinking part
+  if (part.type === 'thinking') {
+    if (thinkingPartRenderer) {
+      return (
+        <>
+          {thinkingPartRenderer({
+            content: part.content,
+            isComplete: isThinkingComplete,
+          })}
+        </>
+      )
+    }
+    return (
+      <ThinkingPart content={part.content} isComplete={isThinkingComplete} />
+    )
+  }
+
+  // Tool call part
+  if (part.type === 'tool-call') {
+    const toolProps: ToolCallRenderProps = {
+      id: part.id,
+      name: part.name,
+      arguments: part.arguments,
+      state: part.state,
+      approval: part.approval,
+      output: part.output,
+    }
+
+    // Check if there's a specific renderer for this tool
+    if (toolsRenderer?.[part.name]) {
+      return <>{toolsRenderer[part.name]?.(toolProps)}</>
+    }
+
+    // Use default tool renderer if provided
+    if (defaultToolRenderer) {
+      return <>{defaultToolRenderer(toolProps)}</>
+    }
+
+    // Fallback to built-in default renderer
+    return (
+      <div
+        data-part-type="tool-call"
+        data-tool-name={part.name}
+        data-tool-state={part.state}
+        data-tool-id={part.id}
+      >
+        <div data-tool-header>
+          <strong>{part.name}</strong>
+          <span data-tool-state-badge>{part.state}</span>
+        </div>
+        {part.arguments && (
+          <div data-tool-arguments>
+            <pre>{part.arguments}</pre>
+          </div>
+        )}
+        {part.approval && (
+          <div data-tool-approval>
+            {part.approval.approved !== undefined
+              ? part.approval.approved
+                ? '✓ Approved'
+                : '✗ Denied'
+              : '⏳ Awaiting approval...'}
+          </div>
+        )}
+        {part.output && (
+          <div data-tool-output>
+            <pre>{JSON.stringify(part.output, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Tool result part
+  if (part.type === 'tool-result') {
+    if (toolResultRenderer) {
+      return (
+        <>
+          {toolResultRenderer({
+            toolCallId: part.toolCallId,
+            content: part.content,
+            state: part.state,
+          })}
+        </>
+      )
+    }
+
+    return (
+      <div
+        data-part-type="tool-result"
+        data-tool-call-id={part.toolCallId}
+        data-tool-result-state={part.state}
+      >
+        <div data-tool-result-content>{part.content}</div>
+      </div>
+    )
+  }
+
+  return null
+}
diff --git a/packages/typescript/ai-preact-ui/src/chat-messages.tsx b/packages/typescript/ai-preact-ui/src/chat-messages.tsx
new file mode 100644
index 00000000..3f1dd84a
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/chat-messages.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'preact/hooks'
+import { useChatContext } from './chat'
+import { ChatMessage } from './chat-message'
+import type { ComponentChildren } from 'preact'
+import type { UIMessage } from '@tanstack/ai-preact'
+
+export interface ChatMessagesProps {
+  /** Custom render function for each message */
+  children?: (message: UIMessage, index: number) => ComponentChildren
+  /** CSS class name */
+  className?: string
+  /** Element to show when there are no messages */
+  emptyState?: ComponentChildren
+  /** Element to show while loading the first message */
+  loadingState?: ComponentChildren
+  /** Custom error renderer */
+  errorState?: (props: { error: Error; reload: () => void }) => ComponentChildren
+  /** Auto-scroll to bottom on new messages */
+  autoScroll?: boolean
+}
+
+/**
+ * Messages container - renders all messages in the conversation
+ *
+ * @example
+ * ```tsx
+ * <Chat.Messages>
+ *   {(message) => <Chat.Message message={message} />}
+ * </Chat.Messages>
+ * ```
+ */
+export function ChatMessages({
+  children,
+  className,
+  emptyState,
+  loadingState,
+  errorState,
+  autoScroll = true,
+}: ChatMessagesProps) {
+  const { messages, isLoading, error, reload } = useChatContext()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight
+    }
+  }, [messages, autoScroll])
+
+  // Error state
+  if (error && errorState) {
+    return <>{errorState({ error, reload })}</>
+  }
+
+  // Loading state (only show if no messages yet)
+  if (isLoading && messages.length === 0 && loadingState) {
+    return <>{loadingState}</>
+  }
+
+  // Empty state
+  if (messages.length === 0 && emptyState) {
+    return <>{emptyState}</>
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      data-chat-messages
+      data-message-count={messages.length}
+    >
+      {messages.map((message, index) =>
+        children ? (
+          <div key={message.id} data-message-id={message.id}>
+            {children(message, index)}
+          </div>
+        ) : (
+          <ChatMessage key={message.id} message={message} />
+        ),
+      )}
+    </div>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/src/chat.tsx b/packages/typescript/ai-preact-ui/src/chat.tsx
new file mode 100644
index 00000000..2b76ff1c
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/chat.tsx
@@ -0,0 +1,96 @@
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+import { useChat } from '@tanstack/ai-preact'
+import type { ComponentChildren } from 'preact'
+import type {
+  ConnectionAdapter,
+  UIMessage,
+  UseChatReturn,
+} from '@tanstack/ai-preact'
+
+/**
+ * Chat context - provides chat state to all child components
+ */
+const ChatContext = createContext<UseChatReturn | null>(null)
+
+/**
+ * Hook to access chat context
+ * @throws Error if used outside of Chat component
+ */
+export function useChatContext() {
+  const context = useContext(ChatContext)
+  if (!context) {
+    throw new Error(
+      "Chat components must be wrapped in <Chat>. Make sure you're using Chat.Messages, Chat.Input, etc. inside a <Chat> component.",
+    )
+  }
+  return context
+}
+
+export interface ChatProps {
+  /** Child components (Chat.Messages, Chat.Input, etc.) */
+  children: ComponentChildren
+  /** CSS class name for the root element */
+  className?: string
+  /** Connection adapter for communicating with your API */
+  connection: ConnectionAdapter
+  /** Initial messages to display */
+  initialMessages?: Array<UIMessage>
+  /** Custom message ID generator */
+  id?: string
+  /** Additional body data to send with requests */
+  body?: any
+  /** Callback when a response is received */
+  onResponse?: (response?: Response) => void | Promise<void>
+  /** Callback when each chunk arrives */
+  onChunk?: (chunk: any) => void
+  /** Callback when a message is complete */
+  onFinish?: (message: UIMessage) => void
+  /** Callback when an error occurs */
+  onError?: (error: Error) => void
+  /** Custom tool components registry */
+  tools?: Record<string, any>
+}
+
+/**
+ * Root Chat component - provides context for all chat subcomponents
+ *
+ * @example
+ * ```tsx
+ * <Chat connection={fetchServerSentEvents("/api/chat")}>
+ *   <Chat.Messages />
+ *   <Chat.Input />
+ * </Chat>
+ * ```
+ */
+export function Chat({
+  children,
+  className,
+  connection,
+  initialMessages,
+  id,
+  body,
+  onResponse,
+  onChunk,
+  onFinish,
+  onError,
+}: ChatProps) {
+  const chat = useChat({
+    connection,
+    initialMessages,
+    id,
+    body,
+    onResponse,
+    onChunk,
+    onFinish,
+    onError,
+  })
+
+  return (
+    <ChatContext.Provider value={chat}>
+      <div className={className} data-chat-root>
+        {children}
+      </div>
+    </ChatContext.Provider>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/src/index.ts b/packages/typescript/ai-preact-ui/src/index.ts
new file mode 100644
index 00000000..c54f175e
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/index.ts
@@ -0,0 +1,61 @@
+/**
+ * @tanstack/ai-preact-ui
+ *
+ * Headless Preact components for building AI chat interfaces.
+ *
+ * Features:
+ * - Parts-based message rendering (text, tool calls, tool results)
+ * - Native tool approval workflows
+ * - Client-side tool execution support
+ * - Streaming support
+ * - Fully customizable with render props
+ * - Compound component pattern
+ *
+ * @example
+ * ```tsx
+ * import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
+ *
+ * <Chat connection={fetchServerSentEvents('/api/chat')}>
+ *   <ChatMessages>
+ *     {(message) => <ChatMessage message={message} />}
+ *   </ChatMessages>
+ *   <ChatInput />
+ * </Chat>
+ * ```
+ */
+
+// Main components
+export { Chat, useChatContext, type ChatProps } from './chat'
+export { ChatMessages, type ChatMessagesProps } from './chat-messages'
+export {
+  ChatMessage,
+  type ChatMessageProps,
+  type ToolCallRenderProps,
+} from './chat-message'
+export {
+  ChatInput,
+  type ChatInputProps,
+  type ChatInputRenderProps,
+} from './chat-input'
+export {
+  ToolApproval,
+  type ToolApprovalProps,
+  type ToolApprovalRenderProps,
+} from './tool-approval'
+export { TextPart, type TextPartProps } from './text-part'
+export { ThinkingPart, type ThinkingPartProps } from './thinking-part'
+
+// Re-export hooks from @tanstack/ai-preact for convenience
+export { useChat } from '@tanstack/ai-preact'
+
+// Re-export types from @tanstack/ai-preact
+export type {
+  UIMessage,
+  MessagePart,
+  ToolCallPart,
+  ToolResultPart,
+  TextPart as TextPartType,
+  ConnectionAdapter,
+} from '@tanstack/ai-client'
+
+export type { UseChatOptions, UseChatReturn } from '@tanstack/ai-preact'
diff --git a/packages/typescript/ai-preact-ui/src/text-part.tsx b/packages/typescript/ai-preact-ui/src/text-part.tsx
new file mode 100644
index 00000000..1d11e151
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/text-part.tsx
@@ -0,0 +1,76 @@
+import { h } from 'preact'
+import Markdown from 'preact-markdown'
+
+export interface TextPartProps {
+  /** The text content to render */
+  content: string
+  /** The role of the message (user, assistant, or system) - optional for standalone use */
+  role?: 'user' | 'assistant' | 'system'
+  /** Base className applied to all text parts */
+  className?: string
+  /** Additional className for user messages */
+  userClassName?: string
+  /** Additional className for assistant messages (also used for system messages) */
+  assistantClassName?: string
+}
+
+/**
+ * TextPart component - renders markdown text with syntax highlighting
+ *
+ * Features:
+ * - Full markdown support with GFM (tables, strikethrough, etc.)
+ * - Syntax highlighting for code blocks
+ * - Sanitized HTML rendering
+ * - Role-based styling (user vs assistant)
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <TextPart
+ *   content="Hello **world**!"
+ *   role="user"
+ *   className="p-4 rounded"
+ *   userClassName="bg-blue-500"
+ *   assistantClassName="bg-gray-500"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     text: ({ content }) => (
+ *       <TextPart
+ *         content={content}
+ *         role={message.role}
+ *         className="px-5 py-3 rounded-2xl"
+ *         userClassName="bg-orange-500 text-white"
+ *         assistantClassName="bg-gray-800 text-white"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export function TextPart({
+  content,
+  role,
+  className = '',
+  userClassName = '',
+  assistantClassName = '',
+}: TextPartProps) {
+  // Combine classes based on role
+  const roleClassName =
+    role === 'user'
+      ? userClassName
+      : role === 'assistant'
+        ? assistantClassName
+        : ''
+  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
+
+  return (
+    <div className={combinedClassName || undefined}>
+      {h(Markdown, { markdown: content })}
+    </div>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/src/thinking-part.tsx b/packages/typescript/ai-preact-ui/src/thinking-part.tsx
new file mode 100644
index 00000000..9e841bb6
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/thinking-part.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export interface ThinkingPartProps {
+  /** The thinking content to render */
+  content: string
+  /** Base className applied to thinking parts */
+  className?: string
+  /** Whether thinking is complete (has text content after) */
+  isComplete?: boolean
+}
+
+/**
+ * ThinkingPart component - renders thinking/reasoning content
+ *
+ * This component displays the model's internal reasoning process,
+ * typically shown in a collapsed or expandable format to distinguish
+ * it from the final response. It automatically collapses when thinking
+ * is complete.
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <ThinkingPart
+ *   content="Let me think about this step by step..."
+ *   className="p-4 rounded bg-gray-100"
+ * />
+ * ```
+ *
+ * @example Usage in partRenderers
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   partRenderers={{
+ *     thinking: ({ content, isComplete }) => (
+ *       <ThinkingPart
+ *         content={content}
+ *         isComplete={isComplete}
+ *         className="px-5 py-3 rounded-2xl bg-gray-800/50"
+ *       />
+ *     )
+ *   }}
+ * />
+ * ```
+ */
+export function ThinkingPart({
+  content,
+  className = '',
+  isComplete = false,
+}: ThinkingPartProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  // Auto-collapse when thinking completes
+  useEffect(() => {
+    if (isComplete) {
+      setIsCollapsed(true)
+    }
+  }, [isComplete])
+
+  return (
+    <div
+      className={className || undefined}
+      data-part-type="thinking"
+      data-part-content
+    >
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300 transition-colors mb-2"
+        aria-expanded={!isCollapsed}
+        aria-label={isCollapsed ? 'Expand thinking' : 'Collapse thinking'}
+      >
+        <span className="text-xs">{isCollapsed ? '▶' : '▼'}</span>
+        <span className="italic">💭 Thinking...</span>
+        {isComplete && (
+          <span className="text-xs text-gray-500">(complete)</span>
+        )}
+      </button>
+      {!isCollapsed && (
+        <div className="text-gray-300 whitespace-pre-wrap font-mono text-sm">
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/src/tool-approval.tsx b/packages/typescript/ai-preact-ui/src/tool-approval.tsx
new file mode 100644
index 00000000..2f5073c1
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/src/tool-approval.tsx
@@ -0,0 +1,129 @@
+import { useChatContext } from './chat'
+import type { ComponentChildren } from 'preact'
+
+export interface ToolApprovalProps {
+  /** Tool call ID */
+  toolCallId: string
+  /** Tool name */
+  toolName: string
+  /** Parsed tool arguments/input */
+  input: any
+  /** Approval metadata */
+  approval: {
+    id: string
+    needsApproval: boolean
+    approved?: boolean
+  }
+  /** CSS class name */
+  className?: string
+  /** Custom render prop */
+  children?: (props: ToolApprovalRenderProps) => ComponentChildren
+}
+
+export interface ToolApprovalRenderProps {
+  /** Tool name */
+  toolName: string
+  /** Parsed input */
+  input: any
+  /** Approve the tool call */
+  onApprove: () => void
+  /** Deny the tool call */
+  onDeny: () => void
+  /** Whether user has responded */
+  hasResponded: boolean
+  /** User's decision (if responded) */
+  approved?: boolean
+}
+
+/**
+ * Tool approval component - renders approve/deny buttons for tools that need approval
+ *
+ * @example
+ * ```tsx
+ * {part.approval && (
+ *   <ToolApproval
+ *     toolCallId={part.id}
+ *     toolName={part.name}
+ *     input={JSON.parse(part.arguments)}
+ *     approval={part.approval}
+ *   />
+ * )}
+ * ```
+ */
+export function ToolApproval({
+  toolCallId: _,
+  toolName,
+  input,
+  approval,
+  className,
+  children,
+}: ToolApprovalProps) {
+  const { addToolApprovalResponse } = useChatContext()
+
+  const handleApprove = () => {
+    addToolApprovalResponse({
+      id: approval.id,
+      approved: true,
+    })
+  }
+
+  const handleDeny = () => {
+    addToolApprovalResponse({
+      id: approval.id,
+      approved: false,
+    })
+  }
+
+  const hasResponded = approval.approved !== undefined
+
+  const renderProps: ToolApprovalRenderProps = {
+    toolName,
+    input,
+    onApprove: handleApprove,
+    onDeny: handleDeny,
+    hasResponded,
+    approved: approval.approved,
+  }
+
+  // Render prop pattern
+  if (children) {
+    return <>{children(renderProps)}</>
+  }
+
+  // Already responded - show decision
+  if (hasResponded) {
+    return (
+      <div
+        className={className}
+        data-tool-approval
+        data-approval-status={approval.approved ? 'approved' : 'denied'}
+      >
+        {approval.approved ? '✓ Approved' : '✗ Denied'}
+      </div>
+    )
+  }
+
+  // Default approval UI
+  return (
+    <div
+      className={className}
+      data-tool-approval
+      data-approval-status="pending"
+    >
+      <div data-approval-header>
+        <strong>{toolName}</strong> requires approval
+      </div>
+      <div data-approval-input>
+        <pre>{JSON.stringify(input, null, 2)}</pre>
+      </div>
+      <div data-approval-actions>
+        <button onClick={handleApprove} data-approval-approve>
+          Approve
+        </button>
+        <button onClick={handleDeny} data-approval-deny>
+          Deny
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/typescript/ai-preact-ui/tsconfig.json b/packages/typescript/ai-preact-ui/tsconfig.json
new file mode 100644
index 00000000..2ce68976
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "declaration": true,
+    "declarationMap": true,
+    "composite": true,
+    "lib": ["ES2022", "DOM"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/typescript/ai-preact-ui/vite.config.ts b/packages/typescript/ai-preact-ui/vite.config.ts
new file mode 100644
index 00000000..77bcc2e6
--- /dev/null
+++ b/packages/typescript/ai-preact-ui/vite.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import { tanstackViteConfig } from '@tanstack/vite-config'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      exclude: [
+        'node_modules/',
+        'dist/',
+        'tests/',
+        '**/*.test.ts',
+        '**/*.config.ts',
+        '**/types.ts',
+      ],
+      include: ['src/**/*.ts'],
+    },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: ['./src/index.ts'],
+    srcDir: './src',
+    cjs: false,
+  }),
+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21eb7cb9..66819382 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -658,7 +658,7 @@ importers:
         version: 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
       '@tanstack/devtools-utils':
         specifier: ^0.2.3
-        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
+        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
       goober:
         specifier: ^2.1.18
         version: 2.1.18(csstype@3.2.3)
@@ -774,6 +774,40 @@ importers:
         specifier: ^7.2.7
         version: 7.2.7(@types/node@25.0.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
 
+  packages/typescript/ai-preact-ui:
+    dependencies:
+      '@tanstack/ai-preact':
+        specifier: workspace:*
+        version: link:../ai-preact
+      preact:
+        specifier: '>=10.11.0'
+        version: 10.28.0
+      preact-markdown:
+        specifier: ^2.1.0
+        version: 2.1.0(preact@10.28.0)
+      rehype-highlight:
+        specifier: ^7.0.2
+        version: 7.0.2
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
+      rehype-sanitize:
+        specifier: ^6.0.0
+        version: 6.0.0
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+    devDependencies:
+      '@tanstack/ai-client':
+        specifier: workspace:*
+        version: link:../ai-client
+      '@vitest/coverage-v8':
+        specifier: 4.0.14
+        version: 4.0.14(vitest@4.0.15(@types/node@25.0.1)(happy-dom@20.0.11)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vite:
+        specifier: ^7.2.7
+        version: 7.2.7(@types/node@25.0.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+
   packages/typescript/ai-react:
     dependencies:
       '@tanstack/ai-client':
@@ -1025,7 +1059,7 @@ importers:
         version: link:../ai-devtools
       '@tanstack/devtools-utils':
         specifier: ^0.2.3
-        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
+        version: 0.2.3(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
       preact:
         specifier: ^10.0.0
         version: 10.28.1
@@ -1044,7 +1078,7 @@ importers:
         version: link:../ai-devtools
       '@tanstack/devtools-utils':
         specifier: ^0.2.3
-        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
+        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
     devDependencies:
       '@types/react':
         specifier: ^19.2.7
@@ -1175,7 +1209,7 @@ importers:
         version: link:../ai-devtools
       '@tanstack/devtools-utils':
         specifier: ^0.2.3
-        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
+        version: 0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))
     devDependencies:
       '@vitest/coverage-v8':
         specifier: 4.0.14
@@ -5960,6 +5994,11 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
+  marked@4.3.0:
+    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
+    engines: {node: '>= 12'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6558,12 +6597,23 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact@10.28.2:
-    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
+  preact-markdown@2.1.0:
+    resolution: {integrity: sha512-6c2hfarjLFkVDNa1hUKytXID6wl6yilZnGb2y83xKXnfk5SpXYAwhJc+JENgffAcNALWggqvX/ezlk8/8qJsuA==}
+
+  preact-markup@2.1.1:
+    resolution: {integrity: sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==}
+    peerDependencies:
+      preact: '>=10'
+
+  preact@10.28.0:
+    resolution: {integrity: sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA==}
 
   preact@10.28.1:
     resolution: {integrity: sha512-u1/ixq/lVQI0CakKNvLDEcW5zfCjUQfZdK9qqWuIJtsezuyG6pk9TWj75GMuI/EzRSZB/VAE43sNWWZfiy8psw==}
 
+  preact@10.28.2:
+    resolution: {integrity: sha512-lbteaWGzGHdlIuiJ0l2Jq454m6kcpI1zNje6d8MlGAFlYvP2GO4ibnat7P74Esfz4sPTdM6UxtTwh/d3pwM9JA==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -9680,7 +9730,19 @@ snapshots:
     transitivePeerDependencies:
       - csstype
 
-  '@tanstack/devtools-utils@0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))':
+  '@tanstack/devtools-utils@0.2.3(@types/react@19.2.7)(csstype@3.2.3)(preact@10.28.2)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      preact: 10.28.2
+      react: 19.2.3
+      solid-js: 1.9.10
+      vue: 3.5.25(typescript@5.9.3)
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/devtools-utils@0.2.3(@types/react@19.2.7)(preact@10.28.1)(react@19.2.3)(solid-js@1.9.10)(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
     optionalDependencies:
@@ -13432,6 +13494,8 @@ snapshots:
 
   marked@17.0.1: {}
 
+  marked@4.3.0: {}
+
   math-intrinsics@1.1.0: {}
 
   mdast-util-find-and-replace@3.0.2:
@@ -14333,10 +14397,23 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact@10.28.2: {}
+  preact-markdown@2.1.0(preact@10.28.0):
+    dependencies:
+      marked: 4.3.0
+      preact-markup: 2.1.1(preact@10.28.0)
+    transitivePeerDependencies:
+      - preact
+
+  preact-markup@2.1.1(preact@10.28.0):
+    dependencies:
+      preact: 10.28.0
+
+  preact@10.28.0: {}
 
   preact@10.28.1: {}
 
+  preact@10.28.2: {}
+
   prelude-ls@1.2.1: {}
 
   premove@4.0.0: {}

From 12d68b5687c882238042e6f5f14290c9b631ac0c Mon Sep 17 00:00:00 2001
From: jdecroock <decroockjovi@gmail.com>
Date: Sun, 11 Jan 2026 14:11:59 +0100
Subject: [PATCH 2/5] Use preact-md

---
 ai-preact-ui/CHANGELOG.md                     |   1 -
 ai-preact-ui/README.md                        | 307 ------------------
 ai-preact-ui/package.json                     |  57 ----
 ai-preact-ui/src/chat-input.tsx               | 177 ----------
 ai-preact-ui/src/chat-message.tsx             | 266 ---------------
 ai-preact-ui/src/chat-messages.tsx            |  83 -----
 ai-preact-ui/src/chat.tsx                     |  96 ------
 ai-preact-ui/src/index.ts                     |  61 ----
 ai-preact-ui/src/text-part.tsx                |  76 -----
 ai-preact-ui/src/thinking-part.tsx            |  83 -----
 ai-preact-ui/src/tool-approval.tsx            | 129 --------
 ai-preact-ui/tsconfig.json                    |  15 -
 ai-preact-ui/vite.config.ts                   |  36 --
 packages/typescript/ai-preact-ui/package.json |   3 +-
 .../ai-preact-ui/src/chat-input.tsx           |  14 +-
 .../typescript/ai-preact-ui/src/text-part.tsx |  14 +-
 pnpm-lock.yaml                                |  42 +--
 17 files changed, 34 insertions(+), 1426 deletions(-)
 delete mode 100644 ai-preact-ui/CHANGELOG.md
 delete mode 100644 ai-preact-ui/README.md
 delete mode 100644 ai-preact-ui/package.json
 delete mode 100644 ai-preact-ui/src/chat-input.tsx
 delete mode 100644 ai-preact-ui/src/chat-message.tsx
 delete mode 100644 ai-preact-ui/src/chat-messages.tsx
 delete mode 100644 ai-preact-ui/src/chat.tsx
 delete mode 100644 ai-preact-ui/src/index.ts
 delete mode 100644 ai-preact-ui/src/text-part.tsx
 delete mode 100644 ai-preact-ui/src/thinking-part.tsx
 delete mode 100644 ai-preact-ui/src/tool-approval.tsx
 delete mode 100644 ai-preact-ui/tsconfig.json
 delete mode 100644 ai-preact-ui/vite.config.ts

diff --git a/ai-preact-ui/CHANGELOG.md b/ai-preact-ui/CHANGELOG.md
deleted file mode 100644
index 2b402699..00000000
--- a/ai-preact-ui/CHANGELOG.md
+++ /dev/null
@@ -1 +0,0 @@
-# @tanstack/ai-preact-ui
diff --git a/ai-preact-ui/README.md b/ai-preact-ui/README.md
deleted file mode 100644
index a9b3ada8..00000000
--- a/ai-preact-ui/README.md
+++ /dev/null
@@ -1,307 +0,0 @@
-<div align="center">
-  <img src="./media/header_ai.png" >
-</div>
-
-<br />
-
-<div align="center">
-<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
-  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
-</a>
-<a href="https://github.com/TanStack/ai" target="\_parent">
-	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
-</a>
-<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
-  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
-</a>
-</div>
-
-<div align="center">
-<a href="#badge">
-  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
-</a>
-	<a href="#badge">
-		<img src="https://img.shields.io/github/v/release/tanstack/ai" alt="Release"/>
-	</a>
-<a href="https://twitter.com/tan_stack">
-  <img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
-</a>
-</div>
-
-<div align="center">
-  
-### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
-</div>
-
-# TanStack AI Preact UI
-
-Headless Preact components for building AI chat interfaces with TanStack AI.
-
-## Features
-
-- 🎨 **Headless components** - Full control over styling and markup
-- 🔄 **Parts-based rendering** - Native support for text, tool calls, thinking, and tool results
-- ⚡ **Streaming support** - Real-time message updates
-- 🔧 **Tool approval workflows** - Built-in support for tool approval UI
-- 📦 **Compound components** - Composable API with `<Chat>`, `<ChatMessages>`, `<ChatInput>`, etc.
-- 🎯 **Type-safe** - Full TypeScript support
-- 🎭 **Render props** - Customize any part of the UI
-- 🪝 **Preact hooks** - Built on `@tanstack/ai-preact`
-
-## Installation
-
-```bash
-npm install @tanstack/ai-preact-ui @tanstack/ai-preact
-# or
-pnpm add @tanstack/ai-preact-ui @tanstack/ai-preact
-# or
-yarn add @tanstack/ai-preact-ui @tanstack/ai-preact
-```
-
-## Quick Start
-
-```tsx
-import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
-import { fetchServerSentEvents } from '@tanstack/ai-client'
-
-function App() {
-  return (
-    <Chat connection={fetchServerSentEvents('/api/chat')}>
-      <ChatMessages>
-        {(message) => <ChatMessage message={message} />}
-      </ChatMessages>
-      <ChatInput placeholder="Type your message..." />
-    </Chat>
-  )
-}
-```
-
-## Components
-
-### `<Chat>`
-
-Root component that provides chat context to all child components.
-
-```tsx
-<Chat 
-  connection={fetchServerSentEvents('/api/chat')}
-  initialMessages={[]}
-  onFinish={(message) => console.log('Message complete:', message)}
->
-  {/* child components */}
-</Chat>
-```
-
-### `<ChatMessages>`
-
-Container for rendering all messages in the conversation.
-
-```tsx
-<ChatMessages
-  autoScroll={true}
-  emptyState={<p>No messages yet. Start a conversation!</p>}
-  loadingState={<p>Loading...</p>}
->
-  {(message) => <ChatMessage message={message} />}
-</ChatMessages>
-```
-
-### `<ChatMessage>`
-
-Renders a single message with all its parts (text, thinking, tool calls, tool results).
-
-```tsx
-<ChatMessage
-  message={message}
-  className="mb-4"
-  userClassName="text-blue-500"
-  assistantClassName="text-gray-700"
-/>
-```
-
-#### Custom Part Renderers
-
-```tsx
-<ChatMessage
-  message={message}
-  textPartRenderer={({ content }) => (
-    <TextPart 
-      content={content} 
-      className="prose dark:prose-invert"
-    />
-  )}
-  thinkingPartRenderer={({ content, isComplete }) => (
-    <ThinkingPart 
-      content={content} 
-      isComplete={isComplete}
-      className="bg-gray-100 dark:bg-gray-800"
-    />
-  )}
-  toolsRenderer={{
-    weatherLookup: ({ arguments: args, output }) => (
-      <WeatherCard data={JSON.parse(args)} result={output} />
-    ),
-  }}
-/>
-```
-
-### `<ChatInput>`
-
-Input component for sending messages.
-
-```tsx
-<ChatInput 
-  placeholder="Type a message..."
-  submitOnEnter={true}
-/>
-```
-
-#### Custom Input UI
-
-```tsx
-<ChatInput>
-  {({ value, onChange, onSubmit, isLoading }) => (
-    <div className="flex gap-2">
-      <input
-        value={value}
-        onInput={(e) => onChange(e.target.value)}
-        className="flex-1 px-4 py-2 border rounded"
-      />
-      <button 
-        onClick={onSubmit} 
-        disabled={isLoading}
-        className="px-6 py-2 bg-blue-500 text-white rounded"
-      >
-        {isLoading ? 'Sending...' : 'Send'}
-      </button>
-    </div>
-  )}
-</ChatInput>
-```
-
-### `<TextPart>`
-
-Renders text content with markdown support and syntax highlighting.
-
-```tsx
-<TextPart
-  content="Hello **world**! Here's some code:\n```js\nconsole.log('hi')\n```"
-  role="assistant"
-  className="prose dark:prose-invert"
-/>
-```
-
-### `<ThinkingPart>`
-
-Renders model thinking/reasoning content with collapsible UI.
-
-```tsx
-<ThinkingPart
-  content="Let me think about this step by step..."
-  isComplete={false}
-  className="bg-gray-100 p-4 rounded"
-/>
-```
-
-### `<ToolApproval>`
-
-Renders approve/deny buttons for tools that require approval.
-
-```tsx
-<ToolApproval
-  toolCallId={part.id}
-  toolName={part.name}
-  input={JSON.parse(part.arguments)}
-  approval={part.approval}
-/>
-```
-
-## Hooks
-
-### `useChatContext()`
-
-Access the chat context from any child component.
-
-```tsx
-import { useChatContext } from '@tanstack/ai-preact-ui'
-
-function CustomComponent() {
-  const { messages, isLoading, sendMessage } = useChatContext()
-  
-  return (
-    <div>
-      <p>Messages: {messages.length}</p>
-      <p>Loading: {isLoading ? 'Yes' : 'No'}</p>
-    </div>
-  )
-}
-```
-
-## Styling
-
-All components are headless and use data attributes for styling:
-
-```css
-/* Message styling */
-[data-message-role="user"] {
-  background: #e3f2fd;
-  text-align: right;
-}
-
-[data-message-role="assistant"] {
-  background: #f5f5f5;
-}
-
-/* Part type styling */
-[data-part-type="text"] {
-  padding: 1rem;
-}
-
-[data-part-type="thinking"] {
-  opacity: 0.8;
-  font-style: italic;
-}
-
-[data-part-type="tool-call"] {
-  border-left: 3px solid #2196f3;
-  padding-left: 1rem;
-}
-```
-
-## Advanced Usage
-
-### Custom Tool Renderers
-
-```tsx
-const toolRenderers = {
-  searchWeb: ({ arguments: args, output }) => (
-    <SearchResults query={JSON.parse(args).query} results={output} />
-  ),
-  generateImage: ({ arguments: args, output }) => (
-    <ImagePreview prompt={JSON.parse(args).prompt} url={output?.url} />
-  ),
-}
-
-<ChatMessage message={message} toolsRenderer={toolRenderers} />
-```
-
-### Error Handling
-
-```tsx
-<ChatMessages
-  errorState={({ error, reload }) => (
-    <div className="error">
-      <p>Error: {error.message}</p>
-      <button onClick={reload}>Retry</button>
-    </div>
-  )}
-/>
-```
-
-## Documentation
-
-For full documentation, visit [https://tanstack.com/ai](https://tanstack.com/ai)
-
-## License
-
-MIT
diff --git a/ai-preact-ui/package.json b/ai-preact-ui/package.json
deleted file mode 100644
index d597fb03..00000000
--- a/ai-preact-ui/package.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
-  "name": "@tanstack/ai-preact-ui",
-  "version": "0.0.0",
-  "description": "Headless Preact components for building AI chat interfaces",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TanStack/ai.git",
-    "directory": "packages/typescript/ai-preact-ui"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js"
-    }
-  },
-  "scripts": {
-    "build": "vite build",
-    "clean": "premove ./build ./dist",
-    "test:build": "publint --strict",
-    "test:eslint": "eslint ./src",
-    "test:lib": "vitest --passWithNoTests",
-    "test:lib:dev": "pnpm test:lib --watch",
-    "test:types": "tsc"
-  },
-  "keywords": [
-    "tanstack",
-    "ai",
-    "preact",
-    "chat",
-    "ui",
-    "headless",
-    "components"
-  ],
-  "dependencies": {
-    "@tanstack/ai-preact": "workspace:*",
-    "preact-markdown": "^2.1.0",
-    "rehype-highlight": "^7.0.2",
-    "rehype-raw": "^7.0.0",
-    "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^4.0.1"
-  },
-  "peerDependencies": {
-    "@tanstack/ai-preact": "workspace:*",
-    "preact": ">=10.11.0"
-  },
-  "devDependencies": {
-    "@tanstack/ai-client": "workspace:*",
-    "@vitest/coverage-v8": "4.0.14",
-    "vite": "^7.2.7"
-  },
-  "files": [
-    "dist"
-  ]
-}
diff --git a/ai-preact-ui/src/chat-input.tsx b/ai-preact-ui/src/chat-input.tsx
deleted file mode 100644
index 4121ea28..00000000
--- a/ai-preact-ui/src/chat-input.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useRef, useState } from 'preact/hooks'
-import { useChatContext } from './chat'
-import type { ComponentChildren, RefObject } from 'preact'
-
-export interface ChatInputRenderProps {
-  /** Current input value */
-  value: string
-  /** Set input value */
-  onChange: (value: string) => void
-  /** Submit the message */
-  onSubmit: () => void
-  /** Is the chat currently loading */
-  isLoading: boolean
-  /** Is input disabled */
-  disabled: boolean
-  /** Ref to the input element */
-  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>
-}
-
-export interface ChatInputProps {
-  /** Render prop for full control */
-  children?: (props: ChatInputRenderProps) => ComponentChildren
-  /** CSS class name */
-  className?: string
-  /** Placeholder text */
-  placeholder?: string
-  /** Disable input */
-  disabled?: boolean
-  /** Submit on Enter (Shift+Enter for new line) */
-  submitOnEnter?: boolean
-}
-
-/**
- * Chat input component - handles message input and submission
- *
- * Features:
- * - Auto-growing textarea
- * - Submit on Enter (Shift+Enter for new line)
- * - Loading state management
- * - Full render prop support for custom UIs
- *
- * @example
- * ```tsx
- * <Chat.Input placeholder="Type your message..." />
- * ```
- *
- * @example Custom UI with render prop
- * ```tsx
- * <Chat.Input>
- *   {({ value, onChange, onSubmit, isLoading }) => (
- *     <div>
- *       <textarea value={value} onChange={(e) => onChange(e.currentTarget.value)} />
- *       <button onClick={onSubmit} disabled={isLoading}>Send</button>
- *     </div>
- *   )}
- * </Chat.Input>
- * ```
- */
-export function ChatInput({
-  children,
-  className,
-  placeholder = 'Type a message...',
-  disabled: disabledProp,
-  submitOnEnter = true,
-}: ChatInputProps) {
-  const { sendMessage, isLoading } = useChatContext()
-  const [value, setValue] = useState('')
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
-
-  const disabled = disabledProp || isLoading
-
-  const handleSubmit = () => {
-    if (!value.trim() || disabled) return
-    sendMessage(value)
-    setValue('')
-  }
-
-  const renderProps: ChatInputRenderProps = {
-    value,
-    onChange: setValue,
-    onSubmit: handleSubmit,
-    isLoading,
-    disabled,
-    inputRef,
-  }
-
-  // Render prop pattern
-  if (children) {
-    return <>{children(renderProps)}</>
-  }
-
-  // Default implementation
-  return (
-    <div
-      className={className}
-      data-chat-input
-      style={{
-        display: 'flex',
-        gap: '0.75rem',
-        alignItems: 'center',
-        width: '100%',
-      }}
-    >
-      <input
-        ref={inputRef as RefObject<HTMLInputElement>}
-        type="text"
-        value={value}
-        onInput={(e) => setValue((e.currentTarget as HTMLInputElement).value)}
-        onKeyDown={(e) => {
-          if (submitOnEnter && e.key === 'Enter') {
-            e.preventDefault()
-            handleSubmit()
-          }
-        }}
-        placeholder={placeholder}
-        disabled={disabled}
-        data-chat-textarea
-        style={{
-          flex: 1,
-          padding: '0.75rem 1rem',
-          fontSize: '0.875rem',
-          border: '1px solid rgba(255, 255, 255, 0.1)',
-          borderRadius: '0.75rem',
-          backgroundColor: 'rgba(31, 41, 55, 0.5)',
-          color: 'white',
-          outline: 'none',
-          transition: 'all 0.2s',
-        }}
-        onFocus={(e) => {
-          ;(e.currentTarget as HTMLInputElement).style.borderColor =
-            'rgba(249, 115, 22, 0.4)'
-          ;(e.currentTarget as HTMLInputElement).style.boxShadow =
-            '0 0 0 2px rgba(249, 115, 22, 0.2)'
-        }}
-        onBlur={(e) => {
-          ;(e.currentTarget as HTMLInputElement).style.borderColor =
-            'rgba(255, 255, 255, 0.1)'
-          ;(e.currentTarget as HTMLInputElement).style.boxShadow = 'none'
-        }}
-      />
-      <button
-        onClick={handleSubmit}
-        disabled={disabled || !value.trim()}
-        data-chat-submit
-        style={{
-          padding: '0.75rem 1.5rem',
-          fontSize: '0.875rem',
-          fontWeight: 500,
-          color: 'white',
-          backgroundColor:
-            disabled || !value.trim()
-              ? 'rgba(107, 114, 128, 0.5)'
-              : 'rgb(249, 115, 22)',
-          border: 'none',
-          borderRadius: '0.75rem',
-          cursor: disabled || !value.trim() ? 'not-allowed' : 'pointer',
-          transition: 'all 0.2s',
-          whiteSpace: 'nowrap',
-        }}
-        onMouseEnter={(e) => {
-          if (!disabled && value.trim()) {
-            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
-              'rgb(234, 88, 12)'
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!disabled && value.trim()) {
-            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
-              'rgb(249, 115, 22)'
-          }
-        }}
-      >
-        {isLoading ? 'Sending...' : 'Send'}
-      </button>
-    </div>
-  )
-}
diff --git a/ai-preact-ui/src/chat-message.tsx b/ai-preact-ui/src/chat-message.tsx
deleted file mode 100644
index 62543ab9..00000000
--- a/ai-preact-ui/src/chat-message.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { ThinkingPart } from './thinking-part'
-import type { ComponentChildren } from 'preact'
-import type { UIMessage } from '@tanstack/ai-preact'
-
-export interface ToolCallRenderProps {
-  id: string
-  name: string
-  arguments: string
-  state: string
-  approval?: any
-  output?: any
-}
-
-export interface ChatMessageProps {
-  /** The message to render */
-  message: UIMessage
-  /** Base CSS class name */
-  className?: string
-  /** Additional className for user messages */
-  userClassName?: string
-  /** Additional className for assistant messages */
-  assistantClassName?: string
-  /** Custom renderer for text parts */
-  textPartRenderer?: (props: { content: string }) => ComponentChildren
-  /** Custom renderer for thinking parts */
-  thinkingPartRenderer?: (props: {
-    content: string
-    isComplete?: boolean
-  }) => ComponentChildren
-  /** Named tool renderers - use the tool name as the key */
-  toolsRenderer?: Record<string, (props: ToolCallRenderProps) => ComponentChildren>
-  /** Default tool renderer when tool name not found in toolsRenderer */
-  defaultToolRenderer?: (props: ToolCallRenderProps) => ComponentChildren
-  /** Custom renderer for tool result parts */
-  toolResultRenderer?: (props: {
-    toolCallId: string
-    content: string
-    state: string
-  }) => ComponentChildren
-}
-
-/**
- * Message component - renders a single message with all its parts
- *
- * This component natively understands TanStack AI's parts-based message format:
- * - thinking parts: rendered as collapsible thinking/reasoning sections (auto-collapses when complete)
- * - text parts: rendered as content
- * - tool-call parts: rendered with state, approvals, etc.
- * - tool-result parts: rendered with results
- *
- * @example Basic usage
- * ```tsx
- * <Chat.Message message={message} />
- * ```
- *
- * @example With role-based styling
- * ```tsx
- * <ChatMessage
- *   message={message}
- *   className="flex"
- *   userClassName="justify-end"
- *   assistantClassName="justify-start"
- * />
- * ```
- *
- * @example With custom thinking renderer
- * ```tsx
- * <ChatMessage
- *   message={message}
- *   thinkingPartRenderer={({ content, isComplete }) => (
- *     <details open={!isComplete}>
- *       <summary>💭 Thinking...</summary>
- *       <pre>{content}</pre>
- *     </details>
- *   )}
- * />
- * ```
- *
- * @example With named tool renderers
- * ```tsx
- * <ChatMessage
- *   message={message}
- *   toolsRenderer={{
- *     recommendGuitar: ({ id, arguments: args }) => <GuitarCard {...JSON.parse(args)} />,
- *     weatherLookup: ({ id, arguments: args }) => <WeatherWidget {...JSON.parse(args)} />,
- *   }}
- *   defaultToolRenderer={() => null}
- * />
- * ```
- */
-export function ChatMessage({
-  message,
-  className = '',
-  userClassName = '',
-  assistantClassName = '',
-  textPartRenderer,
-  thinkingPartRenderer,
-  toolsRenderer,
-  defaultToolRenderer,
-  toolResultRenderer,
-}: ChatMessageProps) {
-  // Combine classes based on role
-  const roleClassName =
-    message.role === 'user' ? userClassName : assistantClassName
-
-  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
-
-  return (
-    <div
-      className={combinedClassName || undefined}
-      data-message-id={message.id}
-      data-message-role={message.role}
-      data-message-created={message.createdAt?.toISOString()}
-    >
-      {message.parts.map((part, index) => {
-        // Check if thinking is complete (if there's a text part after this thinking part)
-        const isThinkingComplete =
-          part.type === 'thinking' &&
-          message.parts.slice(index + 1).some((p) => p.type === 'text')
-
-        return (
-          <MessagePart
-            key={`${message.id}-part-${index}`}
-            part={part}
-            isThinkingComplete={isThinkingComplete}
-            textPartRenderer={textPartRenderer}
-            thinkingPartRenderer={thinkingPartRenderer}
-            toolsRenderer={toolsRenderer}
-            defaultToolRenderer={defaultToolRenderer}
-            toolResultRenderer={toolResultRenderer}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-function MessagePart({
-  part,
-  isThinkingComplete,
-  textPartRenderer,
-  thinkingPartRenderer,
-  toolsRenderer,
-  defaultToolRenderer,
-  toolResultRenderer,
-}: {
-  part: any
-  isThinkingComplete?: boolean
-  textPartRenderer?: ChatMessageProps['textPartRenderer']
-  thinkingPartRenderer?: ChatMessageProps['thinkingPartRenderer']
-  toolsRenderer?: ChatMessageProps['toolsRenderer']
-  defaultToolRenderer?: ChatMessageProps['defaultToolRenderer']
-  toolResultRenderer?: ChatMessageProps['toolResultRenderer']
-}) {
-  // Text part
-  if (part.type === 'text') {
-    if (textPartRenderer) {
-      return <>{textPartRenderer({ content: part.content })}</>
-    }
-    return (
-      <div data-part-type="text" data-part-content>
-        {part.content}
-      </div>
-    )
-  }
-
-  // Thinking part
-  if (part.type === 'thinking') {
-    if (thinkingPartRenderer) {
-      return (
-        <>
-          {thinkingPartRenderer({
-            content: part.content,
-            isComplete: isThinkingComplete,
-          })}
-        </>
-      )
-    }
-    return (
-      <ThinkingPart content={part.content} isComplete={isThinkingComplete} />
-    )
-  }
-
-  // Tool call part
-  if (part.type === 'tool-call') {
-    const toolProps: ToolCallRenderProps = {
-      id: part.id,
-      name: part.name,
-      arguments: part.arguments,
-      state: part.state,
-      approval: part.approval,
-      output: part.output,
-    }
-
-    // Check if there's a specific renderer for this tool
-    if (toolsRenderer?.[part.name]) {
-      return <>{toolsRenderer[part.name]?.(toolProps)}</>
-    }
-
-    // Use default tool renderer if provided
-    if (defaultToolRenderer) {
-      return <>{defaultToolRenderer(toolProps)}</>
-    }
-
-    // Fallback to built-in default renderer
-    return (
-      <div
-        data-part-type="tool-call"
-        data-tool-name={part.name}
-        data-tool-state={part.state}
-        data-tool-id={part.id}
-      >
-        <div data-tool-header>
-          <strong>{part.name}</strong>
-          <span data-tool-state-badge>{part.state}</span>
-        </div>
-        {part.arguments && (
-          <div data-tool-arguments>
-            <pre>{part.arguments}</pre>
-          </div>
-        )}
-        {part.approval && (
-          <div data-tool-approval>
-            {part.approval.approved !== undefined
-              ? part.approval.approved
-                ? '✓ Approved'
-                : '✗ Denied'
-              : '⏳ Awaiting approval...'}
-          </div>
-        )}
-        {part.output && (
-          <div data-tool-output>
-            <pre>{JSON.stringify(part.output, null, 2)}</pre>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Tool result part
-  if (part.type === 'tool-result') {
-    if (toolResultRenderer) {
-      return (
-        <>
-          {toolResultRenderer({
-            toolCallId: part.toolCallId,
-            content: part.content,
-            state: part.state,
-          })}
-        </>
-      )
-    }
-
-    return (
-      <div
-        data-part-type="tool-result"
-        data-tool-call-id={part.toolCallId}
-        data-tool-result-state={part.state}
-      >
-        <div data-tool-result-content>{part.content}</div>
-      </div>
-    )
-  }
-
-  return null
-}
diff --git a/ai-preact-ui/src/chat-messages.tsx b/ai-preact-ui/src/chat-messages.tsx
deleted file mode 100644
index 3f1dd84a..00000000
--- a/ai-preact-ui/src/chat-messages.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect, useRef } from 'preact/hooks'
-import { useChatContext } from './chat'
-import { ChatMessage } from './chat-message'
-import type { ComponentChildren } from 'preact'
-import type { UIMessage } from '@tanstack/ai-preact'
-
-export interface ChatMessagesProps {
-  /** Custom render function for each message */
-  children?: (message: UIMessage, index: number) => ComponentChildren
-  /** CSS class name */
-  className?: string
-  /** Element to show when there are no messages */
-  emptyState?: ComponentChildren
-  /** Element to show while loading the first message */
-  loadingState?: ComponentChildren
-  /** Custom error renderer */
-  errorState?: (props: { error: Error; reload: () => void }) => ComponentChildren
-  /** Auto-scroll to bottom on new messages */
-  autoScroll?: boolean
-}
-
-/**
- * Messages container - renders all messages in the conversation
- *
- * @example
- * ```tsx
- * <Chat.Messages>
- *   {(message) => <Chat.Message message={message} />}
- * </Chat.Messages>
- * ```
- */
-export function ChatMessages({
-  children,
-  className,
-  emptyState,
-  loadingState,
-  errorState,
-  autoScroll = true,
-}: ChatMessagesProps) {
-  const { messages, isLoading, error, reload } = useChatContext()
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  // Auto-scroll to bottom on new messages
-  useEffect(() => {
-    if (autoScroll && containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight
-    }
-  }, [messages, autoScroll])
-
-  // Error state
-  if (error && errorState) {
-    return <>{errorState({ error, reload })}</>
-  }
-
-  // Loading state (only show if no messages yet)
-  if (isLoading && messages.length === 0 && loadingState) {
-    return <>{loadingState}</>
-  }
-
-  // Empty state
-  if (messages.length === 0 && emptyState) {
-    return <>{emptyState}</>
-  }
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      data-chat-messages
-      data-message-count={messages.length}
-    >
-      {messages.map((message, index) =>
-        children ? (
-          <div key={message.id} data-message-id={message.id}>
-            {children(message, index)}
-          </div>
-        ) : (
-          <ChatMessage key={message.id} message={message} />
-        ),
-      )}
-    </div>
-  )
-}
diff --git a/ai-preact-ui/src/chat.tsx b/ai-preact-ui/src/chat.tsx
deleted file mode 100644
index 2b76ff1c..00000000
--- a/ai-preact-ui/src/chat.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { createContext } from 'preact'
-import { useContext } from 'preact/hooks'
-import { useChat } from '@tanstack/ai-preact'
-import type { ComponentChildren } from 'preact'
-import type {
-  ConnectionAdapter,
-  UIMessage,
-  UseChatReturn,
-} from '@tanstack/ai-preact'
-
-/**
- * Chat context - provides chat state to all child components
- */
-const ChatContext = createContext<UseChatReturn | null>(null)
-
-/**
- * Hook to access chat context
- * @throws Error if used outside of Chat component
- */
-export function useChatContext() {
-  const context = useContext(ChatContext)
-  if (!context) {
-    throw new Error(
-      "Chat components must be wrapped in <Chat>. Make sure you're using Chat.Messages, Chat.Input, etc. inside a <Chat> component.",
-    )
-  }
-  return context
-}
-
-export interface ChatProps {
-  /** Child components (Chat.Messages, Chat.Input, etc.) */
-  children: ComponentChildren
-  /** CSS class name for the root element */
-  className?: string
-  /** Connection adapter for communicating with your API */
-  connection: ConnectionAdapter
-  /** Initial messages to display */
-  initialMessages?: Array<UIMessage>
-  /** Custom message ID generator */
-  id?: string
-  /** Additional body data to send with requests */
-  body?: any
-  /** Callback when a response is received */
-  onResponse?: (response?: Response) => void | Promise<void>
-  /** Callback when each chunk arrives */
-  onChunk?: (chunk: any) => void
-  /** Callback when a message is complete */
-  onFinish?: (message: UIMessage) => void
-  /** Callback when an error occurs */
-  onError?: (error: Error) => void
-  /** Custom tool components registry */
-  tools?: Record<string, any>
-}
-
-/**
- * Root Chat component - provides context for all chat subcomponents
- *
- * @example
- * ```tsx
- * <Chat connection={fetchServerSentEvents("/api/chat")}>
- *   <Chat.Messages />
- *   <Chat.Input />
- * </Chat>
- * ```
- */
-export function Chat({
-  children,
-  className,
-  connection,
-  initialMessages,
-  id,
-  body,
-  onResponse,
-  onChunk,
-  onFinish,
-  onError,
-}: ChatProps) {
-  const chat = useChat({
-    connection,
-    initialMessages,
-    id,
-    body,
-    onResponse,
-    onChunk,
-    onFinish,
-    onError,
-  })
-
-  return (
-    <ChatContext.Provider value={chat}>
-      <div className={className} data-chat-root>
-        {children}
-      </div>
-    </ChatContext.Provider>
-  )
-}
diff --git a/ai-preact-ui/src/index.ts b/ai-preact-ui/src/index.ts
deleted file mode 100644
index c54f175e..00000000
--- a/ai-preact-ui/src/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * @tanstack/ai-preact-ui
- *
- * Headless Preact components for building AI chat interfaces.
- *
- * Features:
- * - Parts-based message rendering (text, tool calls, tool results)
- * - Native tool approval workflows
- * - Client-side tool execution support
- * - Streaming support
- * - Fully customizable with render props
- * - Compound component pattern
- *
- * @example
- * ```tsx
- * import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
- *
- * <Chat connection={fetchServerSentEvents('/api/chat')}>
- *   <ChatMessages>
- *     {(message) => <ChatMessage message={message} />}
- *   </ChatMessages>
- *   <ChatInput />
- * </Chat>
- * ```
- */
-
-// Main components
-export { Chat, useChatContext, type ChatProps } from './chat'
-export { ChatMessages, type ChatMessagesProps } from './chat-messages'
-export {
-  ChatMessage,
-  type ChatMessageProps,
-  type ToolCallRenderProps,
-} from './chat-message'
-export {
-  ChatInput,
-  type ChatInputProps,
-  type ChatInputRenderProps,
-} from './chat-input'
-export {
-  ToolApproval,
-  type ToolApprovalProps,
-  type ToolApprovalRenderProps,
-} from './tool-approval'
-export { TextPart, type TextPartProps } from './text-part'
-export { ThinkingPart, type ThinkingPartProps } from './thinking-part'
-
-// Re-export hooks from @tanstack/ai-preact for convenience
-export { useChat } from '@tanstack/ai-preact'
-
-// Re-export types from @tanstack/ai-preact
-export type {
-  UIMessage,
-  MessagePart,
-  ToolCallPart,
-  ToolResultPart,
-  TextPart as TextPartType,
-  ConnectionAdapter,
-} from '@tanstack/ai-client'
-
-export type { UseChatOptions, UseChatReturn } from '@tanstack/ai-preact'
diff --git a/ai-preact-ui/src/text-part.tsx b/ai-preact-ui/src/text-part.tsx
deleted file mode 100644
index 1d11e151..00000000
--- a/ai-preact-ui/src/text-part.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { h } from 'preact'
-import Markdown from 'preact-markdown'
-
-export interface TextPartProps {
-  /** The text content to render */
-  content: string
-  /** The role of the message (user, assistant, or system) - optional for standalone use */
-  role?: 'user' | 'assistant' | 'system'
-  /** Base className applied to all text parts */
-  className?: string
-  /** Additional className for user messages */
-  userClassName?: string
-  /** Additional className for assistant messages (also used for system messages) */
-  assistantClassName?: string
-}
-
-/**
- * TextPart component - renders markdown text with syntax highlighting
- *
- * Features:
- * - Full markdown support with GFM (tables, strikethrough, etc.)
- * - Syntax highlighting for code blocks
- * - Sanitized HTML rendering
- * - Role-based styling (user vs assistant)
- *
- * @example Standalone usage
- * ```tsx
- * <TextPart
- *   content="Hello **world**!"
- *   role="user"
- *   className="p-4 rounded"
- *   userClassName="bg-blue-500"
- *   assistantClassName="bg-gray-500"
- * />
- * ```
- *
- * @example Usage in partRenderers
- * ```tsx
- * <ChatMessage
- *   message={message}
- *   partRenderers={{
- *     text: ({ content }) => (
- *       <TextPart
- *         content={content}
- *         role={message.role}
- *         className="px-5 py-3 rounded-2xl"
- *         userClassName="bg-orange-500 text-white"
- *         assistantClassName="bg-gray-800 text-white"
- *       />
- *     )
- *   }}
- * />
- * ```
- */
-export function TextPart({
-  content,
-  role,
-  className = '',
-  userClassName = '',
-  assistantClassName = '',
-}: TextPartProps) {
-  // Combine classes based on role
-  const roleClassName =
-    role === 'user'
-      ? userClassName
-      : role === 'assistant'
-        ? assistantClassName
-        : ''
-  const combinedClassName = [className, roleClassName].filter(Boolean).join(' ')
-
-  return (
-    <div className={combinedClassName || undefined}>
-      {h(Markdown, { markdown: content })}
-    </div>
-  )
-}
diff --git a/ai-preact-ui/src/thinking-part.tsx b/ai-preact-ui/src/thinking-part.tsx
deleted file mode 100644
index 9e841bb6..00000000
--- a/ai-preact-ui/src/thinking-part.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useEffect, useState } from 'preact/hooks'
-
-export interface ThinkingPartProps {
-  /** The thinking content to render */
-  content: string
-  /** Base className applied to thinking parts */
-  className?: string
-  /** Whether thinking is complete (has text content after) */
-  isComplete?: boolean
-}
-
-/**
- * ThinkingPart component - renders thinking/reasoning content
- *
- * This component displays the model's internal reasoning process,
- * typically shown in a collapsed or expandable format to distinguish
- * it from the final response. It automatically collapses when thinking
- * is complete.
- *
- * @example Standalone usage
- * ```tsx
- * <ThinkingPart
- *   content="Let me think about this step by step..."
- *   className="p-4 rounded bg-gray-100"
- * />
- * ```
- *
- * @example Usage in partRenderers
- * ```tsx
- * <ChatMessage
- *   message={message}
- *   partRenderers={{
- *     thinking: ({ content, isComplete }) => (
- *       <ThinkingPart
- *         content={content}
- *         isComplete={isComplete}
- *         className="px-5 py-3 rounded-2xl bg-gray-800/50"
- *       />
- *     )
- *   }}
- * />
- * ```
- */
-export function ThinkingPart({
-  content,
-  className = '',
-  isComplete = false,
-}: ThinkingPartProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false)
-
-  // Auto-collapse when thinking completes
-  useEffect(() => {
-    if (isComplete) {
-      setIsCollapsed(true)
-    }
-  }, [isComplete])
-
-  return (
-    <div
-      className={className || undefined}
-      data-part-type="thinking"
-      data-part-content
-    >
-      <button
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-300 transition-colors mb-2"
-        aria-expanded={!isCollapsed}
-        aria-label={isCollapsed ? 'Expand thinking' : 'Collapse thinking'}
-      >
-        <span className="text-xs">{isCollapsed ? '▶' : '▼'}</span>
-        <span className="italic">💭 Thinking...</span>
-        {isComplete && (
-          <span className="text-xs text-gray-500">(complete)</span>
-        )}
-      </button>
-      {!isCollapsed && (
-        <div className="text-gray-300 whitespace-pre-wrap font-mono text-sm">
-          {content}
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/ai-preact-ui/src/tool-approval.tsx b/ai-preact-ui/src/tool-approval.tsx
deleted file mode 100644
index 2f5073c1..00000000
--- a/ai-preact-ui/src/tool-approval.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { useChatContext } from './chat'
-import type { ComponentChildren } from 'preact'
-
-export interface ToolApprovalProps {
-  /** Tool call ID */
-  toolCallId: string
-  /** Tool name */
-  toolName: string
-  /** Parsed tool arguments/input */
-  input: any
-  /** Approval metadata */
-  approval: {
-    id: string
-    needsApproval: boolean
-    approved?: boolean
-  }
-  /** CSS class name */
-  className?: string
-  /** Custom render prop */
-  children?: (props: ToolApprovalRenderProps) => ComponentChildren
-}
-
-export interface ToolApprovalRenderProps {
-  /** Tool name */
-  toolName: string
-  /** Parsed input */
-  input: any
-  /** Approve the tool call */
-  onApprove: () => void
-  /** Deny the tool call */
-  onDeny: () => void
-  /** Whether user has responded */
-  hasResponded: boolean
-  /** User's decision (if responded) */
-  approved?: boolean
-}
-
-/**
- * Tool approval component - renders approve/deny buttons for tools that need approval
- *
- * @example
- * ```tsx
- * {part.approval && (
- *   <ToolApproval
- *     toolCallId={part.id}
- *     toolName={part.name}
- *     input={JSON.parse(part.arguments)}
- *     approval={part.approval}
- *   />
- * )}
- * ```
- */
-export function ToolApproval({
-  toolCallId: _,
-  toolName,
-  input,
-  approval,
-  className,
-  children,
-}: ToolApprovalProps) {
-  const { addToolApprovalResponse } = useChatContext()
-
-  const handleApprove = () => {
-    addToolApprovalResponse({
-      id: approval.id,
-      approved: true,
-    })
-  }
-
-  const handleDeny = () => {
-    addToolApprovalResponse({
-      id: approval.id,
-      approved: false,
-    })
-  }
-
-  const hasResponded = approval.approved !== undefined
-
-  const renderProps: ToolApprovalRenderProps = {
-    toolName,
-    input,
-    onApprove: handleApprove,
-    onDeny: handleDeny,
-    hasResponded,
-    approved: approval.approved,
-  }
-
-  // Render prop pattern
-  if (children) {
-    return <>{children(renderProps)}</>
-  }
-
-  // Already responded - show decision
-  if (hasResponded) {
-    return (
-      <div
-        className={className}
-        data-tool-approval
-        data-approval-status={approval.approved ? 'approved' : 'denied'}
-      >
-        {approval.approved ? '✓ Approved' : '✗ Denied'}
-      </div>
-    )
-  }
-
-  // Default approval UI
-  return (
-    <div
-      className={className}
-      data-tool-approval
-      data-approval-status="pending"
-    >
-      <div data-approval-header>
-        <strong>{toolName}</strong> requires approval
-      </div>
-      <div data-approval-input>
-        <pre>{JSON.stringify(input, null, 2)}</pre>
-      </div>
-      <div data-approval-actions>
-        <button onClick={handleApprove} data-approval-approve>
-          Approve
-        </button>
-        <button onClick={handleDeny} data-approval-deny>
-          Deny
-        </button>
-      </div>
-    </div>
-  )
-}
diff --git a/ai-preact-ui/tsconfig.json b/ai-preact-ui/tsconfig.json
deleted file mode 100644
index 2ce68976..00000000
--- a/ai-preact-ui/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    "declaration": true,
-    "declarationMap": true,
-    "composite": true,
-    "lib": ["ES2022", "DOM"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}
diff --git a/ai-preact-ui/vite.config.ts b/ai-preact-ui/vite.config.ts
deleted file mode 100644
index 77bcc2e6..00000000
--- a/ai-preact-ui/vite.config.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config'
-import { tanstackViteConfig } from '@tanstack/vite-config'
-import packageJson from './package.json'
-
-const config = defineConfig({
-  test: {
-    name: packageJson.name,
-    dir: './',
-    watch: false,
-    globals: true,
-    environment: 'node',
-    include: ['tests/**/*.test.ts'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html', 'lcov'],
-      exclude: [
-        'node_modules/',
-        'dist/',
-        'tests/',
-        '**/*.test.ts',
-        '**/*.config.ts',
-        '**/types.ts',
-      ],
-      include: ['src/**/*.ts'],
-    },
-  },
-})
-
-export default mergeConfig(
-  config,
-  tanstackViteConfig({
-    entry: ['./src/index.ts'],
-    srcDir: './src',
-    cjs: false,
-  }),
-)
diff --git a/packages/typescript/ai-preact-ui/package.json b/packages/typescript/ai-preact-ui/package.json
index d597fb03..53a99170 100644
--- a/packages/typescript/ai-preact-ui/package.json
+++ b/packages/typescript/ai-preact-ui/package.json
@@ -36,10 +36,9 @@
   ],
   "dependencies": {
     "@tanstack/ai-preact": "workspace:*",
-    "preact-markdown": "^2.1.0",
+    "preact-md": "^0.2.0",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
-    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
diff --git a/packages/typescript/ai-preact-ui/src/chat-input.tsx b/packages/typescript/ai-preact-ui/src/chat-input.tsx
index 4121ea28..b4014fb6 100644
--- a/packages/typescript/ai-preact-ui/src/chat-input.tsx
+++ b/packages/typescript/ai-preact-ui/src/chat-input.tsx
@@ -105,7 +105,7 @@ export function ChatInput({
         ref={inputRef as RefObject<HTMLInputElement>}
         type="text"
         value={value}
-        onInput={(e) => setValue((e.currentTarget as HTMLInputElement).value)}
+        onInput={(e) => setValue(e.currentTarget.value)}
         onKeyDown={(e) => {
           if (submitOnEnter && e.key === 'Enter') {
             e.preventDefault()
@@ -127,15 +127,15 @@ export function ChatInput({
           transition: 'all 0.2s',
         }}
         onFocus={(e) => {
-          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+          e.currentTarget.style.borderColor =
             'rgba(249, 115, 22, 0.4)'
-          ;(e.currentTarget as HTMLInputElement).style.boxShadow =
+          e.currentTarget.style.boxShadow =
             '0 0 0 2px rgba(249, 115, 22, 0.2)'
         }}
         onBlur={(e) => {
-          ;(e.currentTarget as HTMLInputElement).style.borderColor =
+          e.currentTarget.style.borderColor =
             'rgba(255, 255, 255, 0.1)'
-          ;(e.currentTarget as HTMLInputElement).style.boxShadow = 'none'
+          e.currentTarget.style.boxShadow = 'none'
         }}
       />
       <button
@@ -159,13 +159,13 @@ export function ChatInput({
         }}
         onMouseEnter={(e) => {
           if (!disabled && value.trim()) {
-            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+            e.currentTarget.style.backgroundColor =
               'rgb(234, 88, 12)'
           }
         }}
         onMouseLeave={(e) => {
           if (!disabled && value.trim()) {
-            ;(e.currentTarget as HTMLButtonElement).style.backgroundColor =
+            e.currentTarget.style.backgroundColor =
               'rgb(249, 115, 22)'
           }
         }}
diff --git a/packages/typescript/ai-preact-ui/src/text-part.tsx b/packages/typescript/ai-preact-ui/src/text-part.tsx
index 1d11e151..0a368319 100644
--- a/packages/typescript/ai-preact-ui/src/text-part.tsx
+++ b/packages/typescript/ai-preact-ui/src/text-part.tsx
@@ -1,5 +1,7 @@
-import { h } from 'preact'
-import Markdown from 'preact-markdown'
+import { Markdown } from 'preact-md'
+import rehypeRaw from 'rehype-raw'
+import rehypeHighlight from 'rehype-highlight'
+import remarkGfm from 'remark-gfm'
 
 export interface TextPartProps {
   /** The text content to render */
@@ -70,7 +72,13 @@ export function TextPart({
 
   return (
     <div className={combinedClassName || undefined}>
-      {h(Markdown, { markdown: content })}
+      <Markdown
+        // @ts-expect-error - Plugin type incompatibility between unified and preact-md
+        rehypePlugins={[rehypeRaw, rehypeHighlight]}
+        remarkPlugins={[remarkGfm]}
+      >
+        {content}
+      </Markdown>
     </div>
   )
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 66819382..27b3f32f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -782,18 +782,15 @@ importers:
       preact:
         specifier: '>=10.11.0'
         version: 10.28.0
-      preact-markdown:
-        specifier: ^2.1.0
-        version: 2.1.0(preact@10.28.0)
+      preact-md:
+        specifier: ^0.2.0
+        version: 0.2.0(preact@10.28.0)
       rehype-highlight:
         specifier: ^7.0.2
         version: 7.0.2
       rehype-raw:
         specifier: ^7.0.0
         version: 7.0.0
-      rehype-sanitize:
-        specifier: ^6.0.0
-        version: 6.0.0
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
@@ -5994,11 +5991,6 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
-  marked@4.3.0:
-    resolution: {integrity: sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==}
-    engines: {node: '>= 12'}
-    hasBin: true
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6597,13 +6589,10 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact-markdown@2.1.0:
-    resolution: {integrity: sha512-6c2hfarjLFkVDNa1hUKytXID6wl6yilZnGb2y83xKXnfk5SpXYAwhJc+JENgffAcNALWggqvX/ezlk8/8qJsuA==}
-
-  preact-markup@2.1.1:
-    resolution: {integrity: sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==}
+  preact-md@0.2.0:
+    resolution: {integrity: sha512-82C8cD5Ss60u30z6DxsyLdrI2yQZ7KGUdJ/QnA2N5lU0rUv+s3ZX0U3wiDTeoxu/E0Ck5QIFuRYkMeHZgeG5hw==}
     peerDependencies:
-      preact: '>=10'
+      preact: ^10.0.0
 
   preact@10.28.0:
     resolution: {integrity: sha512-rytDAoiXr3+t6OIP3WGlDd0ouCUG1iCWzkcY3++Nreuoi17y6T5i/zRhe6uYfoVcxq6YU+sBtJouuRDsq8vvqA==}
@@ -13494,8 +13483,6 @@ snapshots:
 
   marked@17.0.1: {}
 
-  marked@4.3.0: {}
-
   math-intrinsics@1.1.0: {}
 
   mdast-util-find-and-replace@3.0.2:
@@ -14397,16 +14384,17 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact-markdown@2.1.0(preact@10.28.0):
-    dependencies:
-      marked: 4.3.0
-      preact-markup: 2.1.1(preact@10.28.0)
-    transitivePeerDependencies:
-      - preact
-
-  preact-markup@2.1.1(preact@10.28.0):
+  preact-md@0.2.0(preact@10.28.0):
     dependencies:
+      hast-util-sanitize: 5.0.2
+      marked: 17.0.1
       preact: 10.28.0
+      rehype-sanitize: 6.0.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
 
   preact@10.28.0: {}
 

From f00de9d7eafee1b71cc314805dbd9198f45f129b Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 11 Jan 2026 13:32:41 +0000
Subject: [PATCH 3/5] ci: apply automated fixes

---
 packages/typescript/ai-preact-ui/README.md    | 43 +++++++++----------
 .../ai-preact-ui/src/chat-input.tsx           | 15 +++----
 .../ai-preact-ui/src/chat-message.tsx         |  5 ++-
 .../ai-preact-ui/src/chat-messages.tsx        |  5 ++-
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/typescript/ai-preact-ui/README.md b/packages/typescript/ai-preact-ui/README.md
index a9b3ada8..deae147c 100644
--- a/packages/typescript/ai-preact-ui/README.md
+++ b/packages/typescript/ai-preact-ui/README.md
@@ -61,7 +61,12 @@ yarn add @tanstack/ai-preact-ui @tanstack/ai-preact
 ## Quick Start
 
 ```tsx
-import { Chat, ChatMessages, ChatInput, ChatMessage } from '@tanstack/ai-preact-ui'
+import {
+  Chat,
+  ChatMessages,
+  ChatInput,
+  ChatMessage,
+} from '@tanstack/ai-preact-ui'
 import { fetchServerSentEvents } from '@tanstack/ai-client'
 
 function App() {
@@ -83,7 +88,7 @@ function App() {
 Root component that provides chat context to all child components.
 
 ```tsx
-<Chat 
+<Chat
   connection={fetchServerSentEvents('/api/chat')}
   initialMessages={[]}
   onFinish={(message) => console.log('Message complete:', message)}
@@ -125,14 +130,11 @@ Renders a single message with all its parts (text, thinking, tool calls, tool re
 <ChatMessage
   message={message}
   textPartRenderer={({ content }) => (
-    <TextPart 
-      content={content} 
-      className="prose dark:prose-invert"
-    />
+    <TextPart content={content} className="prose dark:prose-invert" />
   )}
   thinkingPartRenderer={({ content, isComplete }) => (
-    <ThinkingPart 
-      content={content} 
+    <ThinkingPart
+      content={content}
       isComplete={isComplete}
       className="bg-gray-100 dark:bg-gray-800"
     />
@@ -150,10 +152,7 @@ Renders a single message with all its parts (text, thinking, tool calls, tool re
 Input component for sending messages.
 
 ```tsx
-<ChatInput 
-  placeholder="Type a message..."
-  submitOnEnter={true}
-/>
+<ChatInput placeholder="Type a message..." submitOnEnter={true} />
 ```
 
 #### Custom Input UI
@@ -167,8 +166,8 @@ Input component for sending messages.
         onInput={(e) => onChange(e.target.value)}
         className="flex-1 px-4 py-2 border rounded"
       />
-      <button 
-        onClick={onSubmit} 
+      <button
+        onClick={onSubmit}
         disabled={isLoading}
         className="px-6 py-2 bg-blue-500 text-white rounded"
       >
@@ -183,13 +182,13 @@ Input component for sending messages.
 
 Renders text content with markdown support and syntax highlighting.
 
-```tsx
+````tsx
 <TextPart
   content="Hello **world**! Here's some code:\n```js\nconsole.log('hi')\n```"
   role="assistant"
   className="prose dark:prose-invert"
 />
-```
+````
 
 ### `<ThinkingPart>`
 
@@ -227,7 +226,7 @@ import { useChatContext } from '@tanstack/ai-preact-ui'
 
 function CustomComponent() {
   const { messages, isLoading, sendMessage } = useChatContext()
-  
+
   return (
     <div>
       <p>Messages: {messages.length}</p>
@@ -243,26 +242,26 @@ All components are headless and use data attributes for styling:
 
 ```css
 /* Message styling */
-[data-message-role="user"] {
+[data-message-role='user'] {
   background: #e3f2fd;
   text-align: right;
 }
 
-[data-message-role="assistant"] {
+[data-message-role='assistant'] {
   background: #f5f5f5;
 }
 
 /* Part type styling */
-[data-part-type="text"] {
+[data-part-type='text'] {
   padding: 1rem;
 }
 
-[data-part-type="thinking"] {
+[data-part-type='thinking'] {
   opacity: 0.8;
   font-style: italic;
 }
 
-[data-part-type="tool-call"] {
+[data-part-type='tool-call'] {
   border-left: 3px solid #2196f3;
   padding-left: 1rem;
 }
diff --git a/packages/typescript/ai-preact-ui/src/chat-input.tsx b/packages/typescript/ai-preact-ui/src/chat-input.tsx
index b4014fb6..be3b9dcc 100644
--- a/packages/typescript/ai-preact-ui/src/chat-input.tsx
+++ b/packages/typescript/ai-preact-ui/src/chat-input.tsx
@@ -127,14 +127,11 @@ export function ChatInput({
           transition: 'all 0.2s',
         }}
         onFocus={(e) => {
-          e.currentTarget.style.borderColor =
-            'rgba(249, 115, 22, 0.4)'
-          e.currentTarget.style.boxShadow =
-            '0 0 0 2px rgba(249, 115, 22, 0.2)'
+          e.currentTarget.style.borderColor = 'rgba(249, 115, 22, 0.4)'
+          e.currentTarget.style.boxShadow = '0 0 0 2px rgba(249, 115, 22, 0.2)'
         }}
         onBlur={(e) => {
-          e.currentTarget.style.borderColor =
-            'rgba(255, 255, 255, 0.1)'
+          e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'
           e.currentTarget.style.boxShadow = 'none'
         }}
       />
@@ -159,14 +156,12 @@ export function ChatInput({
         }}
         onMouseEnter={(e) => {
           if (!disabled && value.trim()) {
-            e.currentTarget.style.backgroundColor =
-              'rgb(234, 88, 12)'
+            e.currentTarget.style.backgroundColor = 'rgb(234, 88, 12)'
           }
         }}
         onMouseLeave={(e) => {
           if (!disabled && value.trim()) {
-            e.currentTarget.style.backgroundColor =
-              'rgb(249, 115, 22)'
+            e.currentTarget.style.backgroundColor = 'rgb(249, 115, 22)'
           }
         }}
       >
diff --git a/packages/typescript/ai-preact-ui/src/chat-message.tsx b/packages/typescript/ai-preact-ui/src/chat-message.tsx
index 62543ab9..bf17b4c9 100644
--- a/packages/typescript/ai-preact-ui/src/chat-message.tsx
+++ b/packages/typescript/ai-preact-ui/src/chat-message.tsx
@@ -28,7 +28,10 @@ export interface ChatMessageProps {
     isComplete?: boolean
   }) => ComponentChildren
   /** Named tool renderers - use the tool name as the key */
-  toolsRenderer?: Record<string, (props: ToolCallRenderProps) => ComponentChildren>
+  toolsRenderer?: Record<
+    string,
+    (props: ToolCallRenderProps) => ComponentChildren
+  >
   /** Default tool renderer when tool name not found in toolsRenderer */
   defaultToolRenderer?: (props: ToolCallRenderProps) => ComponentChildren
   /** Custom renderer for tool result parts */
diff --git a/packages/typescript/ai-preact-ui/src/chat-messages.tsx b/packages/typescript/ai-preact-ui/src/chat-messages.tsx
index 3f1dd84a..30b62c6b 100644
--- a/packages/typescript/ai-preact-ui/src/chat-messages.tsx
+++ b/packages/typescript/ai-preact-ui/src/chat-messages.tsx
@@ -14,7 +14,10 @@ export interface ChatMessagesProps {
   /** Element to show while loading the first message */
   loadingState?: ComponentChildren
   /** Custom error renderer */
-  errorState?: (props: { error: Error; reload: () => void }) => ComponentChildren
+  errorState?: (props: {
+    error: Error
+    reload: () => void
+  }) => ComponentChildren
   /** Auto-scroll to bottom on new messages */
   autoScroll?: boolean
 }

From 06f6f70cccfc003eed4eb854f2dc678687e76131 Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Wed, 14 Jan 2026 18:03:02 +0100
Subject: [PATCH 4/5] Bump preact-md

---
 packages/typescript/ai-preact-ui/package.json      |  2 +-
 packages/typescript/ai-preact-ui/src/text-part.tsx |  1 -
 pnpm-lock.yaml                                     | 10 +++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/typescript/ai-preact-ui/package.json b/packages/typescript/ai-preact-ui/package.json
index 53a99170..e9d5233c 100644
--- a/packages/typescript/ai-preact-ui/package.json
+++ b/packages/typescript/ai-preact-ui/package.json
@@ -36,7 +36,7 @@
   ],
   "dependencies": {
     "@tanstack/ai-preact": "workspace:*",
-    "preact-md": "^0.2.0",
+    "preact-md": "^0.2.1",
     "rehype-highlight": "^7.0.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1"
diff --git a/packages/typescript/ai-preact-ui/src/text-part.tsx b/packages/typescript/ai-preact-ui/src/text-part.tsx
index 0a368319..6f61a3d7 100644
--- a/packages/typescript/ai-preact-ui/src/text-part.tsx
+++ b/packages/typescript/ai-preact-ui/src/text-part.tsx
@@ -73,7 +73,6 @@ export function TextPart({
   return (
     <div className={combinedClassName || undefined}>
       <Markdown
-        // @ts-expect-error - Plugin type incompatibility between unified and preact-md
         rehypePlugins={[rehypeRaw, rehypeHighlight]}
         remarkPlugins={[remarkGfm]}
       >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27b3f32f..4d05d95f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -783,8 +783,8 @@ importers:
         specifier: '>=10.11.0'
         version: 10.28.0
       preact-md:
-        specifier: ^0.2.0
-        version: 0.2.0(preact@10.28.0)
+        specifier: ^0.2.1
+        version: 0.2.1(preact@10.28.0)
       rehype-highlight:
         specifier: ^7.0.2
         version: 7.0.2
@@ -6589,8 +6589,8 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
-  preact-md@0.2.0:
-    resolution: {integrity: sha512-82C8cD5Ss60u30z6DxsyLdrI2yQZ7KGUdJ/QnA2N5lU0rUv+s3ZX0U3wiDTeoxu/E0Ck5QIFuRYkMeHZgeG5hw==}
+  preact-md@0.2.1:
+    resolution: {integrity: sha512-IvZDZGix3v22iSqY0Bypt879WAh2uui6lyBCl4q3kafG2N/DwRpWUasFfg+ohXIa9xp6E+cyWc1H+6k7fYge0A==}
     peerDependencies:
       preact: ^10.0.0
 
@@ -14384,7 +14384,7 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  preact-md@0.2.0(preact@10.28.0):
+  preact-md@0.2.1(preact@10.28.0):
     dependencies:
       hast-util-sanitize: 5.0.2
       marked: 17.0.1

From ef0d14f50eca63c685a3e6b2440eccb0c0d6e58a Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Wed, 14 Jan 2026 18:03:02 +0100
Subject: [PATCH 5/5] Bump preact-md

---
 packages/typescript/ai-preact-ui/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/typescript/ai-preact-ui/README.md b/packages/typescript/ai-preact-ui/README.md
index deae147c..fb17ea36 100644
--- a/packages/typescript/ai-preact-ui/README.md
+++ b/packages/typescript/ai-preact-ui/README.md
@@ -5,14 +5,14 @@
 <br />
 
 <div align="center">
-<a href="https://npmjs.com/package/@tanstack/ai" target="\_parent">
+<a href="https://npmjs.com/package/@tanstack/ai-preact-ui" target="\_parent">
   <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ai.svg" />
 </a>
 <a href="https://github.com/TanStack/ai" target="\_parent">
 	  <img alt="" src="https://img.shields.io/github/stars/TanStack/ai.svg?style=social&label=Star" alt="GitHub stars" />
 </a>
-<a href="https://bundlephobia.com/result?p=@tanstack/ai@latest" target="\_parent">
-  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai@latest" />
+<a href="https://bundlephobia.com/result?p=@tanstack/ai-preact-ui@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ai-preact-ui@latest" />
 </a>
 </div>