Skip to main content
Combine Mastra’s orchestration with Generative UI from Thesys to move beyond text-only agents. Render agentic UIs that include real-time dashboards, dynamic forms, and interactive workflows - all generated from your agent logic. With lightweight React or TypeScript integration, you can turn multi-agent workflows into production-ready applications that feel natural, adaptive, and user-friendly.
This guide assumes you have basic knowledge of Mastra and NextJS. You’ll also need a Thesys API key from the C1 Console.
1

Create a new NextJS project

Install the dependencies:
package.json
2

Create a new Mastra agent

You can follow the Mastra Quickstart to create a new Mastra agent or just follow along this guide. We’ll set up the example weather agent from the Quickstart but change the LLM provider to Thesys.
src/server/index.ts
3

Change the render function to use C1Chat

src/app/page.tsx
4

Implement the chat endpoint

We will modify the chat endpoint from the template app to use our newly created Mastra agent and return the response as a SSE stream.
src/app/api/chat/route.ts
5

Run the app

We need to modify the .env.local file to include the Thesys API key and then add the Mastra server to the next.config.ts file and start the app.
next.config.ts
Now simply start the app:

View the code

Find more examples and complete code on our GitHub repository.