coinbase · CarsonRoscoe · Mar 11, 2025 · Mar 7, 2025 · Mar 10, 2025 · Mar 10, 2025
@@ -0,0 +1,5 @@
+---
+"next-template": patch
+---
+
+Add next-template to workspace
@@ -41,7 +41,7 @@ async function messageAgent(userMessage: string): Promise<string | null> {
  * #### See Also
  * - The API logic in `/api/agent.ts`
  *
- * @returns {Object} An object containing:
+ * @returns {object} An object containing:
  * - `messages`: The conversation history.
  * - `sendMessage`: A function to send a new message.
  * - `isThinking`: Boolean indicating if the agent is processing a response.

@@ -1,11 +1,21 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+/**
+ * Metadata for the page
+ */
 export const metadata: Metadata = {
   title: "AgentKit Quickstart",
   description: "Generated by `create-onchain-agent`, a Next.js template for AgentKit",
 };
 
+/**
+ * Root layout for the page
+ *
+ * @param {object} props - The props for the root layout
+ * @param {React.ReactNode} props.children - The children for the root layout
+ * @returns {React.ReactNode} The root layout
+ */
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -16,9 +26,9 @@ export default function RootLayout({
       <body className="bg-gray-100 dark:bg-gray-900 dark flex flex-col min-h-screen">
         {/* Header (Fixed Height) */}
         <header className="py-6 flex items-center justify-between relative">
-          <img 
-            src="https://images.ctfassets.net/q5ulk4bp65r7/3TBS4oVkD1ghowTqVQJlqj/2dfd4ea3b623a7c0d8deb2ff445dee9e/Consumer_Wordmark.svg" 
-            alt="Coinbase" 
+          <img
+            src="https://images.ctfassets.net/q5ulk4bp65r7/3TBS4oVkD1ghowTqVQJlqj/2dfd4ea3b623a7c0d8deb2ff445dee9e/Consumer_Wordmark.svg"
+            alt="Coinbase"
             className="h-8 ml-4"
           />
 
@@ -28,16 +38,14 @@ export default function RootLayout({
         </header>
 
         {/* Main Content (Dynamic, Grows but Doesn't Force Scroll) */}
-        <main className="flex-grow flex items-center justify-center px-4">
-          {children}
-        </main>
+        <main className="flex-grow flex items-center justify-center px-4">{children}</main>
 
         {/* Footer (Fixed Height) */}
         <footer className="py-4 text-center text-gray-500 dark:text-gray-400 flex-none">
-          <img 
-            src="https://images.ctfassets.net/q5ulk4bp65r7/3TBS4oVkD1ghowTqVQJlqj/2dfd4ea3b623a7c0d8deb2ff445dee9e/Consumer_Wordmark.svg" 
-            alt="Coinbase" 
-            className="h-6 mx-auto mb-2" 
+          <img
+            src="https://images.ctfassets.net/q5ulk4bp65r7/3TBS4oVkD1ghowTqVQJlqj/2dfd4ea3b623a7c0d8deb2ff445dee9e/Consumer_Wordmark.svg"
+            alt="Coinbase"
+            className="h-6 mx-auto mb-2"
           />
           <div className="mt-2">
             <a
@@ -78,9 +86,7 @@ export default function RootLayout({
               CDP
             </a>
           </p>
-          <p className="text-xs text-gray-400 mt-2">
-            © {new Date().getFullYear()} Coinbase, Inc.
-          </p>
+          <p className="text-xs text-gray-400 mt-2">© {new Date().getFullYear()} Coinbase, Inc.</p>
         </footer>
       </body>
     </html>

@@ -4,6 +4,11 @@ import { useState, useEffect, useRef } from "react";
 import { useAgent } from "./hooks/useAgent";
 import ReactMarkdown from "react-markdown";
 
+/**
+ * Home page for the AgentKit Quickstart
+ *
+ * @returns {React.ReactNode} The home page
+ */
 export default function Home() {
   const [input, setInput] = useState("");
   const { messages, sendMessage, isThinking } = useAgent();
@@ -45,24 +50,26 @@ export default function Home() {
                     : "bg-gray-100 dark:bg-gray-700 self-start"
                 }`}
               >
-                <ReactMarkdown components={{
-                  a: (props) => (
-                    <a
-                      {...props}
-                      className="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ),
-                }}>{msg.text}</ReactMarkdown>
+                <ReactMarkdown
+                  components={{
+                    a: props => (
+                      <a
+                        {...props}
+                        className="text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-300"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      />
+                    ),
+                  }}
+                >
+                  {msg.text}
+                </ReactMarkdown>
               </div>
             ))
           )}
 
           {/* Thinking Indicator */}
-          {isThinking && (
-            <div className="text-right mr-2 text-gray-500 italic">🤖 Thinking...</div>
-          )}
+          {isThinking && <div className="text-right mr-2 text-gray-500 italic">🤖 Thinking...</div>}
 
           {/* Invisible div to track the bottom */}
           <div ref={messagesEndRef} />
@@ -75,8 +82,8 @@ export default function Home() {
             className="flex-grow p-2 rounded border dark:bg-gray-700 dark:border-gray-600"
             placeholder={"Type a message..."}
             value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && onSendMessage()}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === "Enter" && onSendMessage()}
             disabled={isThinking}
           />
           <button

@@ -1,5 +1,5 @@
 {
-  "name": "next",
+  "name": "next-template",
   "version": "0.1.0",
   "private": true,
   "scripts": {