Unduh ai plugin template - unduh kode sumber ai plugin template

ai plugin template

Kode sumber lainnya

1.0.0

Unduh

Ringkasan

Ini adalah templat plugin Figma AI yang mendemonstrasikan respons streaming LLM di dalam plugin Figma. Templat ini menunjukkan:

Menyimpan kunci/perintah OpenAI dengan aman di server
Streaming penyelesaian GPT ke iframe
Streaming penyelesaian GPT ke dokumen Figma
Iframe React yang berfungsi penuh menggunakan tailwind dan Next.js
Menyebarkan plugin Anda ke produksi
Mengakses Figma API langsung dari iframe

Memulai

Plugin ini diatur untuk menggunakan Next.js.

Pertama buat template ini menggunakan create-next-app:

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

Selanjutnya Anda perlu menyimpan kunci API OpenAI Anda di file .env.local . Anda bisa mendapatkan kunci API dari halaman kunci API. Buat file .env.local di root proyek ini dan tambahkan kunci API Anda:

OPENAI_API_KEY= ***

Kemudian, jalankan server pengembangan:

npm i
npm run dev

Anda kemudian dapat membuka aplikasi desktop Figma dan mengimpor plugin dari file manifes di proyek ini. Anda dapat mengklik kanan pada kanvas dan menavigasi ke Plugins > Development > Import plugin from manifest... dan pilih manifest.json di {path to this project}/plugin/manifest.json .

Mengedit templat ini

File utama yang ingin Anda edit adalah:

app/page.tsx : memungkinkan Anda memperbarui plugin iframe . Halaman ini diperbarui secara otomatis saat Anda mengedit file dan memungkinkan Anda memperbarui antarmuka pengguna plugin Anda.
app/completion/route.ts : Ini adalah "server" plugin dan yang berkomunikasi dengan OpenAI. Di sinilah Anda dapat memperbarui perintah yang Anda kirim ke GPT.
plugin/manifest.json : ini adalah file manifes yang memungkinkan Anda memperbarui izin dan jenis editor plugin Anda.

Publikasikan plugin Anda

Dalam contoh ini kami akan memublikasikan aplikasi Next.js ke Vercel. Anda juga dapat memublikasikan ke penyedia hosting lain yang mendukung Next.js.

Jika Anda belum melakukannya, masukkan kode Anda ke repo git di GitHub.
Buat akun di Vercel dan sambungkan akun GitHub Anda.
Terapkan aplikasi Anda ke Vercel. Anda dapat mengikuti panduannya di sini.
Saat menerapkan, pastikan untuk menyetel variabel lingkungan OPENAI_API_KEY ke kunci API OpenAI Anda.
Setelah aplikasi diterapkan, Anda dapat memperbarui bagian siteURL pada file package.json agar mengarah ke URL yang diterapkan. Ini akan terlihat seperti https://your-site-here.vercel.app/

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

Jalankan npm run build untuk membuat build produksi plugin Anda yang mengarah ke URL yang Anda terapkan.
Uji plugin Anda secara lokal dan pastikan plugin berfungsi setelah menunjuk ke vercel.
Publikasikan plugin Anda ke komunitas
Setelah dipublikasikan ke komunitas, plugin Anda akan diperbarui secara otomatis saat Anda memasukkan ke repo git Anda.

figmaAPI

Templat ini menyertakan pembantu figmaAPI di @/lib/figmaAPI yang memungkinkan Anda menjalankan kode plugin dari dalam iframe. Ini berguna untuk menghindari plugin iframe <-> postMessage API dan mengurangi jumlah kode yang perlu Anda tulis.

Contoh:

 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"

Beberapa hal yang perlu diperhatikan tentang pembantu ini:

Kode tidak dapat mereferensikan variabel apa pun di luar fungsi kecuali variabel tersebut diteruskan sebagai parameter ke argumen kedua. Ini karena kode dirangkai dan dikirim ke plugin, dan plugin mengevaluasinya. Plugin tidak memiliki akses ke variabel di iframe.
Nilai yang dikembalikan dari fungsi tersebut harus berupa JSON yang dapat diserialkan. Hal ini karena hasilnya dikirim kembali ke iframe melalui postMessage, yang hanya mendukung JSON.