Next.js – 結合Nvidia NIM
前端
將以下程式碼貼上 app/ai-chat/page.tsx
'use client'
import { useState } from 'react'
import { getAIResponse } from '../actions/ai-chat'
export default function ChatInterface() {
const [response, setResponse] = useState('')
const [loading, setLoading] = useState(false)
const handleSubmit = async (formData: FormData) => {
const prompt = formData.get('prompt') as string
setLoading(true)
const result = await getAIResponse(prompt)
if (result.success) {
setResponse(result.message)
}
setLoading(false)
}
return (
<form action={handleSubmit}>
<input name="prompt" disabled={loading} />
<button type="submit" disabled={loading}>
{loading ? '思考中...' : '送出'}
</button>
<div>{response}</div>
</form>
)
}Code language: JavaScript (javascript)
後端
使用server action 架構,將以下程式碼貼上app/actions/aiChatActions.ts
'use server'
export async function getAIResponse(prompt: string) {
// 1. 安全性檢查:確保有 API Key
const apiKey = process.env.NVIDIA_NIM_API_KEY;
if (!apiKey) {
throw new Error("Missing NVIDIA_NIM_API_KEY");
}
// 2. 呼叫 NIM API (假設使用其標準推理端點)
try {
const response = await fetch('https://integrate.api.nvidia.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
body: JSON.stringify({
model: "your-model-name", // 替換成您選擇的 NIM 模型名稱
messages: [{ role: "user", content: prompt }],
temperature: 0.5,
max_tokens: 1024,
}),
});
if (!response.ok) {
throw new Error(`NIM API Error: ${response.statusText}`);
}
const data = await response.json();
return { success: true, message: data.choices[0].message.content };
} catch (error) {
return { success: false, error: "無法取得 AI 回應" };
}
}Code language: JavaScript (javascript)
環境變數設定
將 NVIDIA NIM API Key 存放在專案根目錄的 .env.local 檔案中,這樣它就不會被提交到版本控制系統(如 GitHub)。
NVIDIA_NIM_API_KEY=your_actual_api_key_here 