人工智能已经成为技术行业的推动力，使机器能够学习和执行以前被认为是人类独有的任务。领先的 AI 研究机构 OpenAI 一直走在这场革命的最前沿，开发可以处理自然语言并生成类似人类文本的强大模型。其中一个模型是 ChatGPT API，它可以对文本输入生成连贯且上下文相关的响应。
对于使用 Next.js（一种用于构建 Web 应用程序的流行 React 框架）的开发人员来说，集成 ChatGPT API 可以为对话式 AI 开启新的可能性。我的电脑在做什么提供了所有正在运行的程序的详细信息在本指南中，我们将探索 ChatGPT API 的强大功能，并向您展示如何将其与 Next.js 结合使用来构建更智能、更具吸引力的聊天机器人。无论您是经验丰富的开发人员还是刚刚开始使用 Next.js，本指南都将为您提供将对话式 AI 提升到新水平所需的知识和工具。因此，让我们开始并通过从头到尾集成 ChatGPT API 构建一个完整的 Web 应用程序来释放 ChatGPT API 的全部潜力。
检索 OpenAI API 密钥
为了能够在我们的 Next.js 应用程序中使用 OpenAI 的 API，我们需要先从 OpenAI 仪表板检索 API 密钥。
要检索您的 OpenAI API 密钥，您需要在 https://openai.com/ 创建一个用户帐户并访问 OpenAI 仪表板中的 API 密钥部分以创建一个新的 API 密钥。
此密钥是秘密的，不得与任何其他人共享。稍后在实现 Python 脚本以访问 OpenAI 的 API 时，我们将需要使用此密钥。
设置 Next.js 13 项目
接下来，我们需要创建一个新的 Next.js 13 项目来开始实施。使用以下命令：
$ npx create-next-app@latest --experimental-appexperimental -app标志指定我们要在 Next.js 项目中使用新的应用程序文件夹结构。
为了完成项目的创建过程，您需要在命令行中回答几个问题：
最后，您可以输入以下命令进入新创建的项目文件夹：
$ cd next13_chatgpt_api由于我们想将 Chakra UI 用于 Web 应用程序的用户界面，因此我们需要安装更多依赖项：
$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/next-js成功安装 Chakra UI 依赖项后，我们需要通过打开文件 app/layout.js 激活 Chakra UI 在我们的应用程序中的使用，并将应用程序的页面嵌入到 CacheProvider 和 ChakraProvider 组件中，如下面的清单所示：
'use client'
import { CacheProvider } from "@chakra-ui/next-js";
import { ChakraProvider } from "@chakra-ui/react";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
</body>
</html>
);
}
最低0.47元/天 解锁文章
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
