> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insforge.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Svelte

> Aprende a crear un proyecto de InsForge y desarrollar una aplicación Svelte con IA

Aprende a crear un proyecto de InsForge y a desarrollar una aplicación Svelte utilizando herramientas de IA como Cursor.

## 1. Crear un proyecto de InsForge

Crea un nuevo proyecto de InsForge en [insforge.dev](https://insforge.dev).

## 2. Conectar InsForge

Dos partes:

* **Enlace de la CLI** — consulta la [Guía rápida](/quickstart) para ejecutar `npx @insforge/cli link --project-id <your-project-id>` y que el agente pueda leer el ID de tu proyecto y tus claves.
* **Configuración de MCP** — consulta [Configuración de MCP](/mcp-setup) para conocer la configuración de cada editor (Cursor, Claude Code, Windsurf, Codex, VS Code).

Con ambas cosas configuradas, el agente puede leer esquemas, ejecutar consultas y desplegar código desde tu editor.

## 3. Crea tu aplicación con un solo prompt

En Cursor o tu asistente de IA, usa este 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.
```

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

## 4. Qué genera la IA

Tu asistente de IA creará automáticamente archivos como estos. No necesitas modificarlos manualmente.

**Cliente de InsForge** en `src/lib/insforge.ts`:

```typescript src/lib/insforge.ts theme={null}
import { createClient } from '@insforge/sdk';

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

**Componente de Sports** en `src/lib/components/Sports.svelte`:

```svelte src/lib/components/Sports.svelte theme={null}
<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. Inicia la aplicación

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

```bash theme={null}
npm run dev
```

## Siguiente paso: amplía tu aplicación con más prompts

Prueba estos prompts para añadir 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.
```