feat: enhance agent functionality and improve configuration

- Added new external packages to next.config.ts for enhanced functionality.
- Updated acpAgent to include detailed role and capabilities descriptions for better user guidance.
- Integrated MongoDB memory options with MongosVector support in mongodb.ts.
- Refactored index.ts to improve agent management and telemetry options.
- Implemented new API routes for chat and completion functionalities, allowing for enhanced user interactions.
- Developed ChatExtra and Chat components to facilitate user input and display message streams.
- Created Completion component to handle user prompts and display completion results.

Author: ssdeanx

app/api/chat-extra/route.ts

@@ -0,0 +1,21 @@
+import { mastra } from "../../../src/mastra";
+import { RuntimeContext } from "@mastra/core/runtime-context";
+
+export async function POST(req: Request) {
+  const { messages, data } = await req.json();
+  const myAgent = mastra.getAgent("weatherAgent");
+
+  const runtimeContext = new RuntimeContext();
+
+  if (data) {
+    for (const [key, value] of Object.entries(data)) {
+      runtimeContext.set(key, value);
+    }
+  }
+
+  const stream = await myAgent.stream(messages, {
+    runtimeContext,
+    format: "aisdk",
+  });
+  return stream.toUIMessageStreamResponse();
+}

app/api/chat/route.ts

@@ -0,0 +1,9 @@
+import { mastra } from "../../../src/mastra";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+  const myAgent = mastra.getAgent("weatherAgent");
+  const stream = await myAgent.stream(messages, { format: "aisdk" });
+
+  return stream.toUIMessageStreamResponse();
+}

app/api/completion/route.ts

@@ -0,0 +1,11 @@
+import { mastra } from "../../../src/mastra";
+
+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",
+  });
+
+  return stream.toUIMessageStreamResponse();
+}

app/test/chat-extra.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { useState } from "react";
+import { DefaultChatTransport } from 'ai';
+
+export function ChatExtra() {
+  const [inputValue, setInputValue] = useState('')
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/chat',
+    }),
+  });
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: inputValue }, {
+      body: {
+        data: {
+          userId: "user123",
+          preferences: {
+            language: "en",
+            temperature: "celsius"
+          }
+        }
+      }
+    });
+  };
+
+  return (
+    <div>
+      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      <form onSubmit={handleFormSubmit}>
+        <input value={inputValue} onChange={e=>setInputValue(e.target.value)} placeholder="Name of city" />
+      </form>
+    </div>
+  );
+}

app/test/chat.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { useState } from "react";
+import { DefaultChatTransport } from 'ai';
+
+export function Chat() {
+  const [inputValue, setInputValue] = useState('')
+  const { messages, sendMessage} = useChat({
+    transport: new DefaultChatTransport({
+      api: 'http://localhost:4111/chat',
+    }),
+  });
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    sendMessage({ text: inputValue });
+  };
+
+  return (
+    <div>
+      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      <form onSubmit={handleFormSubmit}>
+        <input value={inputValue} onChange={e=>setInputValue(e.target.value)} placeholder="Name of city" />
+      </form>
+    </div>
+  );
+}

app/test/completion.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useCompletion } from "@ai-sdk/react";
+
+export function Completion() {
+  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
+    api: "api/completion"
+  });
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={handleInputChange} placeholder="Name of city" />
+      </form>
+      <p>Completion result: {completion}</p>
+    </div>
+  );
+}

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  serverExternalPackages: ["@mastra/*", "ai-sdk-provider-gemini-cli", "@mcpc-tech/*", "@openrouter/*", "@supermemory/*", "playwright-core", "crawlee"],
+  serverExternalPackages: ["@mastra/*", "cheerio", "jsdom", "ai-sdk-provider-gemini-cli", "@mcpc-tech/*", "@openrouter/*", "@supermemory/*", "playwright-core", "crawlee"],
   allowedDevOrigins: ['http://localhost:4111', '**'],
   typedRoutes: true,
   reactStrictMode: true,
@@ -15,46 +15,53 @@ const nextConfig: NextConfig = {
   cacheMaxMemorySize: 128 * 1024 * 1024, // 128 MB
   compiler: {
     emotion: true,
+    styledComponents: true,
+    styledJsx: {
+      useLightningcss: true,
+    }
   },
   // TODO: enable this when we have a proper domain
   compress: true,
   poweredByHeader: false,
-  basePath: "",
   trailingSlash: false,
-
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "**",
-      },
-    ],
-  },
-
 //  exportPathMap: async function () {
 //    return {
 //      "/": { page: "/" },
 //    };
 //  },
   experimental: {
-//    adapterPath: "./src/adapter/edge.ts",
     useSkewCookie: true,
     multiZoneDraftMode: true,
     appNavFailHandling: true,
     prerenderEarlyExit: true,
     linkNoTouchStart: true,
     caseSensitiveRoutes: true,
-//    clientParamParsingOrigins: [],
     dynamicOnHover: true,
     preloadEntriesOnStart: true,
-    fetchCacheKeyPrefix: "",
     isrFlushToDisk: true,
-//    urlImports: [],
     workerThreads: true,
     disableOptimizedLoading: true,
     hideLogsAfterAbort: true,
     optimizeCss: true,
-//    swcPlugins: [["./src/swc-plugin.js", {}]],
+    esmExternals: true,
+    scrollRestoration: true,
+    cpus: 16,
+//    cssChunking: true,
+ //   craCompat: true,
+//    validateRSCRequestHeaders: true,
+    webpackMemoryOptimizations: true,
+    webpackBuildWorker: true,
+ //   turbopackTreeShaking: true,
+    turbopackMinify: true,
+    turbopackImportTypeBytes: true,
+//    turbopackMemoryLimit: 8192,
+//    turbopackRemoveUnusedExports: true,
+    turbopackFileSystemCacheForDev: true,
+  //  turbopackFileSystemCacheForBuild: true,
+    useCache: true,
+    useLightningcss: true,
+    useWasmBinary: true,
+//    swcTraceProfiling: true,
 //    forceSwcTransforms: true,
     ppr: false,
   },