ai plugin template

Überblick

Dies ist eine Figma AI-Plugin-Vorlage, die das Streamen von LLM-Antworten innerhalb eines Figma-Plugins demonstriert. Diese Vorlage zeigt:

• Sicheres Speichern von OpenAI-Schlüsseln/Eingabeaufforderungen auf einem Server
• Streaming einer GPT-Vervollständigung in einen Iframe
• Streaming einer GPT-Vervollständigung in ein Figma-Dokument
• Ein voll funktionsfähiger React-Iframe mit Rückenwind und Next.js
• Bereitstellen Ihres Plugins für die Produktion
• Direkter Zugriff auf die Figma-API über den Iframe

Erste Schritte

Dieses Plugin ist für die Verwendung von Next.js eingerichtet.

Erstellen Sie zunächst diese Vorlage mit create-next-app:

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

Als Nächstes müssen Sie Ihren OpenAI-API-Schlüssel in der Datei .env.local speichern. Sie können einen API-Schlüssel auf der Seite „API-Schlüssel“ erhalten. Erstellen Sie eine .env.local Datei im Stammverzeichnis dieses Projekts und fügen Sie Ihren API-Schlüssel hinzu:

OPENAI_API_KEY= ***

Führen Sie dann den Entwicklungsserver aus:

npm i
npm run dev

Anschließend können Sie die Figma-Desktop-App öffnen und ein Plugin aus der Manifestdatei in dieses Projekt importieren. Sie können mit der rechten Maustaste auf die Leinwand klicken und zu Plugins > Development > Import plugin from manifest... navigieren und die manifest.json in {path to this project}/plugin/manifest.json auswählen.

Bearbeiten dieser Vorlage

Die wichtigsten Dateien, die Sie bearbeiten möchten, sind:

• app/page.tsx : ermöglicht Ihnen die Aktualisierung des Plugin- iframe . Die Seite wird automatisch aktualisiert, wenn Sie die Datei bearbeiten, und ermöglicht Ihnen die Aktualisierung der Benutzeroberfläche Ihres Plugins.
• app/completion/route.ts : Dies ist der „Server“ des Plugins und kommuniziert mit OpenAI. Hier können Sie die Eingabeaufforderung aktualisieren, die Sie an GPT senden.
• plugin/manifest.json : Dies ist die Manifestdatei, mit der Sie die Berechtigungen und Editortypen Ihres Plugins aktualisieren können.

Veröffentlichen Sie Ihr Plugin

In diesem Beispiel veröffentlichen wir die Next.js-App in Vercel. Sie können auch bei jedem anderen Hosting-Anbieter veröffentlichen, der Next.js unterstützt.

1. Wenn Sie es noch nicht getan haben, übertragen Sie Ihren Code in ein Git-Repo auf GitHub.
2. Erstellen Sie ein Konto auf Vercel und verbinden Sie Ihr GitHub-Konto.
3. Stellen Sie Ihre App auf Vercel bereit. Sie können der Anleitung hier folgen.
4. Stellen Sie bei der Bereitstellung sicher, dass Sie die Umgebungsvariable OPENAI_API_KEY auf Ihren OpenAI-API-Schlüssel setzen.
5. Sobald Ihre App bereitgestellt ist, können Sie den Abschnitt siteURL Ihrer package.json Datei so aktualisieren, dass er auf die bereitgestellte URL verweist. Es wird etwa so aussehen: https://your-site-here.vercel.app/

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

6. Führen Sie npm run build aus, um den Produktions-Build Ihres Plugins zu erstellen, der auf Ihre bereitgestellte URL verweist.
7. Testen Sie Ihr Plugin lokal und stellen Sie sicher, dass es funktioniert, nachdem Sie auf Vercel verwiesen haben.
8. Veröffentlichen Sie Ihr Plugin in der Community
9. Nach der Veröffentlichung in der Community wird Ihr Plugin automatisch aktualisiert, wenn Sie es auf Ihr Git-Repo übertragen.

figmaAPI

Diese Vorlage enthält einen figmaAPI Helfer unter @/lib/figmaAPI , mit dem Sie Plugin-Code innerhalb des Iframes ausführen können. Dies ist nützlich, um die PostMessage-API des iframe <-> Plugins zu vermeiden und die Menge an Code zu reduzieren, die Sie schreiben müssen.

Beispiel:

 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"

Ein paar Dinge, die Sie zu diesem Helfer beachten sollten:

1. Der Code kann keine Variablen außerhalb der Funktion referenzieren, es sei denn, sie werden als Parameter an das zweite Argument übergeben. Dies liegt daran, dass der Code in Strings unterteilt und an das Plugin gesendet wird und das Plugin ihn auswertet. Das Plugin hat keinen Zugriff auf die Variablen im Iframe.
2. Der Rückgabewert der Funktion muss JSON-serialisierbar sein. Dies liegt daran, dass das Ergebnis über postMessage an den Iframe zurückgesendet wird, der nur JSON unterstützt.

Erfahren Sie mehr

• Next.js-Dokumentation – Erfahren Sie mehr über die Funktionen und die API von Next.js.
• Figma-Plugin-API – Erfahren Sie mehr über die Figma-Plugin-API.
• OpenAI API – Erfahren Sie mehr über GPT-APIs.