Skip to main content
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.

​
2. Connect InsForge MCP

Follow the quickstart guide 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:
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:
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 in a browser and you should see the list of sports. 
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.