diff --git a/src/lib/component-templates/codegen-utils.ts b/src/lib/component-templates/codegen-utils.ts
index 0e0b5eb..6f3ca3a 100644
--- a/src/lib/component-templates/codegen-utils.ts
+++ b/src/lib/component-templates/codegen-utils.ts
@@ -1,4 +1,5 @@
 import type { SchemaField } from "~/lib/faker-options";
+import type { TemplateOptions } from "./types";
 
 function normalize(s: string): string {
     return s.toLowerCase().replace(/[_\s-]/g, "");
@@ -72,14 +73,20 @@ export function buildFetchHook(
     hookName: string,
     endpointUrl: string,
     itemTypeName: string,
+    options?: TemplateOptions,
 ): string {
+    const tokenVal = options?.bearerToken || "YOUR_TOKEN_HERE";
+    const fetchArgs = options?.requiresAuth
+        ? `"${endpointUrl}", {\n    headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }\n  }`
+        : `"${endpointUrl}"`;
+
     return `function use${hookName}Data() {
-  const [data, setData] = useState<${itemTypeName}[] | ${itemTypeName} | null>(null);
+  const [data, setData] = useState<${itemTypeName}[] | ${itemTypeName} | undefined>(undefined);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    fetch("${endpointUrl}")
+    fetch(${fetchArgs})
       .then((res) => {
         if (!res.ok) throw new Error(\`Request failed: \${res.status}\`);
         return res.json();
@@ -104,13 +111,22 @@ ${fieldLines.map((l) => `  ${l}`).join("\n")}
  * `renderFn` is a JS expression (string) that maps a single item to an
  * HTML string — the caller provides the item-level template string.
  */
-export function buildHtmlFetchScript(endpointUrl: string, renderFn: string): string {
+export function buildHtmlFetchScript(
+    endpointUrl: string,
+    renderFn: string,
+    options?: TemplateOptions,
+): string {
+    const tokenVal = options?.bearerToken || "YOUR_TOKEN_HERE";
+    const fetchArgs = options?.requiresAuth
+        ? `"${endpointUrl}", {\n        headers: {\n          "Authorization": "Bearer ${tokenVal}"\n        }\n      }`
+        : `"${endpointUrl}"`;
+
     return `  async function loadData() {
     const root = document.getElementById('root');
     const err  = document.getElementById('error');
     root.innerHTML = '<p class="loading">Loading…</p>';
     try {
-      const res = await fetch("${endpointUrl}");
+      const res = await fetch(${fetchArgs});
       if (!res.ok) throw new Error('HTTP ' + res.status);
       const json = await res.json();
       const items = Array.isArray(json) ? json : [json];
diff --git a/src/lib/component-templates/comment-item.ts b/src/lib/component-templates/comment-item.ts
index 90527d1..4508ee8 100644
--- a/src/lib/component-templates/comment-item.ts
+++ b/src/lib/component-templates/comment-item.ts
@@ -26,7 +26,7 @@ export const commentItemTemplate: ComponentTemplate = {
         "$faker.date.past",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "commentid", "uuid"]) ??
@@ -38,18 +38,16 @@ export const commentItemTemplate: ComponentTemplate = {
                 "person.firstName",
                 "internet.username",
             ]) ??
-            findField(fields, ["author", "fullname", "username", "name"]) ??
-            "author";
+            findField(fields, ["author", "fullname", "username", "name", "user"]) ??
+            fields.find((f) => f.fieldName !== idField)?.fieldName ??
+            fields[0]?.fieldName;
         const commentField =
             findFieldByDataType(fields, ["lorem.paragraph", "lorem.sentence", "lorem.sentences"]) ??
-            findField(fields, ["comment", "message", "content", "text"]) ??
-            "comment";
+            findField(fields, ["comment", "message", "content", "text", "body", "description"]) ??
+            fields.find((f) => f.fieldName !== idField && f.fieldName !== authorField)?.fieldName;
         const avatarField =
             findFieldByDataType(fields, ["image.avatar", "image.url", "image.datauri"]) ??
             findField(fields, ["avatar", "image", "photo"]);
-        const createdAtField =
-            findFieldByDataType(fields, ["date.recent", "date.past", "date.anytime"]) ??
-            findField(fields, ["createdat", "date", "timestamp"]);
 
         const interfaceLines = fields.map((f) => {
             const name = f.fieldName.includes(".") ? `"${f.fieldName}"?` : f.fieldName;
@@ -60,14 +58,14 @@ export const commentItemTemplate: ComponentTemplate = {
 
 ${buildInterface("Comment", interfaceLines)}
 
-${buildFetchHook("CommentItem", endpointUrl, "Comment")}
+${buildFetchHook("CommentItem", endpointUrl, "Comment", options)}
 
 export function CommentList() {
   const { data, loading, error } = useCommentItemData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const comments = Array.isArray(data) ? data : [data];
 
@@ -78,9 +76,8 @@ export function CommentList() {
 ${avatarField ? `          <img src={comment.${avatarField}} alt={comment.${authorField}} style={{ height: "2rem", width: "2rem", borderRadius: "9999px", objectFit: "cover", flexShrink: 0 }} />\n` : ""}          <div style={{ minWidth: 0, flex: 1, borderRadius: "12px", border: "1px solid #e4e4e7", padding: "0.75rem", backgroundColor: "#ffffff" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <span style={{ fontSize: "0.875rem", fontWeight: 600, color: "#18181b" }}>{comment.${authorField}}</span>
-${createdAtField ? `              <span style={{ fontSize: "0.75rem", color: "#a1a1aa" }}>{comment.${createdAtField}}</span>\n` : ""}            </div>
-            <p style={{ marginTop: "0.25rem", marginBottom: 0, fontSize: "0.875rem", color: "#52525b", lineHeight: 1.5 }}>{comment.${commentField}}</p>
-          </div>
+            </div>
+${commentField ? `            <p style={{ marginTop: "0.25rem", marginBottom: 0, fontSize: "0.875rem", color: "#52525b", lineHeight: 1.5 }}>{comment.${commentField}}</p>\n` : ""}          </div>
         </div>
       ))}
     </div>
@@ -88,19 +85,25 @@ ${createdAtField ? `              <span style={{ fontSize: "0.75rem", color: "#a
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
+        const idField =
+            findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
+            findField(fields, ["id", "commentid", "uuid"]) ??
+            fields[0]?.fieldName ??
+            "id";
         const authorField =
             findFieldByDataType(fields, [
                 "person.fullName",
                 "person.firstName",
                 "internet.username",
             ]) ??
-            findField(fields, ["author", "fullname", "username", "name"]) ??
-            "author";
+            findField(fields, ["author", "fullname", "username", "name", "user"]) ??
+            fields.find((f) => f.fieldName !== idField)?.fieldName ??
+            fields[0]?.fieldName;
         const commentField =
             findFieldByDataType(fields, ["lorem.paragraph", "lorem.sentence", "lorem.sentences"]) ??
-            findField(fields, ["comment", "message", "content", "text"]) ??
-            "comment";
+            findField(fields, ["comment", "message", "content", "text", "body", "description"]) ??
+            fields.find((f) => f.fieldName !== idField && f.fieldName !== authorField)?.fieldName;
         const avatarField =
             findFieldByDataType(fields, ["image.avatar", "image.url", "image.datauri"]) ??
             findField(fields, ["avatar", "image", "photo"]);
@@ -141,7 +144,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <div id="root" class="comment-list"></div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/dynamic-grid.ts b/src/lib/component-templates/dynamic-grid.ts
index 420f7c6..d3d1308 100644
--- a/src/lib/component-templates/dynamic-grid.ts
+++ b/src/lib/component-templates/dynamic-grid.ts
@@ -45,7 +45,7 @@ export const dynamicGridTemplate: ComponentTemplate = {
     description: "Adaptive UI card generated directly from schema fields and Faker types.",
     requiredFields: [],
     optionalFields: [],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const validFields = fields.filter((f) => f.fieldName.trim().length > 0);
 
         const idField =
@@ -165,14 +165,14 @@ export const dynamicGridTemplate: ComponentTemplate = {
 
 ${buildInterface("DataItem", interfaceLines)}
 
-${buildFetchHook("DataItem", endpointUrl, "DataItem")}
+${buildFetchHook("DataItem", endpointUrl, "DataItem", options)}
 
 export function DataCardList() {
   const { data, loading, error } = useDataItemData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a", fontFamily: "monospace" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444", fontFamily: "monospace" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const items = Array.isArray(data) ? data : [data];
 
@@ -235,7 +235,7 @@ ${detailFields
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
         const validFields = fields.filter((f) => f.fieldName.trim().length > 0);
 
         const idField =
@@ -367,7 +367,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <div id="root" class="grid"></div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/index.ts b/src/lib/component-templates/index.ts
index f0e827e..64bf4b8 100644
--- a/src/lib/component-templates/index.ts
+++ b/src/lib/component-templates/index.ts
@@ -47,7 +47,11 @@ export function matchTemplates(fields: SchemaField[], endpointPath: string = "")
 
         // Endpoint path keyword bonus
         let pathScoreBoost = 0;
-        const templateKeywords = [template.id, ...template.requiredFields];
+        const templateKeywords = [
+            template.id,
+            ...template.id.split("-"),
+            ...template.requiredFields,
+        ];
         if (normalizedPath) {
             for (const kw of templateKeywords) {
                 const normKw = normalize(kw);
@@ -117,20 +121,24 @@ export function getTemplateById(id: string): ComponentTemplate | undefined {
     return COMPONENT_TEMPLATES.find((t) => t.id === id);
 }
 
+import type { TemplateOptions } from "./types";
+
 export function generateCode(
     template: ComponentTemplate,
     fields: SchemaField[],
     endpointUrl: string,
+    options?: TemplateOptions,
 ): string {
-    return template.code(fields, endpointUrl);
+    return template.code(fields, endpointUrl, options);
 }
 
 export function generateHtmlCode(
     template: ComponentTemplate,
     fields: SchemaField[],
     endpointUrl: string,
+    options?: TemplateOptions,
 ): string {
-    return template.htmlCode ? template.htmlCode(fields, endpointUrl) : "";
+    return template.htmlCode ? template.htmlCode(fields, endpointUrl, options) : "";
 }
 
 export * from "./types";
diff --git a/src/lib/component-templates/post-card.ts b/src/lib/component-templates/post-card.ts
index 6126d38..14b0d81 100644
--- a/src/lib/component-templates/post-card.ts
+++ b/src/lib/component-templates/post-card.ts
@@ -29,7 +29,7 @@ export const postCardTemplate: ComponentTemplate = {
         "$faker.date.recent",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "postid", "uuid"]) ??
@@ -37,12 +37,23 @@ export const postCardTemplate: ComponentTemplate = {
             "id";
         const titleField =
             findFieldByDataType(fields, ["book.title", "lorem.sentence", "company.catchPhrase"]) ??
-            findField(fields, ["title"]) ??
-            "title";
+            findField(fields, ["title", "headline", "subject", "name"]);
         const contentField =
-            findFieldByDataType(fields, ["lorem.paragraph", "lorem.paragraphs", "person.bio"]) ??
-            findField(fields, ["content", "body", "paragraph"]) ??
-            "content";
+            findFieldByDataType(fields, [
+                "lorem.paragraph",
+                "lorem.paragraphs",
+                "person.bio",
+                "lorem.sentence",
+            ]) ??
+            findField(fields, [
+                "content",
+                "body",
+                "paragraph",
+                "comment",
+                "text",
+                "message",
+                "description",
+            ]);
         const authorField =
             findFieldByDataType(fields, [
                 "person.fullName",
@@ -51,8 +62,8 @@ export const postCardTemplate: ComponentTemplate = {
                 "book.author",
             ]) ?? findField(fields, ["author", "fullname", "username"]);
         const coverImageField =
-            findFieldByDataType(fields, ["image.url", "image.datauri"]) ??
-            findField(fields, ["coverimage", "image", "thumbnail"]);
+            findFieldByDataType(fields, ["image.url", "image.datauri", "image.avatar"]) ??
+            findField(fields, ["coverimage", "image", "thumbnail", "avatar", "photo"]);
         const publishedAtField =
             findFieldByDataType(fields, [
                 "date.anytime",
@@ -70,14 +81,14 @@ export const postCardTemplate: ComponentTemplate = {
 
 ${buildInterface("Post", interfaceLines)}
 
-${buildFetchHook("PostCard", endpointUrl, "Post")}
+${buildFetchHook("PostCard", endpointUrl, "Post", options)}
 
 export function PostCard() {
   const { data, loading, error } = usePostCardData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const posts = Array.isArray(data) ? data : [data];
 
@@ -85,10 +96,8 @@ export function PostCard() {
     <div style={{ display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }}>
       {posts.map((post) => (
         <article key={post.${idField}} style={{ overflow: "hidden", borderRadius: "12px", border: "1px solid #e4e4e7", backgroundColor: "#ffffff", boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" }}>
-${coverImageField ? `          <img src={post.${coverImageField}} alt={post.${titleField}} style={{ height: "10rem", width: "100%", objectFit: "cover" }} />\n` : ""}          <div style={{ padding: "1rem" }}>
-            <h3 style={{ margin: 0, fontWeight: 600, fontSize: "1rem", color: "#18181b" }}>{post.${titleField}}</h3>
-            <p style={{ marginTop: "0.25rem", marginBottom: 0, fontSize: "0.875rem", color: "#71717a", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{post.${contentField}}</p>
-            <div style={{ marginTop: "0.75rem", display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: "0.75rem", color: "#a1a1aa" }}>
+${coverImageField ? `          <img src={post.${coverImageField}} alt={${titleField ? `post.${titleField}` : `"Post image"`}} style={{ height: "10rem", width: "100%", objectFit: "cover" }} />\n` : ""}          <div style={{ padding: "1rem" }}>
+${titleField ? `            <h3 style={{ margin: 0, fontWeight: 600, fontSize: "1rem", color: "#18181b" }}>{post.${titleField}}</h3>\n` : ""}${contentField ? `            <p style={{ marginTop: ${titleField ? `"0.25rem"` : "0"}, marginBottom: 0, fontSize: "0.875rem", color: "#71717a", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{post.${contentField}}</p>\n` : ""}            <div style={{ marginTop: "0.75rem", display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: "0.75rem", color: "#a1a1aa" }}>
 ${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publishedAtField ? `              <span>{post.${publishedAtField}}</span>\n` : ""}            </div>
           </div>
         </article>
@@ -98,15 +107,26 @@ ${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publ
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
         const titleField =
             findFieldByDataType(fields, ["book.title", "lorem.sentence", "company.catchPhrase"]) ??
-            findField(fields, ["title"]) ??
-            "title";
+            findField(fields, ["title", "headline", "subject", "name"]);
         const contentField =
-            findFieldByDataType(fields, ["lorem.paragraph", "lorem.paragraphs", "person.bio"]) ??
-            findField(fields, ["content", "body", "paragraph"]) ??
-            "content";
+            findFieldByDataType(fields, [
+                "lorem.paragraph",
+                "lorem.paragraphs",
+                "person.bio",
+                "lorem.sentence",
+            ]) ??
+            findField(fields, [
+                "content",
+                "body",
+                "paragraph",
+                "comment",
+                "text",
+                "message",
+                "description",
+            ]);
         const authorField =
             findFieldByDataType(fields, [
                 "person.fullName",
@@ -115,8 +135,8 @@ ${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publ
                 "book.author",
             ]) ?? findField(fields, ["author", "fullname", "username"]);
         const coverImageField =
-            findFieldByDataType(fields, ["image.url", "image.datauri"]) ??
-            findField(fields, ["coverimage", "image", "thumbnail"]);
+            findFieldByDataType(fields, ["image.url", "image.datauri", "image.avatar"]) ??
+            findField(fields, ["coverimage", "image", "thumbnail", "avatar", "photo"]);
         const publishedAtField =
             findFieldByDataType(fields, [
                 "date.anytime",
@@ -128,6 +148,12 @@ ${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publ
         const coverHtml = coverImageField
             ? `\${${safeGet(coverImageField)} ? \`<img class="cover" src="\${${safeGet(coverImageField)}}" alt="cover">\` : ''}`
             : "";
+        const titleHtml = titleField
+            ? `\${${safeGet(titleField)} ? \`<div class="article-title">\${${safeGet(titleField)}}</div>\` : ''}`
+            : "";
+        const contentHtml = contentField
+            ? `\${${safeGet(contentField)} ? \`<div class="article-excerpt">\${${safeGet(contentField)}}</div>\` : ''}`
+            : "";
         const authorHtml = authorField
             ? `\${${safeGet(authorField)} ? \`<span>\${${safeGet(authorField)}}</span>\` : ''}`
             : "";
@@ -138,8 +164,8 @@ ${authorField ? `              <span>{post.${authorField}}</span>\n` : ""}${publ
         const renderFn = `item => \`<article class="article">
   ${coverHtml}
   <div class="article-body">
-    <div class="article-title">\${${safeGet(titleField)}}</div>
-    <div class="article-excerpt">\${${safeGet(contentField)}}</div>
+    ${titleHtml}
+    ${contentHtml}
     <div class="article-footer">${authorHtml}${dateHtml}</div>
   </div>
 </article>\``;
@@ -159,7 +185,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <div id="root" class="grid"></div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/product-card.ts b/src/lib/component-templates/product-card.ts
index a4462db..a46d8d3 100644
--- a/src/lib/component-templates/product-card.ts
+++ b/src/lib/component-templates/product-card.ts
@@ -29,7 +29,7 @@ export const productCardTemplate: ComponentTemplate = {
         "$faker.number.float",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "productid", "uuid"]) ??
@@ -42,12 +42,17 @@ export const productCardTemplate: ComponentTemplate = {
                 "food.dish",
                 "vehicle.vehicle",
             ]) ??
-            findField(fields, ["name", "productname", "title"]) ??
-            "name";
+            findField(fields, ["name", "productname", "title", "label"]) ??
+            fields[0]?.fieldName;
         const priceField =
-            findFieldByDataType(fields, ["commerce.price", "finance.amount"]) ??
-            findField(fields, ["price", "amount", "cost"]) ??
-            "price";
+            findFieldByDataType(fields, [
+                "commerce.price",
+                "finance.amount",
+                "number.float",
+                "number.int",
+            ]) ??
+            findField(fields, ["price", "amount", "cost", "value"]) ??
+            fields.find((f) => mapTsType(f.dataType) === "number")?.fieldName;
         const imageField =
             findFieldByDataType(fields, ["image.url", "image.datauri"]) ??
             findField(fields, ["image", "photo", "picture", "thumbnail", "cover"]);
@@ -79,14 +84,14 @@ export const productCardTemplate: ComponentTemplate = {
 
 ${buildInterface("Product", interfaceLines)}
 
-${buildFetchHook("ProductCard", endpointUrl, "Product")}
+${buildFetchHook("ProductCard", endpointUrl, "Product", options)}
 
 export function ProductCard() {
   const { data, loading, error } = useProductCardData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const products = Array.isArray(data) ? data : [data];
 
@@ -111,14 +116,12 @@ ${
             <div style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
               <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem" }}>
 ${categoryField ? `                {product.${categoryField} && <span style={{ fontSize: "10px", fontFamily: "monospace", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "#71717a" }}>{product.${categoryField}}</span>}\n` : ""}${brandField ? `                {product.${brandField} && <span style={{ fontSize: "10px", fontFamily: "monospace", color: "#a1a1aa" }}>{product.${brandField}}</span>}\n` : ""}              </div>
-              <p style={{ margin: 0, fontWeight: 600, fontSize: "1rem", color: "#18181b", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{product.${nameField}}</p>
-${descriptionField ? `              {product.${descriptionField} && <p style={{ margin: 0, fontSize: "0.75rem", color: "#71717a", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{product.${descriptionField}}</p>}\n` : ""}            </div>
+${nameField ? `              <p style={{ margin: 0, fontWeight: 600, fontSize: "1rem", color: "#18181b", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{product.${nameField}}</p>\n` : ""}${descriptionField ? `              {product.${descriptionField} && <p style={{ margin: 0, fontSize: "0.75rem", color: "#71717a", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{product.${descriptionField}}</p>}\n` : ""}            </div>
           </div>
 
           <div style={{ padding: "0.5rem 1rem 1rem 1rem", display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid #f4f4f5" }}>
             <div>
-              <span style={{ fontSize: "1.125rem", fontWeight: 700, color: "#18181b" }}>\${product.${priceField}}</span>
-${ratingField ? `              {product.${ratingField} && <span style={{ marginLeft: "0.5rem", fontSize: "0.75rem", color: "#f59e0b" }}>Rating: {product.${ratingField}}</span>}\n` : ""}            </div>
+${priceField ? `              <span style={{ fontSize: "1.125rem", fontWeight: 700, color: "#18181b" }}>\${product.${priceField}}</span>\n` : ""}${ratingField ? `              {product.${ratingField} && <span style={{ marginLeft: "0.5rem", fontSize: "0.75rem", color: "#f59e0b" }}>Rating: {product.${ratingField}}</span>}\n` : ""}            </div>
 
 ${
     inStockField
@@ -136,7 +139,7 @@ ${
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
         const nameField =
             findFieldByDataType(fields, [
                 "commerce.productName",
@@ -144,12 +147,17 @@ ${
                 "food.dish",
                 "vehicle.vehicle",
             ]) ??
-            findField(fields, ["name", "productname", "title"]) ??
-            "name";
+            findField(fields, ["name", "productname", "title", "label"]) ??
+            fields[0]?.fieldName;
         const priceField =
-            findFieldByDataType(fields, ["commerce.price", "finance.amount"]) ??
-            findField(fields, ["price", "amount", "cost"]) ??
-            "price";
+            findFieldByDataType(fields, [
+                "commerce.price",
+                "finance.amount",
+                "number.float",
+                "number.int",
+            ]) ??
+            findField(fields, ["price", "amount", "cost", "value"]) ??
+            fields.find((f) => mapTsType(f.dataType) === "number")?.fieldName;
         const imageField =
             findFieldByDataType(fields, ["image.url", "image.datauri"]) ??
             findField(fields, ["image", "photo", "picture", "thumbnail", "cover"]);
@@ -225,7 +233,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <div id="root" class="grid"></div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/todo-list.ts b/src/lib/component-templates/todo-list.ts
index ab21dcf..be13305 100644
--- a/src/lib/component-templates/todo-list.ts
+++ b/src/lib/component-templates/todo-list.ts
@@ -23,7 +23,7 @@ export const todoListTemplate: ComponentTemplate = {
         "$faker.lorem.paragraph",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "todoid", "uuid"]) ??
@@ -36,12 +36,12 @@ export const todoListTemplate: ComponentTemplate = {
                 "lorem.sentence",
                 "system.fileName",
             ]) ??
-            findField(fields, ["title", "task", "name", "summary"]) ??
-            "title";
+            findField(fields, ["title", "task", "name", "summary", "text", "description"]) ??
+            fields.find((f) => f.fieldName !== idField)?.fieldName ??
+            fields[0]?.fieldName;
         const completedField =
             findFieldByDataType(fields, ["datatype.boolean"]) ??
-            findField(fields, ["completed", "done", "isdone", "iscompleted"]) ??
-            "completed";
+            findField(fields, ["completed", "done", "isdone", "iscompleted", "status"]);
         const dueDateField =
             findFieldByDataType(fields, [
                 "date.future",
@@ -74,14 +74,14 @@ export const todoListTemplate: ComponentTemplate = {
 
 ${buildInterface("Todo", interfaceLines)}
 
-${buildFetchHook("TodoList", endpointUrl, "Todo")}
+${buildFetchHook("TodoList", endpointUrl, "Todo", options)}
 
 export function TodoList() {
   const { data, loading, error } = useTodoListData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const todos = Array.isArray(data) ? data : [data];
 
@@ -92,12 +92,12 @@ export function TodoList() {
           <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
             <input
               type="checkbox"
-              checked={Boolean(todo.${completedField})}
+              checked={${completedField ? `Boolean(todo.${completedField})` : "false"}}
               readOnly
               style={{ height: "1rem", width: "1rem", borderRadius: "4px", accentColor: "#6366f1", cursor: "pointer" }}
             />
-            <span style={{ flex: 1, fontWeight: 500, fontSize: "0.875rem", color: todo.${completedField} ? "#a1a1aa" : "#18181b", textDecoration: todo.${completedField} ? "line-through" : "none" }}>
-              {todo.${titleField}}
+            <span style={{ flex: 1, fontWeight: 500, fontSize: "0.875rem", color: ${completedField ? `todo.${completedField} ? "#a1a1aa" : "#18181b"` : '"#18181b"'}, textDecoration: ${completedField ? `todo.${completedField} ? "line-through" : "none"` : '"none"'} }}>
+              {${titleField ? `todo.${titleField}` : `"Task"`}}
             </span>
 ${priorityField ? `            {todo.${priorityField} && <span style={{ padding: "0.125rem 0.5rem", borderRadius: "4px", fontSize: "10px", fontFamily: "monospace", textTransform: "uppercase", fontWeight: 600, backgroundColor: "#fef3c7", color: "#92400e" }}>{todo.${priorityField}}</span>}\n` : ""}${categoryField ? `            {todo.${categoryField} && <span style={{ padding: "0.125rem 0.5rem", borderRadius: "4px", fontSize: "10px", fontFamily: "monospace", backgroundColor: "#f4f4f5", color: "#52525b" }}>{todo.${categoryField}}</span>}\n` : ""}          </div>
 
@@ -119,7 +119,12 @@ ${dueDateField ? `            {todo.${dueDateField} && <span>Due: {todo.${dueDat
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
+        const idField =
+            findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
+            findField(fields, ["id", "todoid", "uuid"]) ??
+            fields[0]?.fieldName ??
+            "id";
         const titleField =
             findFieldByDataType(fields, [
                 "lorem.words",
@@ -127,12 +132,12 @@ ${dueDateField ? `            {todo.${dueDateField} && <span>Due: {todo.${dueDat
                 "lorem.sentence",
                 "system.fileName",
             ]) ??
-            findField(fields, ["title", "task", "name", "summary"]) ??
-            "title";
+            findField(fields, ["title", "task", "name", "summary", "text", "description"]) ??
+            fields.find((f) => f.fieldName !== idField)?.fieldName ??
+            fields[0]?.fieldName;
         const completedField =
             findFieldByDataType(fields, ["datatype.boolean"]) ??
-            findField(fields, ["completed", "done", "isdone", "iscompleted"]) ??
-            "completed";
+            findField(fields, ["completed", "done", "isdone", "iscompleted", "status"]);
         const dueDateField =
             findFieldByDataType(fields, [
                 "date.future",
@@ -197,7 +202,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <ul id="root" class="todo-list"></ul>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/transaction-row.ts b/src/lib/component-templates/transaction-row.ts
index f263d12..61e58fe 100644
--- a/src/lib/component-templates/transaction-row.ts
+++ b/src/lib/component-templates/transaction-row.ts
@@ -28,20 +28,31 @@ export const transactionRowTemplate: ComponentTemplate = {
         "$faker.commerce.department",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "transactionid", "uuid"]) ??
             fields[0]?.fieldName ??
             "id";
         const amountField =
-            findFieldByDataType(fields, ["finance.amount", "commerce.price"]) ??
+            findFieldByDataType(fields, [
+                "finance.amount",
+                "commerce.price",
+                "number.float",
+                "number.int",
+            ]) ??
             findField(fields, ["amount", "price", "value", "cost"]) ??
-            "amount";
+            fields.find((f) => mapTsType(f.dataType) === "number")?.fieldName;
         const dateField =
-            findFieldByDataType(fields, ["date.anytime", "date.past", "date.recent"]) ??
+            findFieldByDataType(fields, [
+                "date.anytime",
+                "date.past",
+                "date.recent",
+                "date.future",
+            ]) ??
             findField(fields, ["date", "createdat", "timestamp", "time"]) ??
-            "date";
+            fields.find((f) => f.fieldName !== idField && mapTsType(f.dataType) === "string")
+                ?.fieldName;
         const currencyField =
             findFieldByDataType(fields, ["finance.currencyCode", "finance.currencySymbol"]) ??
             findField(fields, ["currency", "currencycode", "symbol"]);
@@ -67,14 +78,14 @@ export const transactionRowTemplate: ComponentTemplate = {
 
 ${buildInterface("Transaction", interfaceLines)}
 
-${buildFetchHook("TransactionRow", endpointUrl, "Transaction")}
+${buildFetchHook("TransactionRow", endpointUrl, "Transaction", options)}
 
 export function TransactionTable() {
   const { data, loading, error } = useTransactionRowData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a", fontFamily: "monospace" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444", fontFamily: "monospace" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const transactions = Array.isArray(data) ? data : [data];
 
@@ -83,14 +94,14 @@ export function TransactionTable() {
       <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem" }}>
         <thead>
           <tr style={{ borderBottom: "1px solid #e4e4e7", backgroundColor: "#f4f4f5", textAlign: "left", fontSize: "0.75rem", fontFamily: "monospace", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "#71717a" }}>
-            <th style={{ padding: "0.75rem 1rem" }}>Date</th>
+            <th style={{ padding: "0.75rem 1rem" }}>${dateField ? "Date" : "ID"}</th>
 ${merchantField ? `            <th style={{ padding: "0.75rem 1rem" }}>Merchant / Payee</th>\n` : ""}${descriptionField ? `            <th style={{ padding: "0.75rem 1rem" }}>Description</th>\n` : ""}${categoryField ? `            <th style={{ padding: "0.75rem 1rem" }}>Category</th>\n` : ""}${statusField ? `            <th style={{ padding: "0.75rem 1rem" }}>Status</th>\n` : ""}            <th style={{ padding: "0.75rem 1rem", textAlign: "right" }}>Amount</th>
           </tr>
         </thead>
         <tbody style={{ fontFamily: "monospace" }}>
           {transactions.map((tx, idx) => (
             <tr key={tx.${idField}} style={{ borderBottom: idx === transactions.length - 1 ? "none" : "1px solid #f4f4f5" }}>
-              <td style={{ padding: "0.75rem 1rem", fontSize: "0.75rem", color: "#71717a" }}>{tx.${dateField}}</td>
+              <td style={{ padding: "0.75rem 1rem", fontSize: "0.75rem", color: "#71717a" }}>{${dateField ? `tx.${dateField}` : `tx.${idField}`}}</td>
 ${merchantField ? `              <td style={{ padding: "0.75rem 1rem", fontFamily: "sans-serif", fontWeight: 500, color: "#18181b" }}>{tx.${merchantField}}</td>\n` : ""}${descriptionField ? `              <td style={{ padding: "0.75rem 1rem", fontSize: "0.75rem", color: "#52525b" }}>{tx.${descriptionField}}</td>\n` : ""}${categoryField ? `              <td style={{ padding: "0.75rem 1rem", fontSize: "0.75rem" }}><span style={{ padding: "0.125rem 0.5rem", borderRadius: "4px", backgroundColor: "#f4f4f5", color: "#52525b" }}>{tx.${categoryField}}</span></td>\n` : ""}${
             statusField
                 ? `              <td style={{ padding: "0.75rem 1rem", fontSize: "0.75rem" }}>
@@ -102,7 +113,7 @@ ${merchantField ? `              <td style={{ padding: "0.75rem 1rem", fontFamil
               </td>\n`
                 : ""
         }              <td style={{ padding: "0.75rem 1rem", textAlign: "right", fontWeight: 700, color: "#18181b" }}>
-                {tx.${amountField}}${currencyField ? ` {tx.${currencyField}}` : ""}
+                {${amountField ? `tx.${amountField}` : `"-"`}}${currencyField ? ` {tx.${currencyField}}` : ""}
               </td>
             </tr>
           ))}
@@ -113,15 +124,31 @@ ${merchantField ? `              <td style={{ padding: "0.75rem 1rem", fontFamil
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
+        const idField =
+            findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
+            findField(fields, ["id", "transactionid", "uuid"]) ??
+            fields[0]?.fieldName ??
+            "id";
         const amountField =
-            findFieldByDataType(fields, ["finance.amount", "commerce.price"]) ??
+            findFieldByDataType(fields, [
+                "finance.amount",
+                "commerce.price",
+                "number.float",
+                "number.int",
+            ]) ??
             findField(fields, ["amount", "price", "value", "cost"]) ??
-            "amount";
+            fields.find((f) => mapTsType(f.dataType) === "number")?.fieldName;
         const dateField =
-            findFieldByDataType(fields, ["date.anytime", "date.past", "date.recent"]) ??
+            findFieldByDataType(fields, [
+                "date.anytime",
+                "date.past",
+                "date.recent",
+                "date.future",
+            ]) ??
             findField(fields, ["date", "createdat", "timestamp", "time"]) ??
-            "date";
+            fields.find((f) => f.fieldName !== idField && mapTsType(f.dataType) === "string")
+                ?.fieldName;
         const currencyField =
             findFieldByDataType(fields, ["finance.currencyCode", "finance.currencySymbol"]) ??
             findField(fields, ["currency", "currencycode", "symbol"]);
@@ -189,7 +216,7 @@ ${buildHtmlStyles()}
     </table>
   </div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/lib/component-templates/types.ts b/src/lib/component-templates/types.ts
index 3503e4c..49e6498 100644
--- a/src/lib/component-templates/types.ts
+++ b/src/lib/component-templates/types.ts
@@ -1,5 +1,10 @@
 import type { SchemaField } from "~/lib/faker-options";
 
+export interface TemplateOptions {
+    requiresAuth?: boolean;
+    bearerToken?: string | null;
+}
+
 export interface ComponentTemplate {
     id: string;
     name: string;
@@ -9,9 +14,9 @@ export interface ComponentTemplate {
     /** fieldName candidates that boost match confidence but aren't essential */
     optionalFields: string[];
     /** generates the full .tsx source as a string, using the user's actual field names */
-    code: (fields: SchemaField[], endpointUrl: string) => string;
+    code: (fields: SchemaField[], endpointUrl: string, options?: TemplateOptions) => string;
     /** generates a standalone .html file (inline <style> + <script>) from the user's actual field names */
-    htmlCode?: (fields: SchemaField[], endpointUrl: string) => string;
+    htmlCode?: (fields: SchemaField[], endpointUrl: string, options?: TemplateOptions) => string;
 }
 
 export interface TemplateMatch {
diff --git a/src/lib/component-templates/user-card.ts b/src/lib/component-templates/user-card.ts
index 2831854..5141b64 100644
--- a/src/lib/component-templates/user-card.ts
+++ b/src/lib/component-templates/user-card.ts
@@ -28,7 +28,7 @@ export const userCardTemplate: ComponentTemplate = {
         "$faker.image.avatar",
         "$faker.string.uuid",
     ],
-    code: (fields, endpointUrl) => {
+    code: (fields, endpointUrl, options) => {
         const idField =
             findFieldByDataType(fields, ["string.uuid", "string.nanoid", "number.int"]) ??
             findField(fields, ["id", "userid", "uuid"]) ??
@@ -40,8 +40,8 @@ export const userCardTemplate: ComponentTemplate = {
                 "person.firstName",
                 "person.lastName",
             ]) ??
-            findField(fields, ["fullname", "name", "displayname"]) ??
-            "name";
+            findField(fields, ["fullname", "name", "displayname", "author", "username", "user"]) ??
+            fields[0]?.fieldName;
         const usernameField =
             findFieldByDataType(fields, ["internet.username"]) ??
             findField(fields, ["username", "handle"]);
@@ -69,14 +69,14 @@ export const userCardTemplate: ComponentTemplate = {
 
 ${buildInterface("User", interfaceLines)}
 
-${buildFetchHook("UserCard", endpointUrl, "User")}
+${buildFetchHook("UserCard", endpointUrl, "User", options)}
 
 export function UserCard() {
   const { data, loading, error } = useUserCardData();
 
   if (loading) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#71717a" }}>Loading...</div>;
   if (error) return <div style={{ padding: "1rem", fontSize: "0.875rem", color: "#ef4444" }}>Error: {error}</div>;
-  if (!data) return null;
+  if (!data) return <></>;
 
   const users = Array.isArray(data) ? data : [data];
 
@@ -112,15 +112,15 @@ ${emailField ? `            {user.${emailField} && <p style={{ margin: 0, overfl
 }
 `;
     },
-    htmlCode: (fields, endpointUrl) => {
+    htmlCode: (fields, endpointUrl, options) => {
         const fullNameField =
             findFieldByDataType(fields, [
                 "person.fullName",
                 "person.firstName",
                 "person.lastName",
             ]) ??
-            findField(fields, ["fullname", "name", "displayname"]) ??
-            "name";
+            findField(fields, ["fullname", "name", "displayname", "author", "username", "user"]) ??
+            fields[0]?.fieldName;
         const usernameField =
             findFieldByDataType(fields, ["internet.username"]) ??
             findField(fields, ["username", "handle"]);
@@ -191,7 +191,7 @@ ${buildHtmlStyles()}
   <p id="error"></p>
   <div id="root" class="grid"></div>
   <script type="module">
-${buildHtmlFetchScript(endpointUrl, renderFn)}
+${buildHtmlFetchScript(endpointUrl, renderFn, options)}
   </script>
 </body>
 </html>
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
index 4f334c3..1024d1d 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
@@ -30,6 +30,61 @@ interface SchemaPreviewProps {
     bearerToken?: string | null;
 }
 
+function generateFetchSnippet(
+    tab: "curl" | "js" | "tsx" | "python" | "go" | "rust" | "php",
+    url: string,
+    method: HttpMethod,
+    requiresAuth: boolean,
+    token?: string | null,
+) {
+    const tokenVal = token || "YOUR_TOKEN_HERE";
+
+    switch (tab) {
+        case "curl": {
+            const parts = [`curl -X ${method} "${url}"`];
+            parts.push('-H "Accept: application/json"');
+            if (requiresAuth) {
+                parts.push(`-H "Authorization: Bearer ${tokenVal}"`);
+            }
+            return parts.join(" \\\n  ");
+        }
+        case "js": {
+            const authHeaderJs = requiresAuth
+                ? `,\n    headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }`
+                : "";
+            return `fetch("${url}", {\n  method: "${method}"${authHeaderJs}\n})\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((err) => console.error(err));`;
+        }
+        case "tsx": {
+            const authHeaderTs = requiresAuth
+                ? `,\n      headers: {\n        "Authorization": "Bearer ${tokenVal}"\n      }`
+                : "";
+            return `async function fetchData<T = unknown>(): Promise<T> {\n  const response = await fetch("${url}", {\n    method: "${method}"${authHeaderTs}\n  });\n\n  if (!response.ok) {\n    throw new Error(\`HTTP error! status: \${response.status}\`);\n  }\n\n  return response.json() as Promise<T>;\n}`;
+        }
+        case "python": {
+            const headersObj = requiresAuth
+                ? `,\n    headers={\n        "Authorization": "Bearer ${tokenVal}"\n    }`
+                : "";
+            return `import requests\n\nresponse = requests.${method.toLowerCase()}(\n    "${url}"${headersObj}\n)\n\nprint(response.json())`;
+        }
+        case "go": {
+            const authGo = requiresAuth
+                ? `\n\treq.Header.Add("Authorization", "Bearer ${tokenVal}")`
+                : "";
+            return `package main\n\nimport (\n\t"fmt"\n\t"io"\n\t"net/http"\n)\n\nfunc main() {\n\tclient := &http.Client{}\n\treq, err := http.NewRequest("${method}", "${url}", nil)${authGo}\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\n\tresp, err := client.Do(req)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\tdefer resp.Body.Close()\n\n\tbody, _ := io.ReadAll(resp.Body)\n\tfmt.Println(string(body))\n}`;
+        }
+        case "rust": {
+            const authCall = requiresAuth ? `\n        .bearer_auth("${tokenVal}")` : "";
+            return `use reqwest::Error;\n\n#[tokio::main]\nasync fn main() -> Result<(), Error> {\n    let client = reqwest::Client::new();\n    let response = client\n        .${method.toLowerCase()}("${url}")${authCall}\n        .header("Accept", "application/json")\n        .send()\n        .await?;\n\n    let body = response.text().await?;\n    println!("{}", body);\n    Ok(())\n}`;
+        }
+        case "php": {
+            const authPhp = requiresAuth
+                ? `\n  "header" => "Authorization: Bearer ${tokenVal}\\r\\n"`
+                : "";
+            return `<?php\n$opts = [\n  "http" => [\n    "method" => "${method}"${authPhp}\n  ]\n];\n$context = stream_context_create($opts);\n$result = file_get_contents("${url}", false, $context);\necho $result;\n?>`;
+        }
+    }
+}
+
 export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreviewProps) {
     const [liveData, setLiveData] = useState<unknown>(null);
     const [error, setError] = useState<string | null>(null);
@@ -60,6 +115,9 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
     const [selectedTemplateId] = useState<string | null>(null);
 
     const [activeTab, setActiveTab] = useState<"react" | "html">("react");
+    const [fetchTab, setFetchTab] = useState<
+        "curl" | "js" | "tsx" | "python" | "go" | "rust" | "php"
+    >("curl");
 
     // Keep active template selection in sync when matches change
     const activeMatch =
@@ -326,6 +384,7 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
                                         activeMatch.template,
                                         schemaFields,
                                         fetchUrl,
+                                        { requiresAuth, bearerToken },
                                     )}
                                     lang="tsx"
                                     maxHeight="350px"
@@ -336,6 +395,7 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
                                         activeMatch.template,
                                         schemaFields,
                                         fetchUrl,
+                                        { requiresAuth, bearerToken },
                                     )}
                                     lang="html"
                                     maxHeight="350px"
@@ -343,6 +403,74 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
                             )}
                         </div>
                     )}
+
+                    {/* API Fetch Code Snippets Block */}
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                        <div className="flex items-center justify-between">
+                            <h3 className="text-sm font-bold font-mono text-muted-foreground flex items-center gap-2">
+                                <Code2 className="w-4 h-4" />
+                                API Fetch Snippets
+                            </h3>
+
+                            <div className="flex items-center bg-zinc-200 dark:bg-zinc-800 p-0.5 rounded-lg text-xs font-mono overflow-x-auto">
+                                {(
+                                    [
+                                        { id: "curl", label: "cURL" },
+                                        { id: "js", label: "JavaScript" },
+                                        { id: "tsx", label: "TypeScript" },
+                                        { id: "python", label: "Python" },
+                                        { id: "go", label: "Go" },
+                                        { id: "rust", label: "Rust" },
+                                        { id: "php", label: "PHP" },
+                                    ] as const
+                                ).map((tab) => (
+                                    <button
+                                        key={tab.id}
+                                        type="button"
+                                        onClick={() => setFetchTab(tab.id)}
+                                        className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
+                                            fetchTab === tab.id
+                                                ? "bg-white dark:bg-zinc-900 text-foreground shadow-xs"
+                                                : "text-muted-foreground hover:text-foreground"
+                                        }`}
+                                    >
+                                        {tab.label}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+
+                        <p className="text-xs text-muted-foreground font-mono">
+                            Ready-to-use fetch code snippets tailored for this endpoint and
+                            authentication rules.
+                        </p>
+
+                        <CodeBlock
+                            code={generateFetchSnippet(
+                                fetchTab,
+                                fetchUrl,
+                                endpoint.method,
+                                requiresAuth,
+                                bearerToken,
+                            )}
+                            lang={
+                                fetchTab === "curl"
+                                    ? "bash"
+                                    : fetchTab === "js"
+                                      ? "javascript"
+                                      : fetchTab === "tsx"
+                                        ? "typescript"
+                                        : fetchTab === "python"
+                                          ? "python"
+                                          : fetchTab === "go"
+                                            ? "go"
+                                            : fetchTab === "rust"
+                                              ? "rust"
+                                              : "php"
+                            }
+                            maxHeight="350px"
+                        />
+                    </div>
                 </CardContent>
             </Card>
         </div>
diff --git a/tests/component-templates.test.ts b/tests/component-templates.test.ts
index 1678d1c..67829f6 100644
--- a/tests/component-templates.test.ts
+++ b/tests/component-templates.test.ts
@@ -454,18 +454,295 @@ describe("Component Templates Library", () => {
         });
     });
 
-    describe("COMPONENT_TEMPLATES registry", () => {
-        it("contains all 7 component templates", () => {
-            expect(COMPONENT_TEMPLATES.length).toBe(7);
-            expect(COMPONENT_TEMPLATES.map((t) => t.id)).toEqual([
-                "dynamic-grid",
-                "user-card",
-                "post-card",
-                "product-card",
-                "todo-list",
-                "transaction-row",
-                "comment-item",
-            ]);
+    it("contains all 7 component templates", () => {
+        expect(COMPONENT_TEMPLATES.length).toBe(7);
+        expect(COMPONENT_TEMPLATES.map((t) => t.id)).toEqual([
+            "dynamic-grid",
+            "user-card",
+            "post-card",
+            "product-card",
+            "todo-list",
+            "transaction-row",
+            "comment-item",
+        ]);
+    });
+
+    describe("Edge Cases & Schema Alignment", () => {
+        it("should match comment-item for /api/v1/comments with comments schema", () => {
+            const fields = [
+                { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "author", dataType: "$faker.person.fullName" },
+                { id: "3", fieldName: "comment", dataType: "$faker.lorem.paragraph" },
+                { id: "4", fieldName: "avatar", dataType: "$faker.image.avatar" },
+                { id: "5", fieldName: "createdAt", dataType: "$faker.date.recent" },
+            ];
+
+            const matches = getTopMatches(
+                fields,
+                "http://localhost:3000/mock/ea232485/api/v1/comments",
+            );
+            expect(matches[0]!.template.id).toBe("comment-item");
+        });
+
+        it("postCardTemplate does not reference non-existent post.title when schema has no title field", () => {
+            const fields = [
+                { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "author", dataType: "$faker.person.fullName" },
+                { id: "3", fieldName: "comment", dataType: "$faker.lorem.paragraph" },
+                { id: "4", fieldName: "avatar", dataType: "$faker.image.avatar" },
+                { id: "5", fieldName: "createdAt", dataType: "$faker.date.recent" },
+            ];
+
+            const code = generateCode(
+                postCardTemplate,
+                fields,
+                "http://localhost:3000/api/v1/posts",
+            );
+            expect(code).not.toContain("post.title");
+            expect(code).toContain("post.comment");
+            expect(code).toContain("post.author");
+        });
+
+        it("productCardTemplate does not reference non-existent product.name or product.price", () => {
+            const fields = [
+                { id: "1", fieldName: "custom_id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "description", dataType: "$faker.lorem.paragraph" },
+            ];
+
+            const code = generateCode(
+                productCardTemplate,
+                fields,
+                "http://localhost:3000/api/v1/products",
+            );
+            expect(code).not.toContain("product.name");
+            expect(code).not.toContain("product.price");
+            expect(code).toContain("custom_id");
+        });
+
+        it("userCardTemplate does not reference non-existent user.name when fullName is absent", () => {
+            const fields = [
+                { id: "1", fieldName: "user_id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "handle", dataType: "$faker.internet.username" },
+            ];
+
+            const code = generateCode(
+                userCardTemplate,
+                fields,
+                "http://localhost:3000/api/v1/users",
+            );
+            expect(code).not.toContain("user.name");
+            expect(code).toContain("user.handle");
+        });
+
+        it("todoListTemplate does not reference non-existent todo.title or todo.completed", () => {
+            const fields = [
+                { id: "1", fieldName: "task_id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "description", dataType: "$faker.lorem.sentence" },
+            ];
+
+            const code = generateCode(
+                todoListTemplate,
+                fields,
+                "http://localhost:3000/api/v1/todos",
+            );
+            expect(code).not.toContain("todo.title");
+            expect(code).not.toContain("todo.completed");
+            expect(code).toContain("todo.description");
+        });
+
+        it("transactionRowTemplate does not reference non-existent tx.amount or tx.date", () => {
+            const fields = [
+                { id: "1", fieldName: "tx_id", dataType: "$faker.string.uuid" },
+                { id: "2", fieldName: "merchant", dataType: "$faker.company.name" },
+            ];
+
+            const code = generateCode(
+                transactionRowTemplate,
+                fields,
+                "http://localhost:3000/api/v1/tx",
+            );
+            expect(code).not.toContain("tx.amount");
+            expect(code).not.toContain("tx.date");
+            expect(code).toContain("tx.merchant");
+        });
+    });
+
+    describe("Auth Config (TemplateOptions)", () => {
+        const commentFields = [
+            { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+            { id: "2", fieldName: "author", dataType: "$faker.person.fullName" },
+            { id: "3", fieldName: "comment", dataType: "$faker.lorem.paragraph" },
+        ];
+        const URL = "http://localhost:3000/api/v1/protected";
+
+        describe("buildFetchHook", () => {
+            it("generates plain fetch (no auth) when options are omitted", () => {
+                const code = buildFetchHook("Test", URL, "Item");
+                expect(code).toContain(`fetch("${URL}")`);
+                expect(code).not.toContain("Authorization");
+                expect(code).not.toContain("Bearer");
+            });
+
+            it("generates plain fetch when requiresAuth is false", () => {
+                const code = buildFetchHook("Test", URL, "Item", { requiresAuth: false });
+                expect(code).toContain(`fetch("${URL}")`);
+                expect(code).not.toContain("Authorization");
+            });
+
+            it("generates Authorization header with placeholder when requiresAuth is true but no token provided", () => {
+                const code = buildFetchHook("Test", URL, "Item", { requiresAuth: true });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer YOUR_TOKEN_HERE");
+                expect(code).toContain(URL);
+            });
+
+            it("generates Authorization header with actual token when bearerToken is provided", () => {
+                const code = buildFetchHook("Test", URL, "Item", {
+                    requiresAuth: true,
+                    bearerToken: "eyJhbGciOiJIUzI1NiJ9.test",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer eyJhbGciOiJIUzI1NiJ9.test");
+            });
+        });
+
+        describe("generateCode with auth options", () => {
+            it("commentItemTemplate includes auth header in React fetch hook", () => {
+                const code = generateCode(commentItemTemplate, commentFields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_abc123",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_abc123");
+                expect(code).toContain(URL);
+            });
+
+            it("userCardTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "name", dataType: "$faker.person.fullName" },
+                ];
+                const code = generateCode(userCardTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_user99",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_user99");
+            });
+
+            it("productCardTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "name", dataType: "$faker.commerce.productName" },
+                    { id: "3", fieldName: "price", dataType: "$faker.commerce.price" },
+                ];
+                const code = generateCode(productCardTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_prod",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_prod");
+            });
+
+            it("todoListTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "title", dataType: "$faker.lorem.words" },
+                    { id: "3", fieldName: "done", dataType: "$faker.datatype.boolean" },
+                ];
+                const code = generateCode(todoListTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_todo",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_todo");
+            });
+
+            it("transactionRowTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "amount", dataType: "$faker.finance.amount" },
+                    { id: "3", fieldName: "date", dataType: "$faker.date.recent" },
+                ];
+                const code = generateCode(transactionRowTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_tx",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_tx");
+            });
+
+            it("dynamicGridTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "label", dataType: "$faker.person.fullName" },
+                ];
+                const code = generateCode(dynamicGridTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_grid",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_grid");
+            });
+
+            it("postCardTemplate includes auth header in React fetch hook", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "title", dataType: "$faker.book.title" },
+                    { id: "3", fieldName: "body", dataType: "$faker.lorem.paragraph" },
+                ];
+                const code = generateCode(postCardTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_post",
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_post");
+            });
+
+            it("no auth options -> no Authorization header in generated code", () => {
+                const code = generateCode(commentItemTemplate, commentFields, URL);
+                expect(code).not.toContain("Authorization");
+                expect(code).not.toContain("Bearer");
+            });
+
+            it("requiresAuth true but bearerToken absent -> uses YOUR_TOKEN_HERE placeholder", () => {
+                const code = generateCode(commentItemTemplate, commentFields, URL, {
+                    requiresAuth: true,
+                });
+                expect(code).toContain("Authorization");
+                expect(code).toContain("YOUR_TOKEN_HERE");
+                expect(code).not.toContain("null");
+            });
+        });
+
+        describe("generateHtmlCode with auth options", () => {
+            it("commentItemTemplate HTML includes auth fetch with token", () => {
+                const html = generateHtmlCode(commentItemTemplate, commentFields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_html",
+                });
+                expect(html).toContain("Authorization");
+                expect(html).toContain("Bearer tok_html");
+            });
+
+            it("dynamicGridTemplate HTML includes auth fetch with token", () => {
+                const fields = [
+                    { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+                    { id: "2", fieldName: "name", dataType: "$faker.person.fullName" },
+                ];
+                const html = generateHtmlCode(dynamicGridTemplate, fields, URL, {
+                    requiresAuth: true,
+                    bearerToken: "tok_html_grid",
+                });
+                expect(html).toContain("Authorization");
+                expect(html).toContain("Bearer tok_html_grid");
+            });
+
+            it("HTML no auth -> plain fetch without Authorization header", () => {
+                const html = generateHtmlCode(commentItemTemplate, commentFields, URL);
+                expect(html).not.toContain("Authorization");
+                expect(html).not.toContain("Bearer");
+            });
         });
     });
 });