Démarrage rapide
De l'installation GitHub au premier feedback épinglé en trois minutes environ.
InstaFix n'est pas publié sur le registre npm — un choix délibéré, pas un « pas encore ». Chaque package s'installe directement depuis les résultats de build de ce dépôt, via une branche <package>-dist jetable : même expérience d'installation, juste une URL GitHub à la place d'un nom de package.
Deux chemins : l'installation complète (Next.js + une vraie base de données — la forme de production) ou la version sans serveur (60 secondes, tout dans le navigateur).
Installation complète — Next.js + Prisma ou SQLite
1. Générer
npx github:gnoopy/instafix#cli-dist initSi un schéma Prisma est trouvé, init propose d'ajouter les modèles InstaFix et de générer une route API adossée à Prisma. Pas de schéma Prisma ? Il propose SQLite à la place (better-sqlite3, zéro service externe — aucun serveur de base de données, aucune étape de migration séparée) plutôt que de supposer Prisma. Dans les deux cas, il génère aussi un components/instafix-widget.tsx prêt à l'emploi.
2. Installer ce que init a référencé
# Chemin Prisma
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-prisma-dist
npx prisma db push
# Chemin SQLite
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-sqlite-distChemin Prisma uniquement : il vous faut un singleton client dans @/lib/prisma. Si vous n'en avez pas :
// src/lib/prisma.ts
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;3. Monter le widget
init a déjà généré le composant — il ne reste qu'à le poser dans votre layout racine :
// app/layout.tsx
import { InstaFixWidget } from "@/components/instafix-widget";
// ...dans <body>, à côté de vos autres providers :
<InstaFixWidget />(Vous n'utilisez pas le composant généré ? La même chose, à la main : useInstaFix({ endpoint: "/api/instafix", projectName: "mon-projet" }) depuis @instafix/widget/react, dans n'importe quel composant client.)
Lancez votre serveur de dev et regardez en bas à droite : le bouton InstaFix est là. Dessinez un rectangle sur n'importe quoi, tapez un commentaire, envoyez.
Par défaut le widget apparaît en développement mais jamais dans un build de production — c'est voulu : les clients relisent sur des URLs de dev/staging. Pour un staging construit en mode production, passez forceShow: true.
4. Trier ce qui arrive
import { InstaFixInbox } from "@instafix/dashboard";
<InstaFixInbox projects="mon-projet" endpoint="/api/instafix" theme="auto" />La boucle est complète. Pour aller plus loin : options du widget · captures d'écran · auth et sécurité.
Sans serveur
Pas de backend, pas de base — le feedback vit dans le navigateur du visiteur. Parfait pour les prototypes et démos :
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-localstorage-distimport { initInstaFix } from "@instafix/widget";
import { LocalStorageStore } from "@instafix/adapter-localstorage";
initInstaFix({
store: new LocalStorageStore(),
projectName: "ma-demo",
forceShow: true,
});Ce site de documentation tourne exactement avec cette configuration — essayez le widget ici même.