shadcn/helpers Open-Sourced: createChat Makes AI Component Testing More Efficient

shadcn Launches a New Open-Source Utility Package

The shadcn team has officially open-sourced @shadcn/helpers — a new package offering small, focused utility functions designed to help developers build and test components faster. For frontend developers who have long worked within the shadcn/ui ecosystem, this is a noteworthy addition that abstracts recurring pain points in the development process into reusable utility functions.

About shadcn/ui: shadcn/ui is not a traditional component library. Created by shadcn (Shadid Haque), it follows a unique "copy-paste" distribution model rather than "install as a dependency" — developers bring component source code directly into their projects for full control, while building on Radix UI and Tailwind CSS for both accessibility and styling flexibility. This philosophy of being "not a library, but a building system" helped it become one of the fastest-growing frontend projects on GitHub within just two years.

Consistent with shadcn's design philosophy, @shadcn/helpers doesn't aim to be a large, all-encompassing framework. Instead, it follows the principle of being "small and focused," honing each utility function into a precise tool for solving specific problems. This modular approach reduces cognitive overhead for developers and makes the tools easier to compose and integrate.

createChat: A Powerful Tool for AI Component Development

The first core feature of the package is createChat, designed specifically for the AI SDK and TanStack AI. It addresses a universally common challenge in AI application development: how to reliably test and demo chat components without a real backend or LLM calls.

Technical Background: Vercel AI SDK is one of the most widely used AI frontend frameworks today, encapsulating communication logic with major LLM APIs from OpenAI, Anthropic, Google, and others, while providing React hooks like useChat and useCompletion. Its core capability lies in abstracting Server-Sent Events (SSE) and streaming — LLMs return generated content token by token rather than as a complete response at once. This streaming lifecycle involves multiple states such as loading, streaming, error, and done, making component testing far more complex than ordinary HTTP requests. TanStack AI extends the TanStack ecosystem (well known for TanStack Query) into AI state management, and both require solid testing infrastructure.

Scripted Conversation Flows

createChat allows developers to pre-write conversation scripts between a user and an assistant, then run that conversation through the useChat hook. You can define the entire interaction flow like writing a screenplay, and the tool will automatically "play it back."

The key is that components receive native messages delivered through the framework's real streaming lifecycle. This means components cannot distinguish whether messages come from a script or a real API — they process the data exactly as they would a real streaming response. This design ensures behavioral consistency between test and production environments, effectively preventing subtle bugs caused by inconsistent mock data structures.

Comprehensive Capability Coverage

createChat's capabilities go well beyond simple text conversations. According to the official documentation, it supports all common message types found in modern AI applications:

• Reasoning: Simulates the reasoning chain display of "thinking models" like OpenAI o1 and DeepSeek R1, which typically require a dedicated collapsible display area
• Tool calls: Tests scenarios where AI agents invoke external tools such as search, calculations, or database queries — these messages have a structured JSON format with rendering logic entirely different from plain text
• Data: Handles custom data streams
• Files: Tests file uploads and returns
• Sources: Validates source attribution in RAG (Retrieval-Augmented Generation) scenarios — where models attach cited document snippets and links alongside generated answers
• Parts: Supports multi-part message composition

This complete capability matrix covers virtually all mainstream interaction patterns in today's AI chat interfaces, enabling developers to perform fine-grained component debugging across complex scenarios.

Four Key Use Cases

The official documentation explicitly outlines four typical use cases for createChat, each corresponding to a real need in the AI application development workflow:

Component Building

When developing chat UI components, developers can obtain framework-compliant message streams without connecting to a real LLM API. This not only saves API call costs but also lets developers focus purely on UI logic without waiting for network responses or dealing with unpredictable model outputs.

Previews and Scripted Demos

When presenting products to clients or teams, scripted conversation demos are particularly valuable. createChat ensures every demo is perfectly consistent, avoiding unexpected outputs from real models and making demos more controlled and professional.

Deterministic Testing

This is perhaps the most valuable use case for createChat. The greatest challenge in testing AI applications is the non-determinism of LLM outputs — language models are probabilistic by nature: parameters like sampling temperature and Top-P mean the model may generate different content every time, even with identical inputs. This characteristic is the enemy of software testing and makes automated testing difficult to implement. Current industry strategies include setting temperature to 0, using LLM-as-Judge evaluators instead of exact assertions, and using mock data to isolate API calls. createChat is an engineering implementation of the third strategy, but its unique advantage is that mock data is delivered through the real streaming lifecycle, preserving the full authenticity of component behavior and making test results completely predictable — enabling stable, reliable unit tests and end-to-end tests.

Significance for the AI Frontend Ecosystem

From a broader perspective, the release of @shadcn/helpers reflects a maturing AI frontend toolchain. As frameworks like AI SDK and TanStack AI become more widespread, building AI interfaces is no longer difficult — but how to efficiently test and maintain those interfaces has consistently lacked mature solutions.

createChat fills exactly this gap. It cleverly reconciles two seemingly contradictory requirements — "decoupling from the real lifecycle" and "maintaining behavioral consistency" — and provides an engineering best practice for AI component development.

For teams building AI products with shadcn/ui, this tool is worth trying immediately. It not only accelerates day-to-day development but also significantly improves the testability and maintainability of AI interface code — precisely the kind of technical debt that many AI projects tend to accumulate during rapid iteration.

Summary

@shadcn/helpers opens with createChat, demonstrating the shadcn team's sharp insight into developer pain points. It doesn't aim to be grand — instead, it focuses on doing one thing well: making AI component building, demos, and testing faster and more reliable. As more utility functions are added over time, this package has the potential to become a go-to tool in every AI frontend developer's toolkit.