将生成式 AI 与 MERN 应用程序集成

# Web 开发# JavaScript# 机器学习

介绍

生成式人工智能 (Gen AI) 已成为现代应用程序开发创新的基石。通过利用 GPT（生成式预训练 Transformer）等模型，开发人员可以构建能够生成类似人类的文本、创建图像、总结内容等的应用程序。将生成式人工智能与 MERN（MongoDB、Express、React、Node.js）堆栈应用程序集成可以通过添加智能自动化、对话界面或创意内容生成功能来增强用户体验。本博客将指导您完成将 Gen AI 与 MERN 应用程序集成的过程，重点介绍实际实施。

MERN 应用中生成式 AI 的用例

  • 聊天机器人和虚拟助手：为客户支持或个性化帮助构建对话界面。
  • 内容生成：自动创建文章、产品描述或代码片段。
  • 总结：总结大段文本，例如研究论文或会议记录。
  • 推荐系统：根据用户输入或历史数据提供个性化建议。
  • 图像生成：动态为用户创建自定义视觉效果或设计。
  • 代码建议：帮助开发人员生成或优化代码片段。

    • 先决条件

    在将生成式 AI 集成到您的 MERN 应用程序之前，请确保您已：

  • MERN 应用程序：可在此基础上构建的功能性 MERN 堆栈应用程序。
  • 访问生成式 AI API：热门选项包括：OpenAI API：用于 GPT 模型。Hugging Face API：用于各种 NLP 模型。Cohere API：用于文本生成和摘要任务。Stability AI：用于图像生成。
  • API 密钥：从选定的 Gen AI 提供商处获取 API 密钥。
  • REST API 的基本知识：了解如何使用 axios 或 fetch 等库发出 HTTP 请求。

    • 逐步集成指南

    1.设置后端

    后端（Node.js + Express）将充当您的 MERN 应用程序和生成式 AI API 之间的桥梁。

    安装所需的软件包
    npm install express dotenv axios cors
    创建环境文件

    使用 `.env` 文件安全地存储您的 API 密钥：

    OPENAI_API_KEY=your_openai_api_key_here
    编写后端代码

    创建一个名为“server.js”或类似的文件并设置 Express 服务器：

    const express = require('express');
const axios = require('axios');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(express.json());
app.use(cors());

const PORT = 5000;

app.post('/api/generate', async (req, res) => {
    const { prompt } = req.body;

    try {
        const response = await axios.post(
            'https://api.openai.com/v1/completions',
            {
                model: 'text-davinci-003', // Adjust model based on your use case
                prompt,
                max_tokens: 100,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
                },
            }
        );

        res.status(200).json({ result: response.data.choices[0].text });
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Failed to generate response' });
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

    2. 连接前端

    在 React 中设置 API 调用

    使用 `axios` 或 `fetch` 从 React 前端调用后端 API。如果尚未安装 `axios`，请安装：

    npm install axios
    编写前端代码

    创建一个 React 组件来与后端交互：

    import React, { useState } from 'react';
import axios from 'axios';

const AIChat = () => {
    const [prompt, setPrompt] = useState('');
    const [response, setResponse] = useState('');
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);

        try {
            const result = await axios.post('http://localhost:5000/api/generate', { prompt });
            setResponse(result.data.result);
        } catch (error) {
            console.error('Error fetching response:', error);
            setResponse('Error generating response.');
        } finally {
            setLoading(false);
        }
    };

    return (
        
    
            
    Generative AI Chat