feat: shared @mastra/playground ui lib

[adeleke5140]

Playground UI

Bootstrap @mastra/playground with initial files and packages.

There is an assistant-ui bug with the assistant-ui primitives.

1. new lines are not formatted properly and show up as \n\n in the resulting output.
2. code block aren't properly formatted and the docs aren't really explicit as to whether to configure a syntax highlighter. Custom syntax highlighters added to the components object with syntax highlighting setup don't show up either.

Docs on Markdown primitive

This means there is an issue with the AssistantUI Primitive or there is a part of the setup we aren't getting right.

Steps to reproduce:

Build core, deployer and cli

cd packages/core && pnpm build
cd packages/cli && pnpm build
cd packages/deployer && pnpm build

Launch the mastra server for an example

cd examples/quick-start && pnpm i
node ../../packages/cli/dist/index.js dev

server should be running on port localhost:4111

Run the preview vite page in playground-ui

cd packages/playground-ui && pnpm i 
pnpm vite dev

frontend should be running on port localhost:5174

Test out the json by asking these two questions:

1. give me some cat details in json, showing, name, species, location and general popularity rate over 10
2. print hello world

First question should return below

Custom component

Inside of the defaultComponent object, replace the code element with MarkdownCodeBlock from markdown. Try out question again.

from this:

code: function Code({ className, ...props }) {
    const isCodeBlock = useIsMarkdownCodeBlock();
    return <code className={cn(!isCodeBlock && 'bg-muted rounded border font-semibold', className)} {...props} />;
 },
 CodeHeader,

to this:

code: props => <MarkdownCodeBlock {...props} />,
CodeHeader,

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
assistant-ui	❌ Failed (Inspect)			Feb 21, 2025 5:23pm
mastra	❌ Failed (Inspect)			Feb 21, 2025 5:23pm

5 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
bird-checker	⬜️ Skipped (Inspect)			Feb 21, 2025 5:23pm
crypto-chatbot	⬜️ Skipped (Inspect)			Feb 21, 2025 5:23pm
mastra-docs	⬜️ Skipped (Inspect)			Feb 21, 2025 5:23pm
openapi-spec-writer	⬜️ Skipped (Inspect)			Feb 21, 2025 5:23pm
travel-ai	⬜️ Skipped (Inspect)			Feb 21, 2025 5:23pm

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@mastra/[email protected]	network	0	77.3 kB	ehindero
npm/[email protected]	None	0	89.2 kB	daishi, drcmda, jeremyrh

🚮 Removed packages: npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected]

View full report↗︎

[promptless]

📝 Documentation updates detected! You can review documentation updates here

[adeleke5140]

will take a look in the morning

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3f59e46

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR