feat!: experimental features are now marked as stable (#326)

.changeset/soft-horses-hope.md

@@ -0,0 +1,8 @@
+---
+"@assistant-ui/react-hook-form": minor
+"@assistant-ui/react-ai-sdk": minor
+"@assistant-ui/react-ui": minor
+"@assistant-ui/react": minor
+---
+
+feat!: experimental features are now marked as stable

apps/www/components/claude/Claude.tsx

@@ -7,7 +7,7 @@ import {
   MessagePrimitive,
   ThreadPrimitive,
 } from "@assistant-ui/react";
-import { useMessageContext } from "@assistant-ui/react/experimental";
+import { useMessageContext } from "@assistant-ui/react";
 import * as Avatar from "@radix-ui/react-avatar";
 import { ArrowUpIcon, ClipboardIcon, ReloadIcon } from "@radix-ui/react-icons";
 import type { FC } from "react";

apps/www/pages/docs/advanced/ToolUI.mdx

@@ -7,7 +7,7 @@ You can show a custom UI when a tool is called to let the user know what is happ
 ### Tool UI Components
 
 ```tsx
-import { makeAssistantToolUI } from "@assistant-ui/react/experimental";
+import { makeAssistantToolUI } from "@assistant-ui/react";
 
 type WebSearchArgs = {
   query: string;
@@ -47,7 +47,7 @@ const MyApp = () => {
 ### Tool UI Hooks
 
 ```tsx
-import { makeAssistantToolUI } from "@assistant-ui/react/experimental";
+import { makeAssistantToolUI } from "@assistant-ui/react";
 
 type WebSearchArgs = {
   query: string;
@@ -97,7 +97,7 @@ const MyApp = () => {
 If you need access to component props, you can use the `useAssistantToolUI` hook.
 
 ```tsx {5-11}
-import { useAssistantToolUI } from "@assistant-ui/react/experimental";
+import { useAssistantToolUI } from "@assistant-ui/react";
 import { useCallback } from "react";
 
 const MyComponent = ({ product_id }) => {
@@ -129,7 +129,7 @@ const MyApp = () => {
 The following example shows a `date_picker` tool that the AI can call to collect a date from the user.
 
 ```tsx {12}
-import { makeAssistantToolUI } from "@assistant-ui/react/experimental"; 
+import { makeAssistantToolUI } from "@assistant-ui/react"; 
 import { DatePicker } from "@/components/datepicker";
 
 const DatePickerToolUI = makeAssistantToolUI<{}, { date: string }>({

apps/www/pages/docs/migrations/v0.1.md

@@ -86,15 +86,3 @@ The `RSCMessage` type was renamed to `VercelRSCMessage`.
 - import { unstable_useLocalRuntime, unstable_ChatModelAdapter } from "@assistant-ui/react";
 + import { useLocalRuntime, ChatModelAdapter } from "@assistant-ui/react";
 ```
-
-## `@assistant-ui/react/experimental` replaces `unstable_` imports
-
-```diff
-- import { unstable_VercelModelAdapter } from "@assistant-ui/react";
-+ import { VercelModelAdapter } from "@assistant-ui/react/experimental";
-```
-
-```diff
-- import { unstable_VercelAIThreadState } from "@assistant-ui/react";
-+ import { VercelAIThreadState } from "@assistant-ui/react/experimental";
-```

apps/www/pages/docs/migrations/v0.2.md

@@ -33,4 +33,15 @@ const AssistantMessage = () => {
     ...
   );
 };
+```
+
+## Experimental features are now stable
+
+All features that were previously marked as experimental have been promoted to stable.
+
+Update all imports from `@assistant-ui/react/experimental` to `@assistant-ui/react`.
+
+```diff
+- import { makeAssistantToolUI } from "@assistant-ui/react/experimental";
++ import { makeAssistantToolUI } from "@assistant-ui/react";
 ```

examples/with-react-hook-form/app/page.tsx

@@ -4,7 +4,7 @@ import { SignupForm } from "@/components/SignupForm";
 import { AssistantSidebar } from "@/components/ui/assistant-ui/assistant-sidebar";
 import { Form } from "@/components/ui/form";
 import { useAssistantForm } from "@assistant-ui/react-hook-form";
-import { useAssistantInstructions } from "@assistant-ui/react/experimental";
+import { useAssistantInstructions } from "@assistant-ui/react";
 import Link from "next/link";
 
 const SetFormFieldTool = () => {

packages/react-ai-sdk/src/core/VercelModelAdapter.tsx

@@ -10,7 +10,7 @@ import type {
   ChatModelAdapter,
   ChatModelRunOptions,
 } from "@assistant-ui/react";
-import type { ToolCallContentPart } from "@assistant-ui/react/experimental";
+import type { ToolCallContentPart } from "@assistant-ui/react";
 import { type CoreTool, type LanguageModel, streamText } from "ai";
 import { convertToCoreMessage } from "./convertToCoreMessage";
 

packages/react-ai-sdk/src/ui/utils/useVercelAIComposerSync.tsx

@@ -1,7 +1,4 @@
-import {
-  useThreadContext,
-  ComposerState,
-} from "@assistant-ui/react/experimental";
+import { useThreadContext, ComposerState } from "@assistant-ui/react";
 import { useEffect } from "react";
 import type { VercelHelpers } from "./VercelHelpers";
 import { StoreApi } from "zustand";

packages/react-ai-sdk/src/ui/utils/useVercelAIThreadSync.tsx

@@ -1,5 +1,8 @@
-import type { TextContentPart, ThreadMessage } from "@assistant-ui/react";
-import type { ToolCallContentPart } from "@assistant-ui/react/experimental";
+import type {
+  TextContentPart,
+  ThreadMessage,
+  ToolCallContentPart,
+} from "@assistant-ui/react";
 import type { Message } from "ai";
 import { useEffect, useMemo } from "react";
 import {

packages/react-hook-form/src/useAssistantForm.tsx

@@ -5,7 +5,7 @@ import {
   type ToolCallContentPartComponent,
   useAssistantContext,
   useAssistantToolUI,
-} from "@assistant-ui/react/experimental";
+} from "@assistant-ui/react";
 import { useEffect } from "react";
 import {
   type FieldValues,

packages/react/src/context/index.ts

@@ -1,2 +1,3 @@
+export * from "./providers";
 export * from "./stores";
 export * from "./react";

packages/react/src/context/stores/AssistantModelConfig.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { create } from "zustand";
-import type { ModelConfigProvider } from "../../utils/ModelConfigTypes";
+import type { ModelConfigProvider } from "../../types/ModelConfigTypes";
 import { ProxyConfigProvider } from "../../utils/ProxyConfigProvider";
 
 export type AssistantModelConfigState = Readonly<{

packages/react/src/context/stores/Composer.ts

@@ -3,7 +3,7 @@ import { type BaseComposerState, makeBaseComposer } from "./BaseComposer";
 import type { ThreadState } from "./Thread";
 import { ThreadActionsState } from "./ThreadActions";
 import { ReadonlyStore } from "../ReadonlyStore";
-import { Unsubscribe } from "../../utils/Unsubscribe";
+import { Unsubscribe } from "../../types/Unsubscribe";
 
 export type ComposerState = BaseComposerState &
   Readonly<{

packages/react/src/context/stores/ThreadViewport.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { create } from "zustand";
-import type { Unsubscribe } from "../../utils/Unsubscribe";
+import type { Unsubscribe } from "../../types/Unsubscribe";
 
 export type ThreadViewportState = Readonly<{
   isAtBottom: boolean;

packages/react/src/experimental.ts

@@ -1,34 +0,0 @@
-export type {
-  ImageContentPart,
-  ToolCallContentPart,
-  UIContentPart,
-} from "./types/AssistantTypes";
-
-export type {
-  ModelConfigProvider,
-  ModelConfig,
-} from "./utils/ModelConfigTypes";
-
-export type {
-  TextContentPartProps,
-  TextContentPartComponent,
-  ImageContentPartProps,
-  ImageContentPartComponent,
-  UIContentPartProps,
-  UIContentPartComponent,
-  ToolCallContentPartProps,
-  ToolCallContentPartComponent,
-} from "./types/ContentPartComponentTypes";
-
-export * from "./context";
-export { useAssistantInstructions } from "./model-config/useAssistantInstructions";
-export {
-  useAssistantTool,
-  type AssistantToolProps,
-} from "./model-config/useAssistantTool";
-export {
-  useAssistantToolUI,
-  type AssistantToolUIProps,
-} from "./model-config/useAssistantToolUI";
-export { makeAssistantTool } from "./model-config/makeAssistantTool";
-export { makeAssistantToolUI } from "./model-config/makeAssistantToolUI";

packages/react/src/index.ts

@@ -1,21 +1,8 @@
 export * from "./primitive-hooks";
 export * from "./primitives";
 export * from "./runtime";
-
-export type {
-  ThreadMessage,
-  AssistantMessage,
-  UserMessage,
-  AppendMessage,
-  AssistantContentPart,
-  UserContentPart,
-  AppendContentPart,
-  TextContentPart,
-} from "./types/AssistantTypes";
-
-export { AssistantRuntimeProvider } from "./context/providers/AssistantRuntimeProvider";
-
-// utils
-export type { Unsubscribe } from "./utils/Unsubscribe";
+export * from "./context";
+export * from "./model-config";
+export * from "./types";
 
 export * as INTERNAL from "./internal";

packages/react/src/model-config/index.ts

@@ -0,0 +1,8 @@
+export { makeAssistantTool } from "./makeAssistantTool";
+export { makeAssistantToolUI } from "./makeAssistantToolUI";
+export { useAssistantInstructions } from "./useAssistantInstructions";
+export { useAssistantTool, type AssistantToolProps } from "./useAssistantTool";
+export {
+  useAssistantToolUI,
+  type AssistantToolUIProps,
+} from "./useAssistantToolUI";

packages/react/src/model-config/useAssistantTool.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { useAssistantContext } from "../context/react/AssistantContext";
 import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";
-import type { Tool } from "../utils/ModelConfigTypes";
+import type { Tool } from "../types/ModelConfigTypes";
 
 export type AssistantToolProps<TArgs, TResult> = Tool<TArgs, TResult> & {
   toolName: string;

packages/react/src/model-config/useAssistantToolUI.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useEffect } from "react";
 import { useAssistantContext } from "../context/react/AssistantContext";
 import type { ToolCallContentPartComponent } from "../types/ContentPartComponentTypes";

packages/react/src/runtime/core/AssistantRuntime.tsx

@@ -1,5 +1,5 @@
-import type { ModelConfigProvider } from "../../utils/ModelConfigTypes";
-import type { Unsubscribe } from "../../utils/Unsubscribe";
+import type { ModelConfigProvider } from "../../types/ModelConfigTypes";
+import type { Unsubscribe } from "../../types/Unsubscribe";
 import type { ThreadRuntime } from "./ThreadRuntime";
 
 export type AssistantRuntime = ThreadRuntime & {

packages/react/src/runtime/core/ThreadRuntime.tsx

@@ -1,6 +1,6 @@
 import type { ThreadState } from "../../context";
 import { ThreadActionsState } from "../../context/stores/ThreadActions";
-import type { Unsubscribe } from "../../utils/Unsubscribe";
+import type { Unsubscribe } from "../../types/Unsubscribe";
 
 export type ThreadRuntime = Readonly<
   ThreadState &

packages/react/src/runtime/local/ChatModelAdapter.tsx

@@ -3,7 +3,7 @@ import type {
   AssistantContentPart,
   ThreadMessage,
 } from "../../types/AssistantTypes";
-import type { ModelConfig } from "../../utils/ModelConfigTypes";
+import type { ModelConfig } from "../../types/ModelConfigTypes";
 
 export type ChatModelRunResult = {
   content: AssistantContentPart[];

packages/react/src/runtime/local/LocalRuntime.tsx

@@ -6,8 +6,8 @@ import type {
 import {
   type ModelConfigProvider,
   mergeModelConfigs,
-} from "../../utils/ModelConfigTypes";
-import type { Unsubscribe } from "../../utils/Unsubscribe";
+} from "../../types/ModelConfigTypes";
+import type { Unsubscribe } from "../../types/Unsubscribe";
 import type { AssistantRuntime } from "../core/AssistantRuntime";
 import { MessageRepository } from "../utils/MessageRepository";
 import { generateId } from "../utils/idUtils";

packages/react/src/types/index.ts

@@ -0,0 +1,28 @@
+export type {
+  ThreadMessage,
+  AssistantMessage,
+  UserMessage,
+  AppendMessage,
+  AssistantContentPart,
+  UserContentPart,
+  AppendContentPart,
+  TextContentPart,
+  ImageContentPart,
+  ToolCallContentPart,
+  UIContentPart,
+} from "./AssistantTypes";
+
+export type {
+  TextContentPartProps,
+  TextContentPartComponent,
+  ImageContentPartProps,
+  ImageContentPartComponent,
+  UIContentPartProps,
+  UIContentPartComponent,
+  ToolCallContentPartProps,
+  ToolCallContentPartComponent,
+} from "./ContentPartComponentTypes";
+
+export type { ModelConfig } from "./ModelConfigTypes";
+
+export type { Unsubscribe } from "./Unsubscribe";

packages/react/src/utils/ProxyConfigProvider.ts

@@ -2,7 +2,7 @@
 import {
   type ModelConfigProvider,
   mergeModelConfigs,
-} from "./ModelConfigTypes";
+} from "../types/ModelConfigTypes";
 
 export class ProxyConfigProvider {
   private _providers = new Set<ModelConfigProvider>();

packages/react/src/utils/combined/createCombinedStore.ts

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import type { Unsubscribe } from "../Unsubscribe";
+import type { Unsubscribe } from "../../types/Unsubscribe";
 import { ReadonlyStore } from "../../context/ReadonlyStore";
 
 export type CombinedSelector<T extends Array<unknown>, R> = (...args: T) => R;