大家好，我是你们的 猫哥，好久不见 ~

今天继续推荐前端必备的 AI 项目！

如今是 AI 流行的天下，很多大公司都在用 AI 模型来帮助编写代码了，如何你还不懂如何利用 AI 来提升自己的效率，就有点落后了，所以本期推荐前端相关的 ChatGPT 项目。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

1. Visual Studio Code 的 GitHub Copilot 的免费版本

Visual Studio Code 宣布推出 GitHub Copilot 的免费版本，为所有开发者提供了一个 AI 辅助编程的工具，只需 GitHub 账号即可。

GitHub Copilot 免费版每月提供 2000 次代码补全，约合每天 80 次。对于大多数开发者来说，这已经足够使用。此外，你还可以享受每月 50 次聊天请求的机会，并且可以使用 GPT-4 和 Claude 3.5 Sonnet 模型。

在下面链接下载最新版使用

https://code.visualstudio.com

2. ai-chatbot

使用 Next.js 和 Vercel 的 AI SDK 构建的开源 AI 聊天机器人模板。

效果如下：

特征

ai-chatbot 的主要功能

• 高性能聊天应用：基于 Next.js App Router 实现高效页面加载和流畅切换。

• 服务器端渲染：基于 React Server Components（RSCs）和 Server Actions 提升性能。

• 统一 API：深度整合 AI SDK，提供与多种大语言模型（LLMs）交互的 API。

• 模型支持：默认使用 OpenAI 的 gpt-4o 模型，支持切换到 Anthropic、Cohere 等其他模型。

• UI 设计与交互：用 shadcn/ui 组件库和 Tailwind CSS 定制样式，提供美观、现代的聊天界面。

ai-chatbot 的技术原理

• Next.js 应用路由器

• • 高级路由可实现无缝导航和性能

  • React 服务器组件 (RSC) 和服务器操作用于服务器端渲染和提高性能

• 人工智能开发工具包

• • 使用 LLM 生成文本、结构化对象和工具调用的统一 API

  • 用于构建动态聊天和生成用户界面的钩子

  • 支持 OpenAI（默认）、Anthropic、Cohere 和其他模型提供商

• shadcn/ui

• • 使用Tailwind CSS 进行样式设置

  • Radix UI 的组件原语可实现可访问性和灵活性

• 数据持久性

• • 由 Neon 提供支持的 Vercel Postgres 用于保存聊天记录和用户数据

  • Vercel Blob 用于高效文件存储

• NextAuth.js

• • 简单、安全的身份验证

https://github.com/vercel/ai-chatbot

3. node-chatgpt-api

ChatGPT 和 Bing AI 的客户端实现。可用作 Node.js 模块、REST API 服务器和 CLI 应用。

主要特性

• 支持官方 ChatGPT 底层模型 gpt-3.5-turbo

• 支持 Bing 的 ChatGPT 版本(由 GPT-4 驱动)

• 包含 API 服务器,可在非 Node.js 应用中使用 ChatGPT

• 提供 CLI 界面,可直接在命令行与 ChatGPT 对话

• 支持对话线程、消息 ID 等功能

• 可配置提示词前缀,自定义 AI 助手的个性

技术实现

• 包括一个 API 服务器（支持 Docker），您可以运行它以在非 Node.js 应用程序中使用 ChatGPT。

• 包括一个 CLI 界面，您可以在其中与 ChatGPT 聊天。

• 包括您可以在自己的 Node.js 应用程序中使用的客户端。

• ChatGPTClient：通过 OpenAI 的 API 支持官方的 ChatGPT 底层模型gpt-3.5-turbo。

• • 本质上，这可以让你创建具有任何你想要的个性的聊天机器人。

  • 目前这只能在全球范围内进行配置，但我计划添加对每个对话定制的支持。

  • 对话默认存储在内存中，但您可以选择安装存储适配器 以将对话保存到数据库中。

  • 该keyv-file适配器也包含在此软件包中，如果您使用 API 服务器或 CLI，则可以使用该适配器将对话存储在 JSON 文件中（请参阅settings.example.js）。

  • 从 ChatGPT 官方网站复制聊天线程（带有对话 ID 和消息 ID），并使用Keyv 进行持久对话。

  • 支持可配置的提示前缀以及用户和 ChatGPT 的自定义名称。

  • 保留对以下模型的支持text-davinci-003

• BingAIClient：支持由 GPT-4 提供支持的 Bing 版本的 ChatGPT。

• • 包含可激活的内置越狱功能，可实现每次对话发送无限条聊天消息、每天发送无限条消息，并带回悉尼。😊

• ChatGPTBrowserClient：支持 ChatGPT 官方网站，使用反向代理服务器进行Cloudflare 绕过。

https://github.com/waylaidwanderer/node-chatgpt-api

4. chatgpt.js

chatgpt.js 是一个功能强大的 JavaScript 库，可轻松与 ChatGPT DOM 进行交互。

• 功能丰富

• 面向对象

• 易于使用

• 轻量级（但性能最优）

ChatGPT.js 以其全面的功能、面向对象的设计、简洁直观的 API、轻量级的体积以及优异的性能，成为了现代前端开发中不可或缺的工具。它不仅简化了与 ChatGPT DOM 交互的过程，还通过支持 ES6 模块导入，无缝集成了各种前端框架。

https://github.com/KudoAI/chatgpt.js

5. chatgpt-next

微信风格的 ChatGPT，使用 Next.js 构建，私有化部署的最佳选择！

特性

• 🎉 支持 gpt-4o 啦

• 微信风格的聊天气泡，支持移动/PC 端，打造最极致的交互体验

• 支持私有化部署，使用 Vercel / Zeabur / netlify 等一键部署

• 配置密钥别名，无需暴露 apiKey 就可以分享给朋友

https://github.com/xcatliu/chatgpt-next

最后

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

更多精彩项目，请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

不知不觉，原创文章已经写到第 74 期了呢！

往期精文

• 玩转 GitHub 篇，推荐 10 个你没见过的 GitHub 的高效开源神器，YYDS！