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

Leave a Reply

Your email address will not be published. Required fields are marked *