insforge 0.3.3 → 1.3.0

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

@@ -0,0 +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.
+```

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

@@ -0,0 +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.
+```

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

@@ -0,0 +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.
+```

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

@@ -0,0 +1,159 @@
+---
+title: Vue
+description: Learn how to create an InsForge project and build a Vue app using AI
+---
+
+import Installation from '/snippets/sdk-installation.mdx';
+
+Learn how to create an InsForge project and build a Vue 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 Vue 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.vue`:
+
+```vue src/components/Sports.vue
+<template>
+  <div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold text-gray-800 mb-6">Sports</h1>
+
+    <div v-if="loading" class="text-center py-8">
+      <p class="text-gray-600">Loading sports...</p>
+    </div>
+
+    <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+      <p>Error: {{ error }}</p>
+    </div>
+
+    <div v-else-if="sports && sports.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div
+        v-for="sport in sports"
+        :key="sport.id"
+        class="bg-white rounded-lg shadow-md p-6 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>
+
+    <div v-else class="text-center py-8">
+      <p class="text-gray-600">No sports found.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { insforge } from '../lib/insforge';
+
+interface Sport {
+  id: string;
+  name: string;
+  created_at?: string;
+}
+
+const sports = ref<Sport[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const fetchSports = async () => {
+  try {
+    loading.value = true;
+    error.value = null;
+
+    const { data, error: fetchError } = await insforge.database
+      .from('sports')
+      .select();
+
+    if (fetchError) {
+      error.value = fetchError.message || 'Failed to fetch sports';
+      return;
+    }
+
+    sports.value = data || [];
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'An unexpected error occurred';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  fetchSports();
+});
+</script>
+```
+
+## 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/overview.mdx

@@ -0,0 +1,67 @@
+---
+title: InsForge Cookbook
+description: A collection of practical examples and guides for building with InsForge
+---
+
+A collection of practical examples and guides for building with InsForge - the fastest way to build full-stack applications with PostgreSQL, authentication, storage, AI, and serverless functions.
+
+## Quick Start
+
+To get started with any example in this cookbook:
+
+1. **Browse examples** - Find the framework or use case that matches your needs
+2. **Follow the guide** - Each example includes AI prompts and setup instructions
+3. **Get the code** - See what the AI generates for you
+4. **Build and customize** - Use the examples as starting points for your projects
+
+## What's Inside
+
+### Framework Guides
+
+Ready-to-use guides that show how to build with InsForge using popular frameworks and AI tools.
+
+<CardGroup cols={2}>
+  <Card title="Next.js" icon="/images/logos/nextjs.svg" href="/examples/framework-guides/nextjs">
+    Build a Next.js app using AI prompts
+  </Card>
+
+  <Card title="React" icon="/images/logos/react.svg" href="/examples/framework-guides/react">
+    Build a React app using AI prompts
+  </Card>
+
+  <Card title="Vue" icon="/images/logos/vue.svg" href="/examples/framework-guides/vue">
+    Build a Vue app using AI prompts
+  </Card>
+
+  <Card title="Nuxt" icon="/images/logos/nuxt.svg" href="/examples/framework-guides/nuxt">
+    Build a Nuxt app using AI prompts
+  </Card>
+
+  <Card title="Svelte" icon="/images/logos/svelte.svg" href="/examples/framework-guides/svelte">
+    Build a Svelte app using AI prompts
+  </Card>
+</CardGroup>
+
+### Community Showcase
+
+Community-built applications that demonstrate real-world implementations of InsForge.
+
+<Card title="View Showcase" icon="star" href="/showcase">
+  Explore projects built with InsForge
+</Card>
+
+---
+
+## Contributing
+
+Have a project built with InsForge? We'd love to feature it!
+
+<CardGroup cols={2}>
+  <Card title="GitHub Issues" icon="github" href="https://github.com/InsForge/InsForge/issues">
+    Submit your project or example
+  </Card>
+
+  <Card title="Discord Community" icon="discord" href="https://discord.com/invite/DvBtaEc9Jz">
+    Share your work with the community
+  </Card>
+</CardGroup>