Téléchargement ai plugin template - ai plugin template Téléchargement du code source

ai plugin template

Autre code source

1.0.0

Télécharger

Aperçu

Il s'agit d'un modèle de plugin Figma AI qui démontre le streaming des réponses LLM à l'intérieur d'un plugin Figma. Ce modèle montre :

Stockage sécurisé des clés/invites OpenAI sur un serveur
Diffusion d'une complétion GPT vers une iframe
Diffusion d'une complétion GPT vers un document Figma
Une iframe React entièrement fonctionnelle utilisant tailwind et Next.js
Déployer votre plugin en production
Accéder à l'API Figma directement depuis l'iframe

Commencer

Ce plugin est configuré pour utiliser Next.js.

Créez d'abord ce modèle en utilisant create-next-app :

npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/

Ensuite, vous devez stocker votre clé API OpenAI dans le fichier .env.local . Vous pouvez obtenir une clé API sur la page Clés API. Créez un fichier .env.local à la racine de ce projet et ajoutez votre clé API :

OPENAI_API_KEY= ***

Ensuite, exécutez le serveur de développement :

npm i
npm run dev

Vous pouvez ensuite ouvrir l'application de bureau Figma et importer un plugin à partir du fichier manifeste de ce projet. Vous pouvez cliquer avec le bouton droit sur le canevas et accéder à Plugins > Development > Import plugin from manifest... et sélectionner le manifest.json dans {path to this project}/plugin/manifest.json .

Modification de ce modèle

Les principaux fichiers que vous souhaiterez modifier sont :

app/page.tsx : vous permettra de mettre à jour le plugin iframe . La page se met à jour automatiquement au fur et à mesure que vous modifiez le fichier et vous permettra de mettre à jour l'interface utilisateur de votre plugin.
app/completion/route.ts : C'est le "serveur" du plugin et c'est ce qui parle à OpenAI. C'est ici que vous pouvez mettre à jour l'invite que vous envoyez à GPT.
plugin/manifest.json : c'est le fichier manifeste qui vous permettra de mettre à jour les autorisations et les types d'éditeur de votre plugin.

Publier votre plugin

Dans cet exemple, nous publierons l'application Next.js sur Vercel. Vous pouvez également publier sur n’importe quel autre fournisseur d’hébergement prenant en charge Next.js.

Si vous ne l'avez pas déjà fait, transférez votre code vers un dépôt git sur GitHub.
Créez un compte sur Vercel et connectez votre compte GitHub.
Déployez votre application sur Vercel. Vous pouvez suivre le guide ici.
Lors du déploiement, assurez-vous de définir la variable d'environnement OPENAI_API_KEY sur votre clé API OpenAI.
Une fois votre application déployée, vous pouvez mettre à jour la section siteURL de votre fichier package.json pour pointer vers l'URL déployée. Cela ressemblera à quelque chose comme https://your-site-here.vercel.app/

 "config" : {
  "siteURL" : " https://your-site-here.vercel.app/ "
}

Exécutez npm run build pour créer la version de production de votre plugin qui pointe vers votre URL déployée.
Testez votre plugin localement et assurez-vous qu'il fonctionne après avoir pointé vers vercel.
Publiez votre plugin sur la communauté
Après avoir publié sur la communauté, votre plugin sera mis à jour automatiquement lorsque vous accéderez à votre dépôt git.

figmaAPI

Ce modèle inclut un assistant figmaAPI sur @/lib/figmaAPI qui vous permet d'exécuter le code du plugin depuis l'intérieur de l'iframe. Ceci est utile pour éviter l'API postMessage du plugin iframe <-> et réduit la quantité de code que vous devez écrire.

Exemple:

 import { figmaAPI } from "@/lib/figmaAPI" ;

const nodeId = "0:2" ;

const result = await figmaAPI . run (
  ( figma , { nodeId } ) => {
    return figma . getNodeById ( nodeId ) ?. name ;
  } ,
  // Any variable you want to pass to the function must be passed as a parameter.
  { nodeId } ,
) ;

console . log ( result ) ; // "Page 1"

Quelques points à noter à propos de cette aide :

Le code ne peut référencer aucune variable en dehors de la fonction à moins qu'elles ne soient transmises en tant que paramètre au deuxième argument. En effet, le code est stringifié et envoyé au plugin, et le plugin l'évalue. Le plugin n'a pas accès aux variables de l'iframe.
La valeur de retour de la fonction doit être sérialisable JSON. En effet, le résultat est renvoyé à l'iframe via postMessage, qui ne prend en charge que JSON.