thesysdev / crayon

Generative UI SDK

Homepage · Documentation · Thesys

Crayon

Generative UI SDK for your AI agents.

Crayon is a UI framework for building agentic UI interfaces beyond just text. It is a set of extensible React components, lightweight state management and hooks to help you build your own UI that seamlessly integrates with any backend.

Quick Start

Install the Crayon package:

npm install @crayonai/react-core

Create a new Crayon component:

import { type ResponseTemplate, CrayonChat } from "@crayonai/react-core";

const templates: ResponseTemplate[] = [
  {
    name: "breakdown_expenses",
    component: BreakdownExpenses,
  },
]

export default function App() {
  return <CrayonChat templates={templates}/>;
}

Packages

• react-core: Core framework and hooks for managing state and agents
• react-ui: Modular UI components for use with Crayon