feat: implement workflow components and context

- Add WorkflowActions component for exporting SVG and viewing code.
- Create WorkflowCanvas component to manage workflow nodes and edges.
- Develop WorkflowHeader component for workflow selection and control.
- Implement WorkflowInfoPanel to display current workflow status and progress.
- Add WorkflowLegend to explain the visual elements in the workflow.
- Create WorkflowNode component to represent individual steps in the workflow.
- Implement WorkflowOutput to show the results of the workflow execution.
- Define workflow configurations in workflows.ts, including multiple workflows with steps and features.
- Establish WorkflowContext to manage state and actions related to workflows, including running, pausing, and stopping workflows.
- Integrate chat functionality for real-time workflow execution feedback.

Author: ssdeanx

app/api/chat/route.ts

@@ -3,7 +3,7 @@ import { UIMessage, convertToModelMessages } from 'ai';
 import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
 import { toAISdkFormat } from "@mastra/ai-sdk";
 import type { ChunkType, MastraModelOutput } from "@mastra/core/stream";
-
+import { RuntimeContext } from "@mastra/core/runtime-context";
 export const maxDuration = 30;
 export async function POST(req: Request) {
   const { messages }: {
@@ -12,9 +12,10 @@ export async function POST(req: Request) {
     const myAgent = mastra.getAgent("weatherAgent");
     const stream = await myAgent.stream(messages, {  });
     const uiMessageStream = createUIMessageStream({
+    
       execute: async ({ writer }) => {
         const formatted = toAISdkFormat(stream, { from: "agent" })!;
-
+        const runtimeContext = new RuntimeContext();
         // If the returned object is an async iterable, use for-await
       if (Symbol.asyncIterator in formatted) {
         for await (const part of formatted as AsyncIterable<any>) {

app/api/completion/route.ts

@@ -1,11 +1,12 @@
 import { mastra } from "../../../src/mastra";
-
+import { RuntimeContext } from "@mastra/core/runtime-context";
 export async function POST(req: Request) {
   const { prompt } = await req.json();
   const myAgent = mastra.getAgent("weatherAgent");
   const stream = await myAgent.stream([{ role: "user", content: prompt }], {
     format: "aisdk",
   });
+const runtimeContext = new RuntimeContext();
 
   return stream.toUIMessageStreamResponse();
 }

app/chat/AGENTS.md

@@ -1,9 +1,33 @@
-<!-- AGENTS-META {"title":"Chat App","version":"1.0.0","applies_to":"app/chat/","last_updated":"2025-11-29T00:00:00Z","status":"stable"} -->
+<!-- AGENTS-META {"title":"Chat App","version":"1.1.0","applies_to":"app/chat/","last_updated":"2025-11-29T00:00:00Z","status":"stable"} -->
 # App/Chat
 
 ## Overview
 
-The `/chat` route provides a rich AI chat interface built with **AI Elements** (30 components) integrated with **26+ Mastra agents**. Uses AI SDK v5 patterns with streaming, reasoning display, tool execution, and source citations.
+The `/chat` route provides a rich AI chat interface built with **AI Elements** (30 components) integrated with **26+ Mastra agents**. Uses `@ai-sdk/react` with `useChat` and `DefaultChatTransport` to stream responses from Mastra's `/chat` route.
+
+## AI SDK Integration
+
+Uses `useChat` from `@ai-sdk/react` with `DefaultChatTransport`:
+
+```tsx
+import { useChat } from "@ai-sdk/react"
+import { DefaultChatTransport } from "ai"
+
+const { messages, sendMessage, stop, status } = useChat({
+  transport: new DefaultChatTransport({
+    api: "http://localhost:4111/chat",
+    prepareSendMessagesRequest({ messages }) {
+      return {
+        body: {
+          messages,
+          resourceId: selectedAgent,
+          data: { agentId: selectedAgent },
+        },
+      }
+    },
+  }),
+})
+```
 
 ## Architecture
 

app/chat/components/agent-suggestions.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import {
+  Suggestions,
+  Suggestion,
+} from "@/src/components/ai-elements/suggestion"
+
+export interface AgentSuggestionsProps {
+  suggestions: string[]
+  onSelect: (suggestion: string) => void
+  disabled?: boolean
+}
+
+export function AgentSuggestions({
+  suggestions,
+  onSelect,
+  disabled = false,
+}: AgentSuggestionsProps) {
+  if (suggestions.length === 0) return null
+
+  return (
+    <Suggestions className="py-2">
+      {suggestions.map((suggestion) => (
+        <Suggestion
+          key={suggestion}
+          suggestion={suggestion}
+          onClick={onSelect}
+          disabled={disabled}
+        />
+      ))}
+    </Suggestions>
+  )
+}
+
+export const DEFAULT_SUGGESTIONS: Record<string, string[]> = {
+  weatherAgent: [
+    "What's the weather in Tokyo?",
+    "Will it rain tomorrow in NYC?",
+    "Weather forecast for London this week",
+  ],
+  researchAgent: [
+    "Research the latest AI trends",
+    "Find papers on transformer architecture",
+    "Summarize recent developments in quantum computing",
+  ],
+  stockAnalysisAgent: [
+    "Analyze AAPL stock performance",
+    "Compare TSLA vs RIVN",
+    "What are the top tech stocks today?",
+  ],
+  copywriterAgent: [
+    "Write a product description for a smart watch",
+    "Create a tagline for a coffee brand",
+    "Draft an email subject line for a sale",
+  ],
+  dataIngestionAgent: [
+    "Parse this CSV data",
+    "Validate data structure",
+    "Import from JSON format",
+  ],
+  documentProcessingAgent: [
+    "Convert PDF to markdown",
+    "Extract text from this document",
+    "Chunk this content for RAG",
+  ],
+  default: [
+    "What can you help me with?",
+    "Tell me about your capabilities",
+    "Show me an example",
+  ],
+}
+
+export function getSuggestionsForAgent(agentId: string): string[] {
+  return DEFAULT_SUGGESTIONS[agentId] || DEFAULT_SUGGESTIONS.default
+}

app/chat/components/chat-input.tsx

@@ -11,23 +11,42 @@ import {
   PromptInputAttachment,
 } from "@/src/components/ai-elements/prompt-input"
 import { useChatContext } from "@/app/chat/providers/chat-context"
+import { AgentSuggestions, getSuggestionsForAgent } from "./agent-suggestions"
 import { PaperclipIcon, SquareIcon } from "lucide-react"
+import { useMemo } from "react"
 
 export function ChatInput() {
-  const { sendMessage, stopGeneration, isLoading, status, agentConfig } =
+  const { sendMessage, stopGeneration, isLoading, status, agentConfig, selectedAgent, messages } =
     useChatContext()
 
   const supportsFiles = agentConfig?.features.fileUpload ?? false
+  const showSuggestions = messages.length === 0 && !isLoading
+
+  const suggestions = useMemo(
+    () => getSuggestionsForAgent(selectedAgent),
+    [selectedAgent]
+  )
 
   const handleSubmit = async (message: { text: string; files: unknown[] }) => {
     if (message.text.trim()) {
       await sendMessage(message.text, message.files as File[])
     }
   }
 
+  const handleSuggestionClick = (suggestion: string) => {
+    sendMessage(suggestion)
+  }
+
   return (
     <footer className="border-t border-border p-4">
-      <div className="mx-auto max-w-3xl">
+      <div className="mx-auto max-w-3xl space-y-3">
+        {showSuggestions && (
+          <AgentSuggestions
+            suggestions={suggestions}
+            onSelect={handleSuggestionClick}
+            disabled={isLoading}
+          />
+        )}
         <PromptInput
           onSubmit={handleSubmit}
           className="rounded-lg border shadow-sm"