Does Mastra + Assitant UI work with HITL tool calls ?? NEED EXAMPLE Desperatly :D

Basically trying to figure out if I can achieve this 1. assitant ui chat 2. make human in the loop tool call 3. calling another tool after since hu man gave confirmation I have setup a client tool in assitant ui and have 2 other tools in mastra but i cant get it to work the steps mention above .. it either just calls the client tool ... or call the client tool and continues without confimation 😄.. I saw that with aisdk this is probaly easier as the asstant ui docs mentions .. but there is no mentioning of how / if this HTIL is achievable with mastra
17 Replies
Abhi Aiyer
Abhi Aiyer5d ago
Hi! Lennart is updating the UI Dojo with these patterns so we’ll have more info. The above from assistant UI is a way to do it from there but we have this native in Mastra framework
Steffen
SteffenOP4d ago
@arpitBhalla Finally something that works ... I understand now that i needed a proxy route to convert the messages ( which feels not nice tbh) ... but now HITL works ... alos ... love to hear @Abhi Aiyer how this is possible nativley then.... so it will feel better 😄 @Abhi Aiyerhope you can show me native way soon ! i keep my eyes peeled on that dojo would also be curious if with ai-elements + mastra .. htil would be possible Also btw Tested assintant ui with Mastra Beta and IT didnt Work because the Stream/ui Endpoint was removed in the Beta ..wanted to Stick with the Beta but this ist dealbreaker for me 🥲. Hope u can fix 😉... Also 1 more annoying Thing of the Beta ist that ubchanged the Default Port to 0.0.0.0:8000 instead of locahost:41111 . a little Buggy now because the 0.0.0.0 stuff can Result in invalid Adress in some cases and when i click on the Link in Terminal IT ihave to Change IT Back to locahost
Mastra Triager
📝 Created GitHub issue: https://github.com/mastra-ai/mastra/issues/10817 🔍 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!
Steffen
SteffenOP4d ago
@Abhi Aiyer is there anything i can look at now for the native mastra way ... right now i would be stuck to nextjs if i dont have that
Steffen
SteffenOP4d ago
i cant replicate this route since my mastra project is external and ai dont want to put together my frontend and backend into 1 repo :D... i only have acces to client sdk ... but the client sdk doesnt support this .. bascially the route here imports mastra native sdk which i dont have eacces to since iam on differnt project 😄 stream.toUIMessageStream().pipeThrough(
No description
Abhi Aiyer
Abhi Aiyer4d ago
Im assuming you’ve taken a look at https://github.com/mastra-ai/ui-dojo ?
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.
Ward
Ward4d ago
Steffen
SteffenOP4d ago
@Abhi Aiyer yes but with the dojo is the same problem i cant use stream.toUIMessageStream().pipeThrough( if my mastra project is not in the same repo .. since this only works with native mastra sdk not client sdk also @Ward yes .. tried but my first expeirence again was that 1. last version is not installable because of depency issue 😄 2. and the version before that does not have human in the loop built in so I gave up immeadtly because i was annoyed hence you can see why iam desperate for a solution right now since none work I came up with depeeraty ideay to put the proxy route for converting messages on my mastra server as well so its 1. frontend calls my mastra proxy route to convert messages 2. the proxy route calls the real route also on my mastra server 😄 ....like simply because the client sdk does not natively give me a option for this .. feels REALLY bad if i have to use this 😄
Abhi Aiyer
Abhi Aiyer4d ago
Hmm, maybe the best solution is on the Assistant UI side https://github.com/assistant-ui/mastra-hitl
GitHub
https://aui-mastra-hitl.vercel.app/. Contribute to assistant-ui/mastra-hitl development by creating an account on GitHub.
Abhi Aiyer
Abhi Aiyer4d ago
The UI frameworks operate on the API Server URL not MastraClient We are slowly building one out in @mastra/react that leverages MastraClient but that doesnt really help you
Steffen
SteffenOP4d ago
what about the client-js supporting the message conversion ??? like as far as I understand unless assitant ui is not sending the correct message format to mastra --> HITL cant work so I need this proxy route that does this .. why is touimessgestream() not available on the client sdk side ??
Steffen
SteffenOP4d ago
No description
Abhi Aiyer
Abhi Aiyer4d ago
Using Vercel AI SDK | Frameworks | Mastra Docs
Learn how Mastra leverages the Vercel AI SDK library and how you can leverage it further with Mastra
Abhi Aiyer
Abhi Aiyer4d ago
You can transform the client stream
Steffen
SteffenOP4d ago
i see ... this sounds promising .. will try 😄 @Abhi Aiyer ok yes .. both your solution and Chatroute works ... which is what iam using now since it converts to aisdk autoamtically ... https://mastra.ai/docs/frameworks/agentic-uis/ai-sdk#chatroute or https://mastra.ai/docs/frameworks/agentic-uis/ai-sdk#client-side-stream-transformations so i can jsut 1. defien chatroute for my agent 2. --> and be sure to add this her : lastAssistantMessageIsCompleteWithToolCalls, .... otherwise its not working ... they forgot to mention that in their DOCS 🥲 .. the example helped me figure that out but still quite the goose chase ..
export default function PlaygroundPage() {
const runtime = useChatRuntime({
transport: new AssistantChatTransport({
api: "/api/playground/chat",
}),
sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
})

chatRoute()
When setting up a custom API route, use the chatRoute() utility to create a route handler that automatically formats the agent stream into an AI SDK-compatible format.

src/mastra/index.ts
import { Mastra } from "@mastra/core/mastra";
import { chatRoute } from "@mastra/ai-sdk";

export const mastra = new Mastra({
server: {
apiRoutes: [
chatRoute({
path: "/chat",
agent: "weatherAgent",
}),
],
},
});
export default function PlaygroundPage() {
const runtime = useChatRuntime({
transport: new AssistantChatTransport({
api: "/api/playground/chat",
}),
sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
})

chatRoute()
When setting up a custom API route, use the chatRoute() utility to create a route handler that automatically formats the agent stream into an AI SDK-compatible format.

src/mastra/index.ts
import { Mastra } from "@mastra/core/mastra";
import { chatRoute } from "@mastra/ai-sdk";

export const mastra = new Mastra({
server: {
apiRoutes: [
chatRoute({
path: "/chat",
agent: "weatherAgent",
}),
],
},
});
Thanks for the Help ! 🌻
Abhi Aiyer
Abhi Aiyer4d ago
Of course anytime!!

Did you find this page helpful?