feat(root): use JSX syntax for agent Card components

Switch support-agent from function-call API to JSX with per-file
@jsxImportSource pragma. Set jsx to react-jsx in tsconfig.

Made-with: Cursor

Author: ChmaraX

packages/novu/src/commands/init/templates/app-agent/ts/README-template.md

@@ -12,7 +12,7 @@ npm run dev
 
 2. Connect a chat platform in the [Novu Dashboard](https://dashboard.novu.co).
 
-3. Replace the demo handler in `app/novu/agents/support-agent.ts` with your LLM call.
+3. Replace the demo handler in `app/novu/agents/support-agent.tsx` with your LLM call.
 
 Your agent is served at `/api/novu` and handles incoming messages via the Novu Bridge protocol.
 
@@ -23,7 +23,7 @@ app/
   api/novu/route.ts        → Bridge endpoint serving your agent
   novu/agents/
     index.ts               → Agent exports
-    support-agent.ts       → Your agent handler (edit this!)
+    support-agent.tsx      → Your agent handler (edit this!)
   page.tsx                 → Landing page
 ```
 

…gent/ts/app/novu/agents/support-agent.ts …ent/ts/app/novu/agents/support-agent.tsxpackages/novu/src/commands/init/templates/app-agent/ts/app/novu/agents/support-agent.ts renamed to packages/novu/src/commands/init/templates/app-agent/ts/app/novu/agents/support-agent.tsx packages/novu/src/commands/init/templates/app-agent/ts/app/novu/agents/support-agent.ts renamed to packages/novu/src/commands/init/templates/app-agent/ts/app/novu/agents/support-agent.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource @novu/framework */
 import { agent, Card, CardText, Actions, Button } from '@novu/framework';
 
 export const supportAgent = agent('support-agent', {
@@ -8,17 +9,14 @@ export const supportAgent = agent('support-agent', {
     if (isFirstMessage) {
       ctx.metadata.set('topic', 'unknown');
       await ctx.reply(
-        Card({
-          title: "Hi, I'm Support Agent",
-          children: [
-            CardText('How can I help you today?'),
-            Actions([
-              Button({ id: 'topic-billing', label: 'Billing question', value: 'billing' }),
-              Button({ id: 'topic-technical', label: 'Technical issue', value: 'technical' }),
-              Button({ id: 'topic-other', label: 'Something else', value: 'other' }),
-            ]),
-          ],
-        })
+        <Card title="Hi, I'm Support Agent">
+          <CardText>How can I help you today?</CardText>
+          <Actions>
+            <Button id="topic-billing" label="Billing question" value="billing" />
+            <Button id="topic-technical" label="Technical issue" value="technical" />
+            <Button id="topic-other" label="Something else" value="other" />
+          </Actions>
+        </Card>
       );
 
       return;

packages/novu/src/commands/init/templates/app-agent/ts/app/page.tsx

@@ -13,7 +13,7 @@ export default function Home() {
           <h2>Get started</h2>
           <ol>
             <li>
-              Edit your agent in <code className={styles.code}>app/novu/agents/support-agent.ts</code>
+              Edit your agent in <code className={styles.code}>app/novu/agents/support-agent.tsx</code>
             </li>
             <li>
               Connect a chat platform in the{' '}

packages/novu/src/commands/init/templates/app-agent/ts/tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {