Browser compatibility issues when importing types from @mastra/ai-sdk in Vite frontend
Client SDK
Hi! After tinkering with basic examples over the last few months, I'm building a mastra project proper! I have a monorepo with a separate Vite + React frontend and a Mastra server (not using Next.js or another full-stack framework). I'm running into browser compatibility issues when trying to use Mastra types in my frontend code.
My setup:
server - Mastra backend with inbuilt Hono server
web - Vite + React frontend
ai - Shared package that re-exports from ai and @mastra/ai-sdk
The problem:
When I import from @mastra/ai-sdk in code that gets bundled for the browser, I get:
This happens because @mastra/ai-sdk depends on @mastra/core, which uses Node.js streams internally.
What I'm trying to do:
I want to use types like AgentDataPart from @mastra/ai-sdk in my React components (starting with Vercel's AI Elements) to properly type the streamed data from my Mastra agent. AgentDataPart depends on LLMStepResult from @mastra/core/agent.
I can work around this by using export type { ... } for type-only imports (which get erased at compile time), but the problem is AgentDataPart's dependency on LLMStepResult - even importing just the type causes the module resolution to pull in the server-side code.
Questions:
Is there a recommended pattern for using Mastra types in a browser-only frontend that doesn't use Next.js/Remix/etc?
Would it make sense for @mastra/ai-sdk to have a separate /types export that only includes type definitions without runtime dependencies on @mastra/core?
Is anyone else using Mastra with a separate Vite frontend? How do you handle type sharing?
Thanks!
My setup:
server - Mastra backend with inbuilt Hono server
web - Vite + React frontend
ai - Shared package that re-exports from ai and @mastra/ai-sdk
The problem:
When I import from @mastra/ai-sdk in code that gets bundled for the browser, I get:
This happens because @mastra/ai-sdk depends on @mastra/core, which uses Node.js streams internally.
What I'm trying to do:
I want to use types like AgentDataPart from @mastra/ai-sdk in my React components (starting with Vercel's AI Elements) to properly type the streamed data from my Mastra agent. AgentDataPart depends on LLMStepResult from @mastra/core/agent.
I can work around this by using export type { ... } for type-only imports (which get erased at compile time), but the problem is AgentDataPart's dependency on LLMStepResult - even importing just the type causes the module resolution to pull in the server-side code.
Questions:
Is there a recommended pattern for using Mastra types in a browser-only frontend that doesn't use Next.js/Remix/etc?
Would it make sense for @mastra/ai-sdk to have a separate /types export that only includes type definitions without runtime dependencies on @mastra/core?
Is anyone else using Mastra with a separate Vite frontend? How do you handle type sharing?
Thanks!
