@mastra/react 0.0.5 → 0.0.6-alpha.1

package/dist/src/agent/hooks.d.ts

@@ -1,11 +1,12 @@
 import { ModelSettings } from './types';
 import { UIMessage } from '@ai-sdk/react';
+import { MastraUIMessage } from '../lib/ai-sdk';
 import { CoreUserMessage } from '@mastra/core/llm';
 import { RuntimeContext } from '@mastra/core/runtime-context';
 import { ChunkType, NetworkChunkType } from '@mastra/core/stream';
-export interface MastraChatProps<TMessage> {
+export interface MastraChatProps {
     agentId: string;
-    initializeMessages?: () => TMessage[];
+    initializeMessages?: () => MastraUIMessage[];
 }
 interface SharedArgs {
     coreUserMessages: CoreUserMessage[];
@@ -14,25 +15,32 @@ interface SharedArgs {
     modelSettings?: ModelSettings;
     signal?: AbortSignal;
 }
-export type GenerateArgs<TMessage> = SharedArgs & {
-    onFinish: ({ messages, tripwireReason }: {
-        messages: UIMessage[];
-        tripwireReason: string;
-    }) => TMessage[];
+export type SendMessageArgs = {
+    message: string;
+    coreUserMessages?: CoreUserMessage[];
+} & (({
+    mode: 'generate';
+} & Omit<GenerateArgs, 'coreUserMessages'>) | ({
+    mode: 'stream';
+} & Omit<StreamArgs, 'coreUserMessages'>) | ({
+    mode: 'network';
+} & Omit<NetworkArgs, 'coreUserMessages'>) | ({
+    mode?: undefined;
+} & Omit<StreamArgs, 'coreUserMessages'>));
+export type GenerateArgs = SharedArgs & {
+    onFinish?: (messages: UIMessage[]) => Promise<void>;
 };
-export type StreamArgs<TMessage> = SharedArgs & {
-    onChunk: (chunk: ChunkType, conversation: TMessage[]) => TMessage[];
+export type StreamArgs = SharedArgs & {
+    onChunk?: (chunk: ChunkType) => Promise<void>;
 };
-export type NetworkArgs<TMessage> = SharedArgs & {
-    onNetworkChunk: (chunk: NetworkChunkType, conversation: TMessage[]) => TMessage[];
+export type NetworkArgs = SharedArgs & {
+    onNetworkChunk?: (chunk: NetworkChunkType) => Promise<void>;
 };
-export declare const useChat: <TMessage>({ agentId, initializeMessages }: MastraChatProps<TMessage>) => {
-    network: ({ coreUserMessages, runtimeContext, threadId, onNetworkChunk, modelSettings, signal, }: NetworkArgs<TMessage>) => Promise<void>;
-    stream: ({ coreUserMessages, runtimeContext, threadId, onChunk, modelSettings, signal, }: StreamArgs<TMessage>) => Promise<void>;
-    generate: ({ coreUserMessages, runtimeContext, threadId, modelSettings, signal, onFinish, }: GenerateArgs<TMessage>) => Promise<void>;
+export declare const useChat: ({ agentId, initializeMessages }: MastraChatProps) => {
+    setMessages: import('react').Dispatch<import('react').SetStateAction<MastraUIMessage[]>>;
+    sendMessage: ({ mode, ...args }: SendMessageArgs) => Promise<void>;
     isRunning: boolean;
-    messages: TMessage[];
-    setMessages: import('react').Dispatch<import('react').SetStateAction<TMessage[]>>;
+    messages: MastraUIMessage[];
     cancelRun: () => void;
 };
 export {};

package/dist/src/index.d.ts

@@ -3,3 +3,4 @@ export * from './agent/hooks';
 export * from './agent/types';
 export { useMastraClient } from './mastra-client-context';
 export * from './lib/ai-sdk';
+export * from './ui';

package/dist/src/lib/ai-sdk/index.d.ts

@@ -1,3 +1,3 @@
-export * from './toUIMessage';
-export * from './toNetworkUIMessage';
-export * from './toAssistantUIMessage';
+export * from './types';
+export * from './utils/toUIMessage';
+export * from './utils/toAssistantUIMessage';

package/dist/src/lib/ai-sdk/memory/resolveInitialMessages.d.ts

@@ -0,0 +1,2 @@
+import { MastraUIMessage } from '../types';
+export declare const resolveInitialMessages: (messages: MastraUIMessage[]) => MastraUIMessage[];

package/dist/src/lib/ai-sdk/transformers/AISdkNetworkTransformer.d.ts

@@ -0,0 +1,10 @@
+import { NetworkChunkType } from '@mastra/core/stream';
+import { Transformer, TransformerArgs } from './types';
+import { MastraUIMessage } from '../types';
+export declare class AISdkNetworkTransformer implements Transformer<NetworkChunkType> {
+    transform({ chunk, conversation, metadata }: TransformerArgs<NetworkChunkType>): MastraUIMessage[];
+    private handleRoutingAgentConversation;
+    private handleAgentConversation;
+    private handleWorkflowConversation;
+    private handleToolConversation;
+}

package/dist/src/lib/ai-sdk/transformers/types.d.ts

@@ -0,0 +1,10 @@
+import { NetworkChunkType } from '@mastra/core/stream';
+import { MastraUIMessage, MastraUIMessageMetadata } from '../types';
+export interface TransformerArgs<T> {
+    chunk: NetworkChunkType;
+    conversation: MastraUIMessage[];
+    metadata: MastraUIMessageMetadata;
+}
+export interface Transformer<T> {
+    transform: (args: TransformerArgs<T>) => MastraUIMessage[];
+}

package/dist/src/lib/ai-sdk/types.d.ts

@@ -0,0 +1,14 @@
+import { UIMessage } from '@ai-sdk/react';
+export type MastraUIMessageMetadata = {
+    status?: 'warning' | 'error';
+} & ({
+    mode: 'generate';
+} | {
+    mode: 'stream';
+} | {
+    mode: 'network';
+    from?: 'AGENT' | 'WORKFLOW';
+    selectionReason?: string;
+    agentInput?: string | object | Array<object>;
+});
+export type MastraUIMessage = UIMessage<MastraUIMessageMetadata, any, any>;

package/dist/src/lib/ai-sdk/{toAssistantUIMessage.d.ts → utils/toAssistantUIMessage.d.ts}

@@ -1,5 +1,5 @@
 import { ThreadMessageLike } from '@assistant-ui/react';
-import { MastraUIMessage } from './toUIMessage';
+import { MastraUIMessage } from '../types';
 /**
  * Converts a Mastra UIMessage (from AI SDK) to a ThreadMessageLike format compatible with @assistant-ui/react.
  *

package/dist/src/lib/ai-sdk/{toUIMessage.d.ts → utils/toUIMessage.d.ts}

@@ -1,7 +1,6 @@
 import { ChunkType } from '@mastra/core/stream';
-import { UIMessage } from '@ai-sdk/react';
+import { MastraUIMessage, MastraUIMessageMetadata } from '../types';
 import { WorkflowStreamResult } from '@mastra/core/workflows';
-export type MastraUIMessage = UIMessage<any, any, any>;
 type StreamChunk = {
     type: string;
     payload: any;
@@ -9,8 +8,10 @@ type StreamChunk = {
     from: 'AGENT' | 'WORKFLOW';
 };
 export declare const mapWorkflowStreamChunkToWatchResult: (prev: WorkflowStreamResult<any, any, any, any>, chunk: StreamChunk) => WorkflowStreamResult<any, any, any, any>;
-export declare const toUIMessage: ({ chunk, conversation, }: {
+export interface ToUIMessageArgs {
     chunk: ChunkType;
-    conversation: UIMessage[];
-}) => MastraUIMessage[];
+    conversation: MastraUIMessage[];
+    metadata: MastraUIMessageMetadata;
+}
+export declare const toUIMessage: ({ chunk, conversation, metadata }: ToUIMessageArgs) => MastraUIMessage[];
 export {};

package/dist/src/mastra-client-context.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { MastraClient } from '@mastra/client-js';
+export type MastraClientContextType = MastraClient;
 export interface MastraClientProviderProps {
     children: ReactNode;
     baseUrl?: string;

package/dist/src/ui/Code/Code.d.ts

@@ -0,0 +1,13 @@
+import { BundledLanguage } from 'shiki/bundle/web';
+export interface CodeBlockProps {
+    code: string;
+    language: BundledLanguage;
+    className?: string;
+    cta?: React.ReactNode;
+}
+export declare const CodeBlockClass = "mastra:rounded-lg mastra:[&>pre]:p-4 mastra:overflow-hidden mastra:[&>pre]:!bg-surface4 mastra:[&>pre>code]:leading-5 mastra:relative";
+export declare const CodeBlock: ({ code, language, className, cta }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export interface CodeCopyButtonProps {
+    code: string;
+}
+export declare const CodeCopyButton: ({ code }: CodeCopyButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Code/highlight.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react';
+import { BundledLanguage } from 'shiki/bundle/web';
+export declare function highlight(code: string, lang: BundledLanguage): Promise<JSX.Element>;

package/dist/src/ui/Code/index.d.ts

@@ -0,0 +1 @@
+export * from './Code';

package/dist/src/ui/Entity/Entity.d.ts

@@ -0,0 +1,13 @@
+import { EntityVariant } from './types';
+export interface EntityProps extends React.ComponentPropsWithoutRef<'div'> {
+    variant?: EntityVariant;
+    initialExpanded?: boolean;
+    disabled?: boolean;
+}
+export declare const Entity: ({ className, variant, initialExpanded, disabled, ...props }: EntityProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EntityTriggerClass: string;
+export declare const EntityTriggerVariantClasses: Record<EntityVariant, string>;
+export declare const EntityTrigger: ({ className, children, ...props }: React.ComponentPropsWithoutRef<"button">) => import("react/jsx-runtime").JSX.Element;
+export declare const EntityContentClass: string;
+export declare const EntityContent: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EntityCaret: ({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Entity/Entity.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from '@storybook/react-vite';
+import { EntityVariant } from './types';
+interface ComponentProps {
+    className?: string;
+    additionalClass?: string;
+    variant?: EntityVariant;
+    requireApproval?: boolean;
+}
+declare const meta: {
+    title: string;
+    component: ({ className, additionalClass, variant, requireApproval }: ComponentProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const OverrideByCustomClass: Story;
+export declare const ExtandedByAdditionalClass: Story;
+export declare const Disabled: Story;

package/dist/src/ui/Entity/Entry.d.ts

@@ -0,0 +1,9 @@
+import { ElementType } from 'react';
+export declare const EntryClass = "mastra:space-y-2";
+export declare const Entry: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+type EntryTitleProps = React.ComponentPropsWithoutRef<'div'> & {
+    as?: ElementType;
+};
+export declare const EntryTitleClass = "mastra:font-mono mastra:text-sm mastra:text-text3";
+export declare const EntryTitle: ({ className, as: Root, ...props }: EntryTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/Entity/ToolApproval.d.ts

@@ -0,0 +1,10 @@
+export declare const ToolApprovalClass: string;
+export declare const ToolApproval: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolApprovalTitleClass: string;
+export declare const ToolApprovalTitle: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolApprovalHeaderClass: string;
+export declare const ToolApprovalHeader: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolApprovalContentClass: string;
+export declare const ToolApprovalContent: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolApprovalActionsClass: string;
+export declare const ToolApprovalActions: ({ className, ...props }: React.ComponentPropsWithoutRef<"div">) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Entity/context.d.ts

@@ -0,0 +1,10 @@
+import { EntityVariant } from './types';
+export type EntityContextType = {
+    expanded: boolean;
+    setExpanded: (expanded: boolean) => void;
+    variant: EntityVariant;
+    disabled: boolean;
+};
+export declare const EntityContext: import('react').Context<EntityContextType>;
+export declare const EntityProvider: import('react').Provider<EntityContextType>;
+export declare const useEntity: () => EntityContextType;

package/dist/src/ui/Entity/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Entity';
+export { useEntity } from './context';
+export * from './ToolApproval';
+export * from './Entry';

package/dist/src/ui/Entity/types.d.ts

@@ -0,0 +1 @@
+export type EntityVariant = 'initial' | 'agent' | 'workflow' | 'tool' | 'memory';

package/dist/src/ui/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface IconProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const IconSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const Icon: ({ children, className, size, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/src/ui/IconButton/IconButton.d.ts

@@ -0,0 +1,8 @@
+import { IconProps } from '../Icon/Icon';
+export interface IconButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+    children: React.ReactNode;
+    tooltip: React.ReactNode;
+    size?: IconProps['size'];
+}
+export declare const IconButtonClass = "mastra:text-text3 mastra:hover:text-text6 mastra:active:text-text6 mastra:hover:bg-surface4 mastra:active:bg-surface5 mastra:rounded-md mastra:cursor-pointer";
+export declare const IconButton: ({ children, tooltip, size, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/ui/IconButton/index.d.ts

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/src/ui/Icons/AgentIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const AgentIcon: ({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Icons/ToolsIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ToolsIcon: ({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Icons/WorkflowIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const WorkflowIcon: ({ className, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AgentIcon';
+export * from './ToolsIcon';
+export * from './WorkflowIcon';

package/dist/src/ui/Message/Message.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
+    position: 'left' | 'right';
+}
+export declare const MessageClass = "mastra:flex mastra:flex-col mastra:w-full mastra:py-4 mastra:gap-2 mastra:group";
+export declare const Message: ({ position, className, children, ...props }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export interface MessageContentProps extends HTMLAttributes<HTMLDivElement> {
+    isStreaming?: boolean;
+}
+export declare const MessageContentClass = "mastra:max-w-4/5 mastra:py-2 mastra:text-text6 mastra:rounded-lg mastra-message-content mastra:text-md";
+export declare const MessageContent: ({ children, className, isStreaming, ...props }: MessageContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageActionsClass = "mastra:gap-2 mastra:flex mastra:opacity-0 mastra:group-hover:opacity-100 mastra:group-focus-within:opacity-100 mastra:items-center";
+export declare const MessageActions: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageUsagesClass = "mastra:flex mastra:gap-2 mastra:items-center";
+export declare const MessageUsages: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageUsageClass = "mastra:flex mastra:gap-2 mastra:items-center mastra:font-mono mastra:text-xs mastra:bg-surface3 mastra:rounded-lg mastra:px-2 mastra:py-1";
+export declare const MessageUsage: ({ children, className, ...props }: HTMLAttributes<HTMLDListElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageUsageEntryClass = "mastra:text-text3 mastra:text-xs mastra:flex mastra:gap-1 mastra:items-center";
+export declare const MessageUsageEntry: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageUsageValueClass = "mastra:text-text6 mastra:text-xs";
+export declare const MessageUsageValue: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageListClass = "mastra:overflow-y-auto mastra:h-full mastra-list";
+export declare const MessageList: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const MessageStreamingClass = "mastra:inline-block mastra:w-[2px] mastra:h-[1em] mastra:bg-text5 mastra:ml-0.5 mastra:align-text-bottom mastra:animate-pulse";
+export declare const MessageStreaming: ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Message/Message.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Streaming: Story;

package/dist/src/ui/Message/index.d.ts

@@ -0,0 +1 @@
+export * from './Message';

package/dist/src/ui/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { TooltipTriggerProps, TooltipContentProps } from '@radix-ui/react-tooltip';
+export interface TooltipProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+}
+export declare const Tooltip: ({ children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipContentClass = "mastra:bg-surface4 mastra:text-text6 mastra mastra:rounded-lg mastra:py-1 mastra:px-2 mastra:text-xs mastra:border mastra:border-border1 mastra-tooltip-enter";
+export declare const TooltipContent: ({ children, className, ...props }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipTrigger: (props: TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/ui/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/src/ui/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Entity';
+export * from './Code';
+export * from './Icon';
+export * from './IconButton';
+export * from './Icons';
+export * from './Tooltip';
+export * from './Message';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mastra/react",
-  "version": "0.0.5",
+  "version": "0.0.6-alpha.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mastra-ai/mastra.git",
@@ -12,32 +12,64 @@
   "homepage": "https://mastra.ai",
   "license": "Apache-2.0",
   "type": "module",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/react.css"
+  },
   "files": [
     "dist",
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "@mastra/client-js": "0.15.2"
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "hast-util-to-jsx-runtime": "^2.3.6",
+    "lucide-react": "^0.522.0",
+    "shiki": "^1.29.2",
+    "tailwind-merge": "^3.3.1",
+    "@mastra/client-js": "0.16.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^2.0.57",
     "@assistant-ui/react": "^0.10.45",
+    "@storybook/react-vite": "^9.1.10",
+    "@tailwindcss/vite": "^4.1.13",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.3",
+    "@vitejs/plugin-react": "^5.0.4",
     "@vitest/ui": "^3.2.4",
-    "eslint": "^9.35.0",
+    "eslint": "^9.36.0",
+    "eslint-plugin-storybook": "^9.1.10",
     "rollup-plugin-node-externals": "^8.0.1",
+    "storybook": "^9.1.10",
+    "tailwindcss": "^4",
     "typescript": "^5.8.3",
-    "vite": "^7.1.7",
+    "vite": "^7.1.9",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@mastra/core": "0.20.2"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "@mastra/core": "0.21.0-alpha.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   },
   "scripts": {
     "build": "vite build",
@@ -45,6 +77,8 @@
     "test": "vitest",
     "test:watch": "vitest --watch",
     "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }