insforge 1.2.10 → 1.4.8

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

@@ -1,165 +1,165 @@
----
-title: React
-description: Learn how to create an InsForge project and build a React app using AI
----
-
-import Installation from '/snippets/sdk-installation.mdx';
-
-Learn how to create an InsForge project and build a React 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 React app with TypeScript and Vite.
-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 component 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 `src/lib/insforge.ts`:
-
-```typescript src/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 component** at `src/components/Sports.tsx`:
-
-```typescript src/components/Sports.tsx
-import { useEffect, useState } from 'react';
-import { insforge } from '../lib/insforge';
-
-interface Sport {
-  id: string;
-  name: string;
-}
-
-export function Sports() {
-  const [sports, setSports] = useState<Sport[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchSports() {
-      const { data, error } = await insforge.database
-        .from('sports')
-        .select();
-
-      if (error) {
-        setError(error.message);
-      } else {
-        setSports(data || []);
-      }
-      setLoading(false);
-    }
-
-    fetchSports();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <p className="text-gray-600">Loading...</p>
-      </div>
-    );
-  }
-
-  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}</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.length > 0 ? (
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {sports.map((sport) => (
-              <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:5173](http://localhost:5173) 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: React
+description: Learn how to create an InsForge project and build a React app using AI
+---
+
+import Installation from '/snippets/sdk-installation.mdx';
+
+Learn how to create an InsForge project and build a React 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 React app with TypeScript and Vite.
+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 component 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 `src/lib/insforge.ts`:
+
+```typescript src/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 component** at `src/components/Sports.tsx`:
+
+```typescript src/components/Sports.tsx
+import { useEffect, useState } from 'react';
+import { insforge } from '../lib/insforge';
+
+interface Sport {
+  id: string;
+  name: string;
+}
+
+export function Sports() {
+  const [sports, setSports] = useState<Sport[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchSports() {
+      const { data, error } = await insforge.database
+        .from('sports')
+        .select();
+
+      if (error) {
+        setError(error.message);
+      } else {
+        setSports(data || []);
+      }
+      setLoading(false);
+    }
+
+    fetchSports();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-gray-600">Loading...</p>
+      </div>
+    );
+  }
+
+  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}</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.length > 0 ? (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {sports.map((sport) => (
+              <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:5173](http://localhost:5173) 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/svelte.mdx

@@ -1,153 +1,153 @@
----
-title: Svelte
-description: Learn how to create an InsForge project and build a Svelte app using AI
----
-
-import Installation from '/snippets/sdk-installation.mdx';
-
-Learn how to create an InsForge project and build a Svelte 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 Svelte app with TypeScript and Vite.
-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 component 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 `src/lib/insforge.ts`:
-
-```typescript src/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 component** at `src/lib/components/Sports.svelte`:
-
-```svelte src/lib/components/Sports.svelte
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { insforge } from '../insforge';
-
-  interface Sport {
-    id: string;
-    name: string;
-  }
-
-  let sports: Sport[] = [];
-  let loading = true;
-  let error: string | null = null;
-
-  onMount(async () => {
-    try {
-      const { data, error: fetchError } = await insforge.database
-        .from('sports')
-        .select();
-
-      if (fetchError) {
-        error = fetchError.message;
-      } else {
-        sports = data || [];
-      }
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'An unexpected error occurred';
-    } finally {
-      loading = false;
-    }
-  });
-</script>
-
-<div class="min-h-screen p-8">
-  <div class="max-w-4xl mx-auto">
-    <h1 class="text-4xl font-bold mb-8">Sports</h1>
-
-    {#if loading}
-      <div class="flex items-center justify-center py-8">
-        <p class="text-gray-600">Loading...</p>
-      </div>
-    {:else if error}
-      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        <h2 class="text-2xl font-bold mb-2">Error</h2>
-        <p>{error}</p>
-      </div>
-    {:else if sports.length > 0}
-      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {#each sports as sport (sport.id)}
-          <div
-            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>
-        {/each}
-      </div>
-    {:else}
-      <p class="text-gray-600">No sports found.</p>
-    {/if}
-  </div>
-</div>
-```
-
-## 5. Start the app
-
-Run the development server, go to [http://localhost:5173](http://localhost:5173) 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: Svelte
+description: Learn how to create an InsForge project and build a Svelte app using AI
+---
+
+import Installation from '/snippets/sdk-installation.mdx';
+
+Learn how to create an InsForge project and build a Svelte 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 Svelte app with TypeScript and Vite.
+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 component 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 `src/lib/insforge.ts`:
+
+```typescript src/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 component** at `src/lib/components/Sports.svelte`:
+
+```svelte src/lib/components/Sports.svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { insforge } from '../insforge';
+
+  interface Sport {
+    id: string;
+    name: string;
+  }
+
+  let sports: Sport[] = [];
+  let loading = true;
+  let error: string | null = null;
+
+  onMount(async () => {
+    try {
+      const { data, error: fetchError } = await insforge.database
+        .from('sports')
+        .select();
+
+      if (fetchError) {
+        error = fetchError.message;
+      } else {
+        sports = data || [];
+      }
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'An unexpected error occurred';
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<div class="min-h-screen p-8">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-4xl font-bold mb-8">Sports</h1>
+
+    {#if loading}
+      <div class="flex items-center justify-center py-8">
+        <p class="text-gray-600">Loading...</p>
+      </div>
+    {:else if error}
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        <h2 class="text-2xl font-bold mb-2">Error</h2>
+        <p>{error}</p>
+      </div>
+    {:else if sports.length > 0}
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {#each sports as sport (sport.id)}
+          <div
+            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>
+        {/each}
+      </div>
+    {:else}
+      <p class="text-gray-600">No sports found.</p>
+    {/if}
+  </div>
+</div>
+```
+
+## 5. Start the app
+
+Run the development server, go to [http://localhost:5173](http://localhost:5173) 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.
+```