insforge 1.2.10 → 1.3.0

package/docs/examples/framework-guides/nextjs.mdx

@@ -1,131 +1,131 @@
----
-title: Next.js
-description: Learn how to create an InsForge project and build a Next.js app using AI
----
-
-Learn how to create an InsForge project and build a Next.js app using AI tools like Cursor.
-
-## 1. Create an InsForge project
-
-Create a new InsForge project at [insforge.dev](https://insforge.dev).
-
-## 2. Connect InsForge MCP
-
-Follow the [quickstart guide](/quickstart) to connect your AI assistant to your InsForge backend. This allows AI tools like Claude and Cursor to directly interact with your database, storage, and other InsForge services.
-
-## 3. Build your app with one prompt
-
-In Cursor or your AI assistant, use this prompt:
-
-```
-Create a new Next.js app with TypeScript and Tailwind CSS 3.4.
-Install the InsForge SDK and set up the client configuration.
-
-In my InsForge database, create a sports table with id and name columns.
-Add sample data: basketball, soccer, and tennis. Make it publicly readable.
-
-Create a page at /sports that fetches and displays all sports from the database.
-```
-
-Your AI will generate the complete application including database setup and UI. No need to write code manually - the AI creates everything for you.
-
-## 4. What the AI generates
-
-Your AI assistant will automatically create files like these. You don't need to touch them manually.
-
-**InsForge client** at `lib/insforge.ts`:
-
-```typescript lib/insforge.ts
-import { createClient } from '@insforge/sdk';
-
-export const insforge = createClient({
-  baseUrl: 'https://your-project.us-east.insforge.app',
-  anonKey: 'your-anon-key',
-});
-```
-
-**Sports page** at `app/sports/page.tsx`:
-
-```typescript app/sports/page.tsx
-import { insforge } from '@/lib/insforge';
-
-export default async function SportsPage() {
-  const { data: sports, error } = await insforge.database
-    .from('sports')
-    .select();
-
-  if (error) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-red-600">
-          <h1 className="text-2xl font-bold mb-2">Error</h1>
-          <p>{error.message}</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen p-8">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-4xl font-bold mb-8">Sports</h1>
-
-        {sports && sports.length > 0 ? (
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {sports.map((sport: { id: string; name: string }) => (
-              <div
-                key={sport.id}
-                className="p-6 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow"
-              >
-                <h2 className="text-xl font-semibold text-gray-800 capitalize">
-                  {sport.name}
-                </h2>
-                <p className="text-sm text-gray-500 mt-2">ID: {sport.id}</p>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className="text-gray-600">No sports found.</p>
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
-## 5. Start the app
-
-Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) in a browser and you should see the list of sports.
-
-```bash
-npm run dev
-```
-
-## Next: Extend your app with more prompts
-
-Try these prompts to add more features to your app:
-
-```
-Add a form to create new sports and save them to the database.
-Include validation and error handling.
-```
-
-```
-Add user authentication with sign up and login pages.
-Only allow authenticated users to add new sports.
-```
-
-```
-Add a favorites feature where users can mark their favorite sports.
-Store favorites in a user_favorites table with user_id and sport_id.
-```
-
-```
-Add images to each sport using InsForge Storage.
-Allow users to upload sport images and display them in the grid.
-```
-
-```
-Add an AI chat feature that can answer questions about sports.
-Use InsForge AI with streaming responses.
-```
+---
+title: Next.js
+description: Learn how to create an InsForge project and build a Next.js app using AI
+---
+
+Learn how to create an InsForge project and build a Next.js app using AI tools like Cursor.
+
+## 1. Create an InsForge project
+
+Create a new InsForge project at [insforge.dev](https://insforge.dev).
+
+## 2. Connect InsForge MCP
+
+Follow the [quickstart guide](/quickstart) to connect your AI assistant to your InsForge backend. This allows AI tools like Claude and Cursor to directly interact with your database, storage, and other InsForge services.
+
+## 3. Build your app with one prompt
+
+In Cursor or your AI assistant, use this prompt:
+
+```
+Create a new Next.js app with TypeScript and Tailwind CSS 3.4.
+Install the InsForge SDK and set up the client configuration.
+
+In my InsForge database, create a sports table with id and name columns.
+Add sample data: basketball, soccer, and tennis. Make it publicly readable.
+
+Create a page at /sports that fetches and displays all sports from the database.
+```
+
+Your AI will generate the complete application including database setup and UI. No need to write code manually - the AI creates everything for you.
+
+## 4. What the AI generates
+
+Your AI assistant will automatically create files like these. You don't need to touch them manually.
+
+**InsForge client** at `lib/insforge.ts`:
+
+```typescript lib/insforge.ts
+import { createClient } from '@insforge/sdk';
+
+export const insforge = createClient({
+  baseUrl: 'https://your-project.us-east.insforge.app',
+  anonKey: 'your-anon-key',
+});
+```
+
+**Sports page** at `app/sports/page.tsx`:
+
+```typescript app/sports/page.tsx
+import { insforge } from '@/lib/insforge';
+
+export default async function SportsPage() {
+  const { data: sports, error } = await insforge.database
+    .from('sports')
+    .select();
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-red-600">
+          <h1 className="text-2xl font-bold mb-2">Error</h1>
+          <p>{error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8">Sports</h1>
+
+        {sports && sports.length > 0 ? (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {sports.map((sport: { id: string; name: string }) => (
+              <div
+                key={sport.id}
+                className="p-6 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow"
+              >
+                <h2 className="text-xl font-semibold text-gray-800 capitalize">
+                  {sport.name}
+                </h2>
+                <p className="text-sm text-gray-500 mt-2">ID: {sport.id}</p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-gray-600">No sports found.</p>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+## 5. Start the app
+
+Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) in a browser and you should see the list of sports.
+
+```bash
+npm run dev
+```
+
+## Next: Extend your app with more prompts
+
+Try these prompts to add more features to your app:
+
+```
+Add a form to create new sports and save them to the database.
+Include validation and error handling.
+```
+
+```
+Add user authentication with sign up and login pages.
+Only allow authenticated users to add new sports.
+```
+
+```
+Add a favorites feature where users can mark their favorite sports.
+Store favorites in a user_favorites table with user_id and sport_id.
+```
+
+```
+Add images to each sport using InsForge Storage.
+Allow users to upload sport images and display them in the grid.
+```
+
+```
+Add an AI chat feature that can answer questions about sports.
+Use InsForge AI with streaming responses.
+```

package/docs/examples/framework-guides/nuxt.mdx

@@ -1,165 +1,165 @@
----
-title: Nuxt
-description: Learn how to create an InsForge project and build a Nuxt app using AI
----
-
-import Installation from '/snippets/sdk-installation.mdx';
-
-Learn how to create an InsForge project and build a Nuxt app using AI tools like Cursor.
-
-## 1. Create an InsForge project
-
-Create a new InsForge project at [insforge.dev](https://insforge.dev).
-
-## 2. Connect InsForge MCP
-
-Follow the [quickstart guide](/quickstart) to connect your AI assistant to your InsForge backend. This allows AI tools like Claude and Cursor to directly interact with your database, storage, and other InsForge services.
-
-## 3. Build your app with one prompt
-
-In Cursor or your AI assistant, use this prompt:
-
-```
-Create a new Nuxt app with TypeScript.
-Add Tailwind CSS 3.4 for styling.
-Install the InsForge SDK and set up the client configuration.
-
-In my InsForge database, create a sports table with id and name columns.
-Add sample data: basketball, soccer, and tennis. Make it publicly readable.
-
-Create a page that fetches and displays all sports from the database.
-```
-
-Your AI will generate the complete application including database setup and UI. No need to write code manually - the AI creates everything for you.
-
-## 4. What the AI generates
-
-Your AI assistant will automatically create files like these. You don't need to touch them manually.
-
-**Runtime config** at `nuxt.config.ts`:
-
-```typescript nuxt.config.ts
-export default defineNuxtConfig({
-  runtimeConfig: {
-    public: {
-      insforgeBaseUrl: process.env.NUXT_PUBLIC_INSFORGE_BASE_URL,
-      insforgeAnonKey: process.env.NUXT_PUBLIC_INSFORGE_ANON_KEY
-    }
-  }
-})
-```
-
-**Server API route** at `server/api/sports.get.ts`:
-
-```typescript server/api/sports.get.ts
-import { createClient } from '@insforge/sdk';
-
-export default defineEventHandler(async (event) => {
-  const config = useRuntimeConfig()
-
-  const client = createClient({
-    baseUrl: config.public.insforgeBaseUrl,
-    anonKey: config.public.insforgeAnonKey
-  })
-
-  const { data, error } = await client.database
-    .from('sports')
-    .select('*')
-
-  if (error) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: error.message || 'Failed to fetch sports'
-    })
-  }
-
-  return data
-})
-```
-
-**Sports page** at `pages/sports.vue`:
-
-```vue pages/sports.vue
-<script setup lang="ts">
-interface Sport {
-  id: string;
-  name: string;
-}
-
-const { data: sports, pending, error } = await useFetch<Sport[]>('/api/sports')
-</script>
-
-<template>
-  <div class="min-h-screen p-8">
-    <!-- Loading state -->
-    <div v-if="pending" class="flex items-center justify-center min-h-screen">
-      <p class="text-gray-600">Loading...</p>
-    </div>
-
-    <!-- Error state -->
-    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
-      <div class="text-red-600">
-        <h1 class="text-2xl font-bold mb-2">Error</h1>
-        <p>{{ error.message }}</p>
-      </div>
-    </div>
-
-    <!-- Success state -->
-    <div v-else class="max-w-4xl mx-auto">
-      <h1 class="text-4xl font-bold mb-8">Sports</h1>
-
-      <div v-if="sports && sports.length > 0" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <div
-          v-for="sport in sports"
-          :key="sport.id"
-          class="p-6 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow"
-        >
-          <h2 class="text-xl font-semibold text-gray-800 capitalize">
-            {{ sport.name }}
-          </h2>
-          <p class="text-sm text-gray-500 mt-2">ID: {{ sport.id }}</p>
-        </div>
-      </div>
-
-      <p v-else class="text-gray-600">No sports found.</p>
-    </div>
-  </div>
-</template>
-```
-
-## 5. Start the app
-
-Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) in a browser and you should see the list of sports.
-
-```bash
-npm run dev
-```
-
-## Next: Extend your app with more prompts
-
-Try these prompts to add more features to your app:
-
-```
-Add a form to create new sports and save them to the database.
-Include validation and error handling.
-```
-
-```
-Add user authentication with sign up and login pages.
-Only allow authenticated users to add new sports.
-```
-
-```
-Add a favorites feature where users can mark their favorite sports.
-Store favorites in a user_favorites table with user_id and sport_id.
-```
-
-```
-Add images to each sport using InsForge Storage.
-Allow users to upload sport images and display them in the grid.
-```
-
-```
-Add an AI chat feature that can answer questions about sports.
-Use InsForge AI with streaming responses.
-```
+---
+title: Nuxt
+description: Learn how to create an InsForge project and build a Nuxt app using AI
+---
+
+import Installation from '/snippets/sdk-installation.mdx';
+
+Learn how to create an InsForge project and build a Nuxt app using AI tools like Cursor.
+
+## 1. Create an InsForge project
+
+Create a new InsForge project at [insforge.dev](https://insforge.dev).
+
+## 2. Connect InsForge MCP
+
+Follow the [quickstart guide](/quickstart) to connect your AI assistant to your InsForge backend. This allows AI tools like Claude and Cursor to directly interact with your database, storage, and other InsForge services.
+
+## 3. Build your app with one prompt
+
+In Cursor or your AI assistant, use this prompt:
+
+```
+Create a new Nuxt app with TypeScript.
+Add Tailwind CSS 3.4 for styling.
+Install the InsForge SDK and set up the client configuration.
+
+In my InsForge database, create a sports table with id and name columns.
+Add sample data: basketball, soccer, and tennis. Make it publicly readable.
+
+Create a page that fetches and displays all sports from the database.
+```
+
+Your AI will generate the complete application including database setup and UI. No need to write code manually - the AI creates everything for you.
+
+## 4. What the AI generates
+
+Your AI assistant will automatically create files like these. You don't need to touch them manually.
+
+**Runtime config** at `nuxt.config.ts`:
+
+```typescript nuxt.config.ts
+export default defineNuxtConfig({
+  runtimeConfig: {
+    public: {
+      insforgeBaseUrl: process.env.NUXT_PUBLIC_INSFORGE_BASE_URL,
+      insforgeAnonKey: process.env.NUXT_PUBLIC_INSFORGE_ANON_KEY
+    }
+  }
+})
+```
+
+**Server API route** at `server/api/sports.get.ts`:
+
+```typescript server/api/sports.get.ts
+import { createClient } from '@insforge/sdk';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const client = createClient({
+    baseUrl: config.public.insforgeBaseUrl,
+    anonKey: config.public.insforgeAnonKey
+  })
+
+  const { data, error } = await client.database
+    .from('sports')
+    .select('*')
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      statusMessage: error.message || 'Failed to fetch sports'
+    })
+  }
+
+  return data
+})
+```
+
+**Sports page** at `pages/sports.vue`:
+
+```vue pages/sports.vue
+<script setup lang="ts">
+interface Sport {
+  id: string;
+  name: string;
+}
+
+const { data: sports, pending, error } = await useFetch<Sport[]>('/api/sports')
+</script>
+
+<template>
+  <div class="min-h-screen p-8">
+    <!-- Loading state -->
+    <div v-if="pending" class="flex items-center justify-center min-h-screen">
+      <p class="text-gray-600">Loading...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="flex items-center justify-center min-h-screen">
+      <div class="text-red-600">
+        <h1 class="text-2xl font-bold mb-2">Error</h1>
+        <p>{{ error.message }}</p>
+      </div>
+    </div>
+
+    <!-- Success state -->
+    <div v-else class="max-w-4xl mx-auto">
+      <h1 class="text-4xl font-bold mb-8">Sports</h1>
+
+      <div v-if="sports && sports.length > 0" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div
+          v-for="sport in sports"
+          :key="sport.id"
+          class="p-6 bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow"
+        >
+          <h2 class="text-xl font-semibold text-gray-800 capitalize">
+            {{ sport.name }}
+          </h2>
+          <p class="text-sm text-gray-500 mt-2">ID: {{ sport.id }}</p>
+        </div>
+      </div>
+
+      <p v-else class="text-gray-600">No sports found.</p>
+    </div>
+  </div>
+</template>
+```
+
+## 5. Start the app
+
+Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) in a browser and you should see the list of sports.
+
+```bash
+npm run dev
+```
+
+## Next: Extend your app with more prompts
+
+Try these prompts to add more features to your app:
+
+```
+Add a form to create new sports and save them to the database.
+Include validation and error handling.
+```
+
+```
+Add user authentication with sign up and login pages.
+Only allow authenticated users to add new sports.
+```
+
+```
+Add a favorites feature where users can mark their favorite sports.
+Store favorites in a user_favorites table with user_id and sport_id.
+```
+
+```
+Add images to each sport using InsForge Storage.
+Allow users to upload sport images and display them in the grid.
+```
+
+```
+Add an AI chat feature that can answer questions about sports.
+Use InsForge AI with streaming responses.
+```