目錄
先決條件
第 1 步:設定 Express 伺服器
第 2 步:API 檢定
理解程式碼
第 3 步:後續步驟與部署
結論
首頁 web前端 js教程 使用 Vercel 的 AI SDK 和 Pica 的 OneTool 建置連接到無限 API 的 AI 代理

使用 Vercel 的 AI SDK 和 Pica 的 OneTool 建置連接到無限 API 的 AI 代理

Jan 23, 2025 am 02:35 AM

Build AI Agent Connected to Unlimited APIs with Vercel

在您的軟體專案中釋放無縫 API 互動的力量!本教學將指導您建立一個 AI 代理,該代理可以使用 Express、Vercel 的 AI SDK 和 Pica 的 AI 基礎設施輕鬆連接到多個 API。

先決條件

開始之前,請確保已安裝 Node.js 和 npm。您還需要 OpenAI API 金鑰和 Pica 金鑰。 建立一個新專案並安裝所需的套件:

npm install express @ai-sdk/openai ai @picahq/ai dotenv

接下來,在專案的根目錄中建立一個 .env 檔案並新增 API 金鑰:

<code>PICA_SECRET_KEY=your-pica-secret-key
OPENAI_API_KEY=your-openai-api-key
PORT=3000</code>

請記得將佔位鍵替換為您的實際鍵。

第 1 步:設定 Express 伺服器

建立server.js並建立一個基本的 Express 伺服器來處理 AI 互動:

import express from "express";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { Pica } from "@picahq/ai";
import * as dotenv from "dotenv";

