wehub-resource-sync
159 lines
4.4 KiB
Plaintext
159 lines
4.4 KiB
Plaintext
---
|
|
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
|
|
|
|
Two pieces:
|
|
|
|
- **CLI link** — see the [Quickstart](/quickstart) to run `npx @insforge/cli link --project-id <your-project-id>` so the agent can read your project ID and keys.
|
|
- **MCP setup** — see [MCP Setup](/mcp-setup) for the per-editor config (Cursor, Claude Code, Windsurf, Codex, VS Code).
|
|
|
|
With both wired up the agent can read schemas, run queries, and deploy code from your editor.
|
|
|
|
## 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.
|
|
```
|