React - InsForge Docs

Aprenda cómo crear un proyecto InsForge y crear una aplicación React usando herramientas de IA como Cursor.

1. Crear un proyecto InsForge

Cree un nuevo proyecto InsForge en insforge.dev.

2. Conectar InsForge

Dos partes:

Enlace CLI — vea el Inicio rápido para ejecutar npx @insforge/cli link --project-id <your-project-id> para que el agente pueda leer su ID de proyecto y claves.
Configuración de MCP — vea Configuración de MCP para la configuración por editor (Cursor, Claude Code, Windsurf, Codex, VS Code).

Con ambos conectados, el agente puede leer esquemas, ejecutar consultas e implementar código desde su editor.

3. Construye tu app con un solo aviso

En Cursor o tu asistente de IA, usa este aviso:

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.

Tu IA generará la aplicación completa incluyendo configuración de base de datos e interfaz de usuario. No necesitas escribir código manualmente: la IA crea todo por ti.

4. Lo que genera la IA

Tu asistente de IA creará automáticamente archivos como estos. No necesitas tocarlos manualmente. Cliente InsForge en 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',
});

Componente de deportes en src/components/Sports.tsx:

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. Inicia la aplicación

Ejecuta el servidor de desarrollo, ve a http://localhost:5173 en un navegador y deberías ver la lista de deportes.

npm run dev

Siguiente: Amplía tu aplicación con más avisos

Prueba estos avisos para agregar más funciones a tu aplicación:

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.

​1. Crear un proyecto InsForge

​2. Conectar InsForge

​3. Construye tu app con un solo aviso

​4. Lo que genera la IA

​5. Inicia la aplicación

​Siguiente: Amplía tu aplicación con más avisos