Skip to main content

Introduction

Crayon is a UI toolkit for building AI agents.

What is Crayon?​

Crayon is a lightweight UI toolkit for building AI agents that can be integrated with any backend framework.
It is composed of two libraries that can be used independently but are designed to work together seamlessly to create engaging and functional Agents.

Core​

The core is a React based library that abstracts away the state management and backend integration. It is extremely lightweight and can be integrated with any HTTP server including but not limited to LangChain, CrewAI or a simple FastAPI server serving a LLM driven agent.

Component Library​

The component library is a set of beautifully designed & accessible UI components that are designed to work together to provide a live & responsive end-user experience for your AI applications.
It is built on top of headless Radix components and the Shell bridges the core and this component library to provide a seamless developer experience.

Generative UI & Crayon​

While Crayon is agnostic to the use case, one of the key reasons we made it is to power Generative UI interfaces.
We believe that Generative UI represents the next paradigm shift in how we interact with AI and we want to make it easier for everyone to build them. See Generative UI for more details.

What can I build with Crayon?​

Agents, Chatbots, Copilots - pretty much any application that is powered by an LLM can be built with Crayon.
Its designed to be extremely lightweight and work with any backend framework - LangChain, CrewAI or a simple FastAPI server integrated with OpenAI, Anthropic, Google Gemini, etc.

Features​

  • Customizable: Crayon exposes both overridable styled components and raw hooks that allow you to customize the UI to your liking.
  • Backend Agnostic: Crayon is designed to work with any backend framework and doesn't mandate any specific architecture or data model. It can be adapted to any existing backend by implementing a few simple interfaces.
  • Batteries Included: Crayon comes together with a set of components that allow you to build a fully functional agentic interface with minimal effort.
  • Extremely Lightweight: Crayon core is designed to be extremely lightweight and doesn't add any overhead to your application beyond a few simple libraries.
  • Themeable, Accessible & Responsive - Crayon components are designed to be themeable, accessible & responsive across all surfaces and all interaction patterns - Chatbots, Agents, Copilots, etc.

FAQs​

Why did we build Crayon?​

We believe that the future of AI is not just about creating more powerful LLMs, but also about creating more engaging and accessible applications that can be used by everyone.
We want to make it easier for developers to build AI applications and we believe that the best way to do this is to create a set of tools that can be adapted into any existing backend framework.

Why a new component library?​

We started with off the shelf component libraries but realized that they needed some adaptations to work within the context of a responsive chat interface. Since these components are used both within the Thesys Canvas & shipped to the end user, we decided to build our version based on the powerful Radix UI headless library.

How does this relate to Thesys Canvas?​

Crayon is a MIT licensed UI library independent of Thesys Canvas meant to be used by anyone building AI agents.
Thesys Canvas is a AI powered design and prototyping tool that allows you to create your own AI agents. The codegen feature on the canvas is powered by Crayon Component Library but Crayon has no dependency on Canvas itself.