ai plugin template

Descripción general

Esta es una plantilla del complemento Figma AI que demuestra la transmisión de respuestas de LLM dentro de un complemento Figma. Esta plantilla muestra:

• Almacenamiento seguro de claves/indicaciones de OpenAI en un servidor
• Transmitir una finalización de GPT a un iframe
• Transmitir una finalización de GPT a un documento Figma
• Un iframe de React completamente funcional que usa tailwind y Next.js
• Implementar su complemento en producción
• Accediendo a la API de Figma directamente desde el iframe

Empezando

Este complemento está configurado para usar Next.js.

Primero cree esta plantilla usando create-next-app:

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

A continuación, debe almacenar su clave API de OpenAI en el archivo .env.local . Puede obtener una clave API en la página de claves API. Cree un archivo .env.local en la raíz de este proyecto y agregue su clave API:

OPENAI_API_KEY= ***

Luego, ejecute el servidor de desarrollo:

npm i
npm run dev

Luego puede abrir la aplicación de escritorio Figma e importar un complemento desde el archivo de manifiesto de este proyecto. Puede hacer clic derecho en el lienzo y navegar a Plugins > Development > Import plugin from manifest... y seleccionar manifest.json en {path to this project}/plugin/manifest.json .

Editando esta plantilla

Los archivos principales que querrás editar son:

• app/page.tsx : le permitirá actualizar el iframe del complemento. La página se actualiza automáticamente a medida que edita el archivo y le permitirá actualizar la interfaz de usuario de su complemento.
• app/completion/route.ts : este es el "servidor" del complemento y es lo que se comunica con OpenAI. Aquí es donde puede actualizar el mensaje que está enviando a GPT.
• plugin/manifest.json : este es el archivo de manifiesto que le permitirá actualizar los permisos y los tipos de editor de su complemento.

Publicando su complemento

En este ejemplo, publicaremos la aplicación Next.js en Vercel. También puede publicar en cualquier otro proveedor de alojamiento que admita Next.js.

1. Si aún no lo has hecho, envía tu código a un repositorio de Git en GitHub.
2. Cree una cuenta en Vercel y conecte su cuenta de GitHub.
3. Implemente su aplicación en Vercel. Puedes seguir la guía aquí.
4. Durante la implementación, asegúrese de configurar la variable de entorno OPENAI_API_KEY en su clave API de OpenAI.
5. Una vez implementada su aplicación, puede actualizar la sección siteURL de su archivo package.json para que apunte a la URL implementada. Se verá algo así como https://your-site-here.vercel.app/

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

6. Ejecute npm run build para crear la compilación de producción de su complemento que apunte a su URL implementada.
7. Pruebe su complemento localmente y asegúrese de que funcione después de apuntar a vercel.
8. Publica tu complemento en la comunidad
9. Después de publicar en la comunidad, su complemento se actualizará automáticamente cuando lo envíe a su repositorio de git.

figmaAPI

Esta plantilla incluye un asistente figmaAPI en @/lib/figmaAPI que le permite ejecutar código de complemento desde dentro del iframe. Esto es útil para evitar la API postMessage del complemento iframe <-> y reduce la cantidad de código que necesita escribir.

Ejemplo:

 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"

Algunas cosas a tener en cuenta sobre este ayudante:

1. El código no puede hacer referencia a ninguna variable fuera de la función a menos que se pase como parámetro al segundo argumento. Esto se debe a que el código se codifica y se envía al complemento, y el complemento lo evalúa. El complemento no tiene acceso a las variables del iframe.
2. El valor de retorno de la función debe ser serializable en JSON. Esto se debe a que el resultado se envía de vuelta al iframe a través de postMessage, que solo admite JSON.

Más información

• Documentación de Next.js: obtenga información sobre las características y la API de Next.js.
• API del complemento Figma: obtenga información sobre la API del complemento Figma.
• API OpenAI: obtenga información sobre las API de GPT.