<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap" -->

---
title: July 2026 - Introducing @shadcn/helpers | daily.dev
description: shadcn is open sourcing a new package called @shadcn/helpers, starting with a helper that lets developers script chat conversations in code and run them...
canonical: https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: July 2026 - Introducing @shadcn/helpers | daily.dev
og:description: shadcn is open sourcing a new package called @shadcn/helpers, starting with a helper that lets developers script chat conversations in code and run them...
og:url: https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap
og:image: https://api.daily.dev/og/posts/4wI7Q4nAP.png
og:image:alt: July 2026 - Introducing @shadcn/helpers
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# July 2026 - Introducing @shadcn/helpers

**[The Foundation for your Design System - shadcn/ui](https://daily.dev/sources/shadcn-ui)** · 2 min read · 0 upvotes · 0 comments

## Summary

shadcn is open sourcing a new package called @shadcn/helpers, starting with a helper that lets developers script chat conversations in code and run them through the real useChat lifecycle without a model, API route, network request, or API key. Two adapters ship at launch: one for AI SDK and one for TanStack AI, both replaying native streaming events (including AG-UI events for TanStack AI) so reasoning, tool calls, loading states, and message components behave as they would in production. It's aimed at building components, creating demos, writing docs, and testing streaming chat UIs deterministically without backend dependencies.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://ui.shadcn.com/docs/changelog/2026-07-helpers>

## Questions this post answers

### How can I test a useChat streaming chat UI without calling a real AI model or API?

The @shadcn/helpers package lets developers script a conversation in code and run it through the real useChat lifecycle with no model, API route, network request, or API key needed. The UI receives native framework messages and streaming events, so reasoning, tool calls, loading states, and message components behave the same as in production, useful for building components, demos, docs, or deterministic tests.

_daily.dev surfaces practical patterns like this for developers building and testing AI chat interfaces._

### Does shadcn/helpers work with both Vercel AI SDK and TanStack AI?

Yes, the package ships with two adapters at launch: @shadcn/helpers/ai-sdk plugs into AI SDK's useChat as a transport, while @shadcn/helpers/tanstack-ai plugs into TanStack AI's useChat as a connection and streams real AG-UI events, giving both ecosystems deterministic, backend-free chat testing.

_developers weighing AI SDK against TanStack AI for chat UIs can track ecosystem tooling like this on daily.dev._

## Similar posts on daily.dev

- [shadcn Brings Conversational Primitives to shadcn/ui with New Chat Components](https://daily.dev/posts/shadcn-brings-conversational-primitives-to-shadcn-ui-with-new-chat-components-kemwvshut) · InfoQ · 0 upvotes · 0 comments
- [How to Build an AI Chat App Interface With the Vercel AI SDK and Shadcn/ui](https://daily.dev/posts/how-to-build-an-ai-chat-app-interface-with-the-vercel-ai-sdk-and-shadcn-ui-uvld4e08o) · freeCodeCamp · 1 upvotes · 0 comments
- [October 2026 - Trace, Code Block and AI Elements](https://daily.dev/posts/october-2026---trace-code-block-and-ai-elements-sgedfnk1f) · The Foundation for your Design System - shadcn/ui · 0 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#testing](https://daily.dev/tags/testing), [#shadcn](https://daily.dev/tags/shadcn), [#tanstack](https://daily.dev/tags/tanstack), [#ai-sdk](https://daily.dev/tags/ai-sdk)

[View this post on daily.dev](https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"July 2026 - Introducing @shadcn/helpers","url":"https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap"},"datePublished":"2026-08-23T12:18:15.108Z","dateModified":"2026-08-23T12:22:59.859Z","description":"shadcn is open sourcing a new package called @shadcn/helpers, starting with a helper that lets developers script chat conversations in code and run them...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3b86258dd5642f80248f2b59b98d216d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3b86258dd5642f80248f2b59b98d216d?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"The Foundation for your Design System - shadcn/ui","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"The Foundation for your Design System - shadcn/ui","logo":"https://media.daily.dev/image/upload/s--GiOq6F7Y--/f_auto,q_auto/v1787487441/logos/shadcn-ui?_a=BAMAMicg0","url":"https://daily.dev/sources/shadcn-ui"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,testing,shadcn,tanstack,ai-sdk","timeRequired":"PT2M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"The Foundation for your Design System - shadcn/ui","item":"https://daily.dev/sources/shadcn-ui"},{"@type":"ListItem","position":3,"name":"July 2026 - Introducing @shadcn/helpers"}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/july-2026---introducing-shadcn-helpers-4wi7q4nap#faq","mainEntity":[{"@type":"Question","name":"How can I test a useChat streaming chat UI without calling a real AI model or API?","acceptedAnswer":{"@type":"Answer","text":"The @shadcn/helpers package lets developers script a conversation in code and run it through the real useChat lifecycle with no model, API route, network request, or API key needed. The UI receives native framework messages and streaming events, so reasoning, tool calls, loading states, and message components behave the same as in production, useful for building components, demos, docs, or deterministic tests. daily.dev surfaces practical patterns like this for developers building and testing AI chat interfaces."}},{"@type":"Question","name":"Does shadcn/helpers work with both Vercel AI SDK and TanStack AI?","acceptedAnswer":{"@type":"Answer","text":"Yes, the package ships with two adapters at launch: @shadcn/helpers/ai-sdk plugs into AI SDK's useChat as a transport, while @shadcn/helpers/tanstack-ai plugs into TanStack AI's useChat as a connection and streams real AG-UI events, giving both ecosystems deterministic, backend-free chat testing. developers weighing AI SDK against TanStack AI for chat UIs can track ecosystem tooling like this on daily.dev."}}]}
```

