ai plugin template
1.0.0
这是一个 Figma AI 插件模板，演示 Figma 插件内的流式 LLM 响应。该模板显示：
该插件设置为使用 Next.js。
首先使用 create-next-app 创建此模板：
npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/接下来，您需要将 OpenAI API 密钥存储在.env.local文件中。您可以从 API 密钥页面获取 API 密钥。在此项目的根目录中创建一个.env.local文件并添加您的 API 密钥：
OPENAI_API_KEY= ***然后，运行开发服务器：
npm i
npm run dev然后，您可以打开 Figma 桌面应用程序并从该项目的清单文件导入插件。您可以右键单击画布并导航到Plugins > Development > Import plugin from manifest... ，然后选择{path to this project}/plugin/manifest.json中的manifest.json 。
您要编辑的主要文件是：
app/page.tsx ：将让您更新插件iframe 。当您编辑文件时，页面会自动更新，并让您更新插件的用户界面。app/completion/route.ts ：这是插件的“服务器”，也是与 OpenAI 对话的地方。您可以在此处更新发送到 GPT 的提示。plugin/manifest.json ：这是清单文件，可让您更新插件的权限和编辑器类型。 在此示例中，我们将把 Next.js 应用程序发布到 Vercel。您还可以发布到支持 Next.js 的任何其他托管提供商。
OPENAI_API_KEY设置为您的 OpenAI API 密钥。package.json文件的siteURL部分以指向已部署的 URL。它看起来像https://your-site-here.vercel.app/ "config" : {
"siteURL" : " https://your-site-here.vercel.app/ "
}npm run build以创建指向您部署的 URL 的插件的生产版本。该模板在@/lib/figmaAPI处包含一个figmaAPI帮助程序，可让您从iframe 内部运行插件代码。这对于避免 iframe <-> 插件 postMessage API 非常有用，并减少了需要编写的代码量。
例子：
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"关于这个助手有几点需要注意：
