chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: Next.js
|
||||
description: Learn how to create an InsForge project and build a Next.js app using AI
|
||||
---
|
||||
|
||||
Learn how to create an InsForge project and build a Next.js 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 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.
|
||||
```
|
||||
|
||||
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 `lib/insforge.ts`:
|
||||
|
||||
```typescript 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 page** at `app/sports/page.tsx`:
|
||||
|
||||
```typescript 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="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.message}</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 && sports.length > 0 ? (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{sports.map((sport: { id: string; name: string }) => (
|
||||
<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. Start the app
|
||||
|
||||
Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) 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.
|
||||
```
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: Nuxt
|
||||
description: Learn how to create an InsForge project and build a Nuxt app using AI
|
||||
---
|
||||
|
||||
import Installation from '/snippets/sdk-installation.mdx';
|
||||
|
||||
Learn how to create an InsForge project and build a Nuxt 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 Nuxt app with TypeScript.
|
||||
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 page 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.
|
||||
|
||||
**Runtime config** at `nuxt.config.ts`:
|
||||
|
||||
```typescript nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
insforgeBaseUrl: process.env.NUXT_PUBLIC_INSFORGE_BASE_URL,
|
||||
insforgeAnonKey: process.env.NUXT_PUBLIC_INSFORGE_ANON_KEY
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**Server API route** at `server/api/sports.get.ts`:
|
||||
|
||||
```typescript server/api/sports.get.ts
|
||||
import { createClient } from '@insforge/sdk';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const client = createClient({
|
||||
baseUrl: config.public.insforgeBaseUrl,
|
||||
anonKey: config.public.insforgeAnonKey
|
||||
})
|
||||
|
||||
const { data, error } = await client.database
|
||||
.from('sports')
|
||||
.select('*')
|
||||
|
||||
if (error) {
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: error.message || 'Failed to fetch sports'
|
||||
})
|
||||
}
|
||||
|
||||
return data
|
||||
})
|
||||
```
|
||||
|
||||
**Sports page** at `pages/sports.vue`:
|
||||
|
||||
```vue pages/sports.vue
|
||||
<script setup lang="ts">
|
||||
interface Sport {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const { data: sports, pending, error } = await useFetch<Sport[]>('/api/sports')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen p-8">
|
||||
<!-- Loading state -->
|
||||
<div v-if="pending" class="flex items-center justify-center min-h-screen">
|
||||
<p class="text-gray-600">Loading...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error state -->
|
||||
<div v-else-if="error" class="flex items-center justify-center min-h-screen">
|
||||
<div class="text-red-600">
|
||||
<h1 class="text-2xl font-bold mb-2">Error</h1>
|
||||
<p>{{ error.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success state -->
|
||||
<div v-else class="max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl font-bold mb-8">Sports</h1>
|
||||
|
||||
<div v-if="sports && sports.length > 0" class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
v-for="sport in sports"
|
||||
:key="sport.id"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<p v-else class="text-gray-600">No sports found.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 5. Start the app
|
||||
|
||||
Run the development server, go to [http://localhost:3000/sports](http://localhost:3000/sports) 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.
|
||||
```
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: React
|
||||
description: Learn how to create an InsForge project and build a React app using AI
|
||||
---
|
||||
|
||||
import Installation from '/snippets/sdk-installation.mdx';
|
||||
|
||||
Learn how to create an InsForge project and build a React 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 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.
|
||||
```
|
||||
|
||||
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/components/Sports.tsx`:
|
||||
|
||||
```typescript 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. 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.
|
||||
```
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
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.
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
title: Vue
|
||||
description: Learn how to create an InsForge project and build a Vue app using AI
|
||||
---
|
||||
|
||||
import Installation from '/snippets/sdk-installation.mdx';
|
||||
|
||||
Learn how to create an InsForge project and build a Vue 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 Vue 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/components/Sports.vue`:
|
||||
|
||||
```vue src/components/Sports.vue
|
||||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-6">Sports</h1>
|
||||
|
||||
<div v-if="loading" class="text-center py-8">
|
||||
<p class="text-gray-600">Loading sports...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
<p>Error: {{ error }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="sports && sports.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="sport in sports"
|
||||
:key="sport.id"
|
||||
class="bg-white rounded-lg shadow-md p-6 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>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center py-8">
|
||||
<p class="text-gray-600">No sports found.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { insforge } from '../lib/insforge';
|
||||
|
||||
interface Sport {
|
||||
id: string;
|
||||
name: string;
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
const sports = ref<Sport[]>([]);
|
||||
const loading = ref(true);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
const fetchSports = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
const { data, error: fetchError } = await insforge.database
|
||||
.from('sports')
|
||||
.select();
|
||||
|
||||
if (fetchError) {
|
||||
error.value = fetchError.message || 'Failed to fetch sports';
|
||||
return;
|
||||
}
|
||||
|
||||
sports.value = data || [];
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'An unexpected error occurred';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchSports();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## 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.
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: InsForge cookbook and framework examples
|
||||
description: Browse InsForge examples for Next.js, React, Vue, Nuxt, and Svelte, plus AI prompts, setup guides, and community projects to build full-stack apps.
|
||||
---
|
||||
|
||||
A collection of practical examples and guides for building with InsForge - the fastest way to build full-stack applications with PostgreSQL, authentication, storage, AI, and serverless functions.
|
||||
|
||||
## Quick start
|
||||
|
||||
To get started with any example in this cookbook:
|
||||
|
||||
1. **Browse examples** - Find the framework or use case that matches your needs
|
||||
2. **Follow the guide** - Each example includes AI prompts and setup instructions
|
||||
3. **Get the code** - See what the AI generates for you
|
||||
4. **Build and customize** - Use the examples as starting points for your projects
|
||||
|
||||
## What's inside
|
||||
|
||||
### Framework guides
|
||||
|
||||
Ready-to-use guides that show how to build with InsForge using popular frameworks and AI tools.
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Next.js" icon="/images/logos/nextjs.svg" href="/examples/framework-guides/nextjs">
|
||||
Build a Next.js app using AI prompts
|
||||
</Card>
|
||||
|
||||
<Card title="React" icon="/images/logos/react.svg" href="/examples/framework-guides/react">
|
||||
Build a React app using AI prompts
|
||||
</Card>
|
||||
|
||||
<Card title="Vue" icon="/images/logos/vue.svg" href="/examples/framework-guides/vue">
|
||||
Build a Vue app using AI prompts
|
||||
</Card>
|
||||
|
||||
<Card title="Nuxt" icon="/images/logos/nuxt.svg" href="/examples/framework-guides/nuxt">
|
||||
Build a Nuxt app using AI prompts
|
||||
</Card>
|
||||
|
||||
<Card title="Svelte" icon="/images/logos/svelte.svg" href="/examples/framework-guides/svelte">
|
||||
Build a Svelte app using AI prompts
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
### Community showcase
|
||||
|
||||
Community-built applications that demonstrate real-world implementations of InsForge.
|
||||
|
||||
<Card title="View Showcase" icon="star" href="/showcase">
|
||||
Explore projects built with InsForge
|
||||
</Card>
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
|
||||
Have a project built with InsForge? We'd love to feature it!
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="GitHub Issues" icon="github" href="https://github.com/InsForge/InsForge/issues">
|
||||
Submit your project or example
|
||||
</Card>
|
||||
|
||||
<Card title="Discord Community" icon="discord" href="https://discord.com/invite/DvBtaEc9Jz">
|
||||
Share your work with the community
|
||||
</Card>
|
||||
</CardGroup>
|
||||
Reference in New Issue
Block a user