給前端的簡單 AI 教學 - 1. 連接 OpenAI

前言

這應該會是一連串文章的第一篇，分享一下小弟這一年來開發 LLM 相關應用程式的一些知識跟心得。整個系列會帶過以下內容：

• 如何使用 OpenAI
  


• 簡單的 prompt 知識


• function_call


• 簡單帶一下 Langchain
  


• 如何讓 LLM 根據公司的文件回應


• 可以怎麼使用 Browser AI 套件與前端框架進行整合

主題

這篇文章要講很～簡單的東西，就是把 OpenAI 的 API 接起來，大約十分鐘就可以做完。以下是兩個大步驟：

1. 取得 API KEY


2. 在網頁打 Request

A. 取得 OpenAI API KEY

1. 到 OpenAI 註冊一個帳號

https://platform.openai.com/docs/introduction

你應該畫面會在右上角看到 sign up，點下去就會進入註冊流程。跟著註冊流程建立帳號就行了。

2. 確認額度

註冊完後，會回到文件的畫面，你可以點擊左方的 settings > Limits，然後滾動到最下方，會看到下面有一段文字。這段文字是說，你現在是免費方案，要用到 5 美金之後才會開始付費。只是摸一摸的話這金額很足夠的。

你也可以到左邊點擊 Usage 確認你的使用量：

3. 取得 API key

到左側點擊 "API keys"，會進入下圖中的頁面

要建立 API key，要先做手機驗證，點擊下圖中的按鈕，跟著步驟進行即可

手機驗證完之後，然後點擊 "Create new secret key"

這邊稍微要注意一下：

1. 首先會需要輸入一個名稱，取個簡單的名稱就好


2. 送出名字後，在同一個彈窗會出現 API KEY。把 Key 複製下來，藏好不要給別人知道。


3. 如果你不小心把這個彈窗關掉，又沒有複製到 …

api browser frontend langchain llm openai openai api prompt usage