Browser compatibility issues when importing types from @mastra/ai-sdk in Vite frontend
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!
5 Replies
Hello 👋
We have https://github.com/mastra-ai/ui-dojo which is a Vite React project. We import AgentDataPart here: https://github.com/mastra-ai/ui-dojo/blob/08becb1c57bd56125639abe2bcd7a734ec149ad0/src/pages/ai-sdk/tool-nested-streams.tsx#L18
When running the project locally I don't see the error you mentioned. Where do you see that in your code happening? Which Mastra versions are you using?
GitHub
GitHub - mastra-ai/ui-dojo: Mastra + UI Frameworks
Mastra + UI Frameworks. Contribute to mastra-ai/ui-dojo development by creating an account on GitHub.
GitHub
ui-dojo/src/pages/ai-sdk/tool-nested-streams.tsx at 08becb1c57bd561...
Mastra + UI Frameworks. Contribute to mastra-ai/ui-dojo development by creating an account on GitHub.
On
main the AgentDataPart does not come from @mastra/core: https://github.com/mastra-ai/mastra/blob/main/client-sdks/ai-sdk/src/transformers.ts#L79 - for the 0.x versions it's the same: https://github.com/mastra-ai/mastra/blob/0.x/client-sdks/ai-sdk/src/transformers.tsGitHub
mastra/client-sdks/ai-sdk/src/transformers.ts at 0.x · mastra-ai/m...
The TypeScript AI agent framework. ⚡ Assistants, RAG, observability. Supports any LLM: GPT-4, Claude, Gemini, Llama. - mastra-ai/mastra
GitHub
mastra/client-sdks/ai-sdk/src/transformers.ts at main · mastra-ai/...
The TypeScript AI agent framework. ⚡ Assistants, RAG, observability. Supports any LLM: GPT-4, Claude, Gemini, Llama. - mastra-ai/mastra
Sorted I think. tl;dr: monorepos are hard.
Very much appreciate the nudge to the ui-dojo project, I was aware of it prior but of course completely forgot about using it as a reference when it would've been most useful!!
My problem was mistakes in my monorepo build, which boiled down to using tsup when I didn't need to. It seemed to be stripping the 'type' from imports and therefore pulling in server-side code. Might have been a config issue and I might look into it again in the future but for now I have a working build using tsc for shared packages, including @mastra/ai-sdk. Simpler = better.
It's all good learnings, thanks again.
📝 Created GitHub issue: https://github.com/mastra-ai/mastra/issues/10753
🔍 If you're experiencing an error, please provide a minimal reproducible example whenever possible to help us resolve it quickly.
🙏 Thank you for helping us improve Mastra!
Great 👍