Align rendering of ai-sdk table with other patterns (#122)

* Add table for AI SDK generation and chat modes

* Duplicate table for AI SDK generation modes

apps/web/app/(main)/docs/ai-sdk/page.mdx

@@ -191,13 +191,44 @@ In chat mode, the prompt instructs the AI to respond conversationally first, the
 
 ## Which Mode?
 
-| | Generate | Chat |
-|---|---|---|
-| Output | JSONL only | Text + JSONL |
-| Text-only replies | No | Yes |
-| System prompt | `catalog.prompt()` | `catalog.prompt({ mode: "chat" })` |
-| Stream utility | `useUIStream` | `pipeJsonRender` + `useJsonRenderMessage` |
-| Use case | Playgrounds, builders | Chatbots, copilots |
+<div className="my-6 overflow-x-auto">
+  <table className="mdx-table w-full text-sm border-collapse">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Generate</th>
+        <th>Chat</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Output</td>
+        <td>JSONL only</td>
+        <td>Text + JSONL</td>
+      </tr>
+      <tr>
+        <td>Text-only replies</td>
+        <td>No</td>
+        <td>Yes</td>
+      </tr>
+      <tr>
+        <td>System prompt</td>
+        <td><code>catalog.prompt()</code></td>
+        <td><code>catalog.prompt({ mode: "chat" })</code></td>
+      </tr>
+      <tr>
+        <td>Stream utility</td>
+        <td><code>useUIStream</code></td>
+        <td><code>pipeJsonRender</code> + <code>useJsonRenderMessage</code></td>
+      </tr>
+      <tr>
+        <td>Use case</td>
+        <td>Playgrounds, builders</td>
+        <td>Chatbots, copilots</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 Learn more in the [Generation Modes](/docs/generation-modes) guide.