ai plugin template

Обзор

Это шаблон плагина Figma AI, который демонстрирует потоковую передачу ответов LLM внутри плагина Figma. В этом шаблоне показано:

• Безопасное хранение ключей/подсказок OpenAI на сервере
• Потоковая передача завершения GPT в iframe
• Потоковая передача завершения GPT в документ Figma
• Полнофункциональный iframe React с использованием попутного ветра и Next.js.
• Развертывание вашего плагина в рабочей среде
• Доступ к API Figma напрямую из iframe

Начиная

Этот плагин настроен на использование Next.js.

Сначала создайте этот шаблон с помощью create-next-app:

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

Затем вам нужно сохранить ключ API OpenAI в файле .env.local . Вы можете получить ключ API на странице ключей API. Создайте файл .env.local в корне этого проекта и добавьте свой ключ API:

OPENAI_API_KEY= ***

Затем запустите сервер разработки:

npm i
npm run dev

Затем вы можете открыть настольное приложение Figma и импортировать плагин из файла манифеста в этом проекте. Вы можете щелкнуть правой кнопкой мыши по холсту и перейти к Plugins > Development > Import plugin from manifest... и выбрать файл manifest.json в {path to this project}/plugin/manifest.json .

Редактирование этого шаблона

Основные файлы, которые вы захотите редактировать:

• app/page.tsx : позволит вам обновить плагин iframe . Страница автоматически обновляется при редактировании файла и позволяет обновить пользовательский интерфейс вашего плагина.
• app/completion/route.ts : это «сервер» плагина, который взаимодействует с OpenAI. Здесь вы можете обновить приглашение, которое вы отправляете в GPT.
• plugin/manifest.json : это файл манифеста, который позволит вам обновить разрешения и типы редактора вашего плагина.

Публикация вашего плагина

В этом примере мы опубликуем приложение Next.js в Vercel. Вы также можете публиковать данные на любом другом хостинг-провайдере, поддерживающем Next.js.

1. Если вы еще этого не сделали, поместите свой код в репозиторий git на GitHub.
2. Создайте учетную запись на Vercel и подключите свою учетную запись GitHub.
3. Разверните свое приложение в Vercel. Вы можете следовать руководству здесь.
4. При развертывании обязательно установите переменную среды OPENAI_API_KEY для вашего ключа API OpenAI.
5. После развертывания вашего приложения вы можете обновить раздел siteURL вашего файла package.json , чтобы он указывал на развернутый URL-адрес. Это будет выглядеть примерно так: https://your-site-here.vercel.app/

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

6. Запустите npm run build , чтобы создать производственную сборку вашего плагина, указывающую на развернутый URL-адрес.
7. Проверьте свой плагин локально и убедитесь, что он работает после указания на vercel.
8. Опубликуйте свой плагин в сообществе
9. После публикации в сообществе ваш плагин будет автоматически обновляться при отправке в репозиторий git.

фигмаAPI

Этот шаблон включает в себя помощник figmaAPI по адресу @/lib/figmaAPI , который позволяет запускать код плагина изнутри iframe. Это полезно, чтобы избежать API-интерфейса postMessage плагина iframe <-> и уменьшить объем кода, который вам нужно написать.

Пример:

 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"

Несколько замечаний об этом помощнике:

1. Код не может ссылаться на какие-либо переменные вне функции, если они не переданы в качестве параметра второму аргументу. Это связано с тем, что код преобразуется в строку и отправляется в плагин, а плагин его оценивает. Плагин не имеет доступа к переменным в iframe.
2. Возвращаемое значение функции должно быть сериализуемым в формате JSON. Это связано с тем, что результат отправляется обратно в iframe через postMessage, который поддерживает только JSON.

Узнать больше

• Документация Next.js — узнайте о функциях и API Next.js.
• API плагинов Figma — узнайте об API плагинов Figma.
• OpenAI API — узнайте об API GPT.