dotenv.config();

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.post("/api/ai", async (req, res) => {
  try {
    const { message } = req.body;
    const pica = new Pica(process.env.PICA_SECRET_KEY);
    const systemPrompt = await pica.generateSystemPrompt();

    const { text } = await generateText({
      model: openai("gpt-4o"),
      system: systemPrompt,
      tools: { ...pica.oneTool },
      prompt: message,
      maxSteps: 5,
    });

    res.setHeader("Content-Type", "application/json");
    res.status(200).json({ text });
  } catch (error) {
    console.error("Error:", error);
    res.status(500).json({ error: "Server error" });
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

export default app;

第 2 步:API 檢定

啟動你的伺服器。 您可以使用 /api/ai 或 Postman 檢定 curl 端點:

curl --location 'http://localhost:3000/api/ai' \
--header 'Content-Type: application/json' \
--data '{ "message": "What connections do I have access to?" }'

預計會收到指示沒有可用連線的回應,直到您在 Pica 儀表板中設定連線為止。

理解程式碼

程式碼使用了幾個關鍵元件:

  1. Express:管理伺服器和路由。
  2. @ai-sdk/openaiai: 處理 OpenAI API 呼叫。
  3. @picahq/ai: 提供對 Pica 基礎設施的存取。
  4. dotenv:.env 檔案安全載入 API 金鑰。
  5. /api/ai端點初始化Pica,產生系統提示,處理使用者的訊息,並傳回AI的回應。

第 3 步:後續步驟與部署

  • 增強功能:為生產環境實現身分驗證和速率限制。
  • 擴充:利用 Pica 的附加工具連接到更廣泛的 API 和資料來源。
  • 部署:將您的伺服器部署到 Vercel 或 AWS 等平台,以實現更廣泛的可存取性。

結論

您已經成功為可以與眾多 API 互動的 AI 代理奠定了基礎。 在此基礎上進行擴展,以自動執行任務、處理複雜的請求以及與其他服務無縫整合。 請隨時分享您的問題或在 Twitter 上聯繫! 快樂編碼!

以上是使用 Vercel 的 AI SDK 和 Pica 的 OneTool 建置連接到無限 API 的 AI 代理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Stock Market GPT

Stock Market GPT

人工智慧支援投資研究,做出更明智的決策

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

JavaScript實現點擊圖片切換效果:專業教程 JavaScript實現點擊圖片切換效果:專業教程 Sep 18, 2025 pm 01:03 PM

本文將介紹如何使用JavaScript實現點擊圖片切換的效果。核心思路是利用HTML5的data-*屬性存儲備用圖片路徑,並通過JavaScript監聽點擊事件,動態切換src屬性,從而實現圖片切換。本文將提供詳細的代碼示例和解釋,幫助你理解和掌握這種常用的交互效果。

如何使用JavaScript中的GeOlocation API獲取用戶的位置? 如何使用JavaScript中的GeOlocation API獲取用戶的位置? Sep 21, 2025 am 06:19 AM

首先檢查瀏覽器是否支持GeolocationAPI,若支持則調用getCurrentPosition()獲取用戶當前位置坐標,並通過成功回調獲取緯度和經度值,同時提供錯誤回調處理權限被拒、位置不可用或超時等異常,還可傳入配置選項以啟用高精度、設置超時時間和緩存有效期,整個過程需用戶授權並做好相應錯誤處理。

JavaScript中DOM元素訪問的常見陷阱與解決方案 JavaScript中DOM元素訪問的常見陷阱與解決方案 Sep 15, 2025 pm 01:24 PM

本文旨在解決JavaScript中通過document.getElementById()獲取DOM元素時返回null的問題。核心在於理解腳本執行時機與DOM解析狀態。通過正確放置標籤或利用DOMContentLoaded事件,可以確保在元素可用時再嘗試訪問,從而有效避免此類錯誤。

NUXT 3組成API解釋了 NUXT 3組成API解釋了 Sep 20, 2025 am 03:00 AM

Nuxt3的CompositionAPI核心用法包括:1.definePageMeta用於定義頁面元信息,如標題、佈局和中間件,需在中直接調用,不可置於條件語句中;2.useHead用於管理頁面頭部標籤,支持靜態和響應式更新,需與definePageMeta配合實現SEO優化;3.useAsyncData用於安全地獲取異步數據,自動處理loading和error狀態,支持服務端和客戶端數據獲取控制;4.useFetch是useAsyncData與$fetch的封裝,自動推斷請求key,避免重複請

如何在JavaScript中創建多行字符串? 如何在JavaScript中創建多行字符串? Sep 20, 2025 am 06:11 AM

thebestatoreateamulti-linestlinginjavascriptsisisingsistisingtemplatalalswithbacktticks,whatpreserveticks,whatpreservereakeandeexactlyaswrite。

JavaScript中數字格式化:使用toFixed()方法保留固定小數位 JavaScript中數字格式化:使用toFixed()方法保留固定小數位 Sep 16, 2025 am 11:57 AM

本教程詳細講解如何在JavaScript中將數字格式化為固定兩位小數的字符串,即使是整數也能顯示為"#.00"的形式。我們將重點介紹Number.prototype.toFixed()方法的使用,包括其語法、功能、示例代碼以及需要注意的關鍵點,如其返回類型始終為字符串。

如何在JavaScript中使用setInterval創建重複間隔 如何在JavaScript中使用setInterval創建重複間隔 Sep 21, 2025 am 05:31 AM

要創建JavaScript中的重複間隔,需使用setInterval()函數,它會以指定毫秒數為間隔重複執行函數或代碼塊,例如setInterval(()=>{console.log("每2秒執行一次");},2000)會每隔2秒輸出一次消息,直到通過clearInterval(intervalId)清除,實際應用中可用於更新時鐘、輪詢服務器等場景,但需注意最小延遲限制、函數執行時間影響,並在不再需要時及時清除間隔以避免內存洩漏,特別是在組件卸載或頁面關閉前應清理,確保

如何將文本複製到JavaScript中的剪貼板? 如何將文本複製到JavaScript中的剪貼板? Sep 18, 2025 am 03:50 AM

使用ClipboardAPI的writeText方法可複製文本到剪貼板,需在安全上下文和用戶交互中調用,支持現代瀏覽器,舊版可用execCommand降級處理。

See all articles