Framework Integration Guides

Learn how to integrate InsForge with popular frameworks using AI-assisted development

Learn how to build full-stack applications with InsForge and your favorite framework. These guides show you how to use AI tools like Cursor and Claude to generate complete applications with a single prompt.

How It Works

1. Create an InsForge project at insforge.dev
2. Connect InsForge MCP to your AI assistant (see MCP Setup)
3. Give your AI a prompt describing what you want to build
4. AI generates everything - database schema, SDK setup, UI components

Your AI assistant can directly interact with your InsForge backend, creating tables, configuring authentication, and generating fully functional code.

Framework Guides

Next.js

Build server-side rendered apps with TypeScript

React

Create single-page apps with Vite

Vue

Develop with the progressive framework

Nuxt

Build Vue apps with SSR and SSG

Svelte

Create reactive apps with SvelteKit

---

Next.js

Build a Next.js app with InsForge using a single AI prompt.

Quick Start 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.

What the AI Generates

InsForge client configuration:

lib/insforge.ts

import { createClient } from '@insforge/sdk';

export const insforge = createClient({
  baseUrl: 'https://your-project.us-east.insforge.app',
  anonKey: 'your-anon-key',
});

Server-side data fetching:

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="text-red-600">{error.message}</div>;
  }

  return (
    <div className="p-8">
      <h1 className="text-4xl font-bold mb-8">Sports</h1>
      <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">
            <h2 className="text-xl font-semibold">{sport.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}

Run the App

npm run dev

View your app at http://localhost:3000/sports

Extend with More Prompts

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 images to each sport using InsForge Storage.
Allow users to upload sport images and display them in the grid.

Full Next.js Guide

View the complete guide in the InsForge repository

---

React

Build a React app with Vite and InsForge.

Quick Start 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.

What the AI Generates

InsForge client configuration:

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',
});

React component with hooks:

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 [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchSports() {
      const { data, error } = await insforge.database
        .from('sports')
        .select();

      if (!error) setSports(data || []);
      setLoading(false);
    }
    fetchSports();
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <div className="p-8">
      <h1 className="text-4xl font-bold mb-8">Sports</h1>
      <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">
            <h2 className="text-xl font-semibold">{sport.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}

Run the App

npm run dev

View your app at http://localhost:5173

Full React Guide

View the complete guide in the InsForge repository

---

Vue, Nuxt & Svelte

InsForge works with all modern frameworks. The integration pattern is similar:

1. Install the InsForge SDK
2. Create a client instance with your credentials
3. Use the SDK methods in your components

Vue Guide

Build with Vue 3 and Composition API

Nuxt Guide

Server-side rendering with Nuxt 3

Svelte Guide

Reactive apps with SvelteKit

---

Mobile Development

InsForge provides native SDKs for mobile platforms.

Swift SDK

Build iOS apps with InsForge

Kotlin SDK

Build Android apps with InsForge

---

Common Integration Patterns

Authentication Setup

For framework-specific auth implementations:

React (Vite + React Router)

Use pre-built auth components for React apps with routing:

npm install @insforge/auth-ui-react-router

See React Router Auth Components

Next.js (App Router)

Use pre-built auth components for Next.js:

npm install @insforge/auth-ui-nextjs

See Next.js Auth Components

Other Frameworks

Use the core SDK for custom auth implementations:

import { insforge } from './lib/insforge';

// Sign up
const { data, error } = await insforge.auth.signUp({
  email: '[e-mail]',
  password: 'password123',
});

// Sign in
const { data, error } = await insforge.auth.signIn({
  email: '[e-mail]',
  password: 'password123',
});

See Authentication SDK

Database Operations

All frameworks use the same SDK methods:

// Query data
const { data, error } = await insforge.database
  .from('table_name')
  .select();

// Insert data
const { data, error } = await insforge.database
  .from('table_name')
  .insert([{ column: 'value' }]);

// Update data
const { data, error } = await insforge.database
  .from('table_name')
  .update({ column: 'new_value' })
  .eq('id', 123);

File Storage

Upload and download files:

// Upload file
const { data, error } = await insforge.storage
  .from('bucket-name')
  .upload('file-path', file);

// Get public URL
const { data } = insforge.storage
  .from('bucket-name')
  .getPublicUrl('file-path');

---

Need Help?

Examples

View more examples and use cases

Discord Community

Get help from the community