Wire RN vs Crayon: React Native gen-UI alternative

Feature matrix

Where Crayon wins

Crayon's strongest card is chat ergonomics on the web. The message list, suggestion chips, slash-command UX, and the way structured outputs render inside chat bubbles feel more refined than the equivalents anywhere else in this category. If your product is a chat-first web app, Crayon punches above its size.

Crayon also fits Next.js well. App Router, server components, edge runtime: the integration story is documented and ergonomic. For a web team shipping a chat product on Next.js, that ecosystem fit is a real advantage.

Where Wire RN wins

Wire RN wins on the same three mobile realities that Crayon cannot address from the web side.

Hermes streaming. Wire RN ships an XHR-based SSE adapter that streams OpenAI, Anthropic, Gemini, and A2A cleanly on real devices. Crayon's streaming assumes browser ReadableStream, which Hermes does not implement.

Native renderer. Wire RN uses React Native primitives only. No DOM, no web UI library dependency, no WebView. The 11 built-in components render natively with native gestures and native scrolling. Crayon's components are DOM components and a WebView wrapper trades native feel for parity.

Flat component model. One component per turn, Zod-validated. The flat model is intentional. Recursive chat bubbles work on web because the viewport is wide and the cursor is precise. On a phone screen the user wants one decision per tap, one card at a time. Wire RN's renderer matches that interaction shape; Crayon's recursive bubbles are tuned for a different one.

Code-level comparison

Render a structured choice list emitted by an LLM. Crayon on the web first.

// Crayon — web React, recursive tree inside a chat bubble
import { CrayonChat, ChatMessage } from 'crayon'

export default function ChatPage() {
  return (
    <CrayonChat adapter={openaiAdapter}>
      {(messages) =>
        messages.map((m) => (
          <ChatMessage key={m.id} message={m} />
        ))
      }
    </CrayonChat>
  )
}
// LLM streams a tree; Crayon renders it inside a bubble.

Wire RN, same task on React Native:

// Wire RN — React Native, flat one-component-per-turn
import {
  WireAIProvider,
  WireAIRenderer,
  useWireAIThread,
} from 'wireai-rn'

function ChatScreen() {
  const { currentComponent } = useWireAIThread({
    adapter: 'anthropic',
    model: 'claude-sonnet-4.5',
  })
  return <WireAIRenderer component={currentComponent} />
}

export default function App() {
  return (
    <WireAIProvider components={builtIns} systemPrompt={prompt}>
      <ChatScreen />
    </WireAIProvider>
  )
}

Wire RN's renderer takes one validated component per turn: no tree walk, no per-node Zod check during streaming. The adapter handles Hermes-safe transport internally so you never touch fetch or ReadableStream.

Decision rubric

• Use Crayon if web. React on the browser, chat-as-product, Next.js stack, want the most polished message-list ergonomics in the category.
• Use Wire RN if mobile. React Native (Expo or bare), need Hermes streaming, want a card-flow renderer tuned for the phone screen.
• Use both if you ship both. Crayon for the web chat surface, Wire RN for the React Native target. Share LLM prompts and agent backend over A2A or HTTP. Don't try to use one library for both; the constraints are too different.

What is still rough in Wire RN 0.1.3

• Smaller built-in component library (11 vs Crayon's 15+).
• Chat-bubble patterns are not the focus; card flow is.
• A2UI protocol arrives in v0.3 (PH-1 demo June 2026), not 0.1.3.
• Newer ecosystem, fewer third-party articles than Crayon.
• Custom components require writing the Zod schema yourself.

FAQ

Where to start

Install wireai-rn@0.1.3 from npm. The 15-minute quickstart is at getwireai.com/docs. The repo is github.com/chohra-med/wireai-rn (MIT).

npm install wireai-rn@0.1.3 zod