Download ai plugin template - download do código-fonte ai plugin template

ai plugin template

Outro código-fonte

1.0.0

Baixar

Visão geral

Este é um modelo de plugin Figma AI que demonstra o streaming de respostas LLM dentro de um plugin Figma. Este modelo mostra:

Armazenando com segurança chaves/prompts OpenAI em um servidor
Transmitindo uma conclusão GPT para um iframe
Transmitindo uma conclusão GPT para um documento Figma
Um iframe React totalmente funcional usando tailwind e Next.js
Implantando seu plugin em produção
Acessando a API Figma diretamente do iframe

Começando

Este plugin está configurado para usar Next.js.

Primeiro crie este modelo usando create-next-app:

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

Em seguida, você precisa armazenar sua chave de API OpenAI no arquivo .env.local . Você pode obter uma chave de API na página de chaves de API. Crie um arquivo .env.local na raiz deste projeto e adicione sua chave API:

OPENAI_API_KEY= ***

Em seguida, execute o servidor de desenvolvimento:

npm i
npm run dev

Você pode então abrir o aplicativo de desktop Figma e importar um plugin do arquivo de manifesto neste projeto. Você pode clicar com o botão direito na tela e navegar até Plugins > Development > Import plugin from manifest... e selecionar manifest.json em {path to this project}/plugin/manifest.json .

Editando este modelo

Os principais arquivos que você deseja editar são:

app/page.tsx : permitirá que você atualize o plugin iframe . A página é atualizada automaticamente conforme você edita o arquivo e permite atualizar a interface do usuário do seu plugin.
app/completion/route.ts : Este é o "servidor" do plugin e é o que se comunica com o OpenAI. É aqui que você pode atualizar o prompt que está enviando para o GPT.
plugin/manifest.json : este é o arquivo de manifesto que permitirá atualizar as permissões e tipos de editor do seu plugin.

Publicando seu plugin

Neste exemplo publicaremos o aplicativo Next.js no Vercel. Você também pode publicar em qualquer outro provedor de hospedagem que suporte Next.js.

Se ainda não o fez, envie seu código para um repositório git no GitHub.
Crie uma conta no Vercel e conecte sua conta GitHub.
Implante seu aplicativo no Vercel. Você pode seguir o guia aqui.
Durante a implantação, certifique-se de definir a variável de ambiente OPENAI_API_KEY como sua chave de API OpenAI.
Depois que seu aplicativo for implantado, você poderá atualizar a seção siteURL do seu arquivo package.json para apontar para o URL implantado. Será algo como https://your-site-here.vercel.app/

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

Execute npm run build para criar a compilação de produção do seu plug-in que aponta para o URL implantado.
Teste seu plugin localmente e certifique-se de que funciona depois de apontar para vercel.
Publique seu plugin na comunidade
Depois de publicar na comunidade, seu plugin será atualizado automaticamente quando você enviar para seu repositório git.

figmaAPI

Este modelo inclui um auxiliar figmaAPI em @/lib/figmaAPI que permite executar o código do plugin de dentro do iframe. Isso é útil para evitar a API postMessage do plugin iframe <-> e reduz a quantidade de código que você precisa escrever.

Exemplo:

 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"

Algumas coisas a serem observadas sobre este ajudante:

O código não pode fazer referência a nenhuma variável fora da função, a menos que seja passada como parâmetro para o segundo argumento. Isso ocorre porque o código é codificado e enviado ao plugin, e o plugin o avalia. O plugin não tem acesso às variáveis do iframe.
O valor de retorno da função deve ser serializável em JSON. Isso ocorre porque o resultado é enviado de volta ao iframe via postMessage, que suporta apenas JSON.