Convert Figma logo to code with AI

ourongxing logochatgpt-vercel

Elegant and Powerfull. Powered by OpenAI and Vercel.

3,201
3,013
3,201
41
View on GitHub

Top Related Projects

transitive-bullshit's avatar

agentic

16,363

AI agent stdlib that works with any LLM and TypeScript AI SDK.

lencx's avatar

ChatGPT

52,615

🔮 ChatGPT Desktop Application (Mac, Windows and Linux)

fuergaosi233's avatar

wechat-chatgpt

13,245

Use ChatGPT On Wechat via wechaty

Chanzhaoyu's avatar

chatgpt-web

31,395

用 Express 和 Vue3 搭建的 ChatGPT 演示网页

ChatGPTNextWeb's avatar

ChatGPT-Next-Web

75,716

A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。

Quick Overview

The ourongxing/chatgpt-vercel repository is a project that deploys ChatGPT on Vercel, providing a web-based interface for interacting with OpenAI's language model. It offers a customizable and easily deployable solution for creating a ChatGPT-like experience on your own domain.

Pros

  • Easy deployment on Vercel with minimal configuration
  • Customizable UI and functionality to suit specific needs
  • Supports multiple API endpoints, including Azure OpenAI
  • Implements rate limiting and request throttling for better resource management

Cons

  • Requires an OpenAI API key, which may involve costs
  • Limited to the capabilities of the underlying OpenAI model
  • May require additional configuration for advanced features
  • Potential for high usage costs if not properly managed

Getting Started

  1. Fork the repository on GitHub
  2. Sign up for a Vercel account if you don't have one
  3. Create a new project on Vercel and connect it to your forked repository
  4. Set the following environment variables in your Vercel project settings:
    • OPENAI_API_KEY: Your OpenAI API key
    • CODE: (Optional) Set a password for accessing the chat interface
  5. Deploy the project on Vercel
  6. Access your deployed ChatGPT interface at the provided Vercel URL

For more detailed instructions and customization options, refer to the repository's README.md file.

Competitor Comparisons

transitive-bullshit logo

agentic

16,363

AI agent stdlib that works with any LLM and TypeScript AI SDK.

Pros of agentic

  • More comprehensive AI agent framework with support for multiple models and tools
  • Focuses on building autonomous AI agents with goal-oriented behavior
  • Provides a flexible architecture for creating complex AI workflows

Cons of agentic

  • Steeper learning curve due to its more advanced features and concepts
  • May be overkill for simple chatbot applications
  • Requires more setup and configuration compared to chatgpt-vercel

Code comparison

chatgpt-vercel:

export default async function handler(req: NextRequest) {
  const { prompt, key, temperature } = (await req.json()) as ChatRequest
  const apiKey = key || process.env.OPENAI_API_KEY
  // ... (API call and response handling)
}

agentic:

const agent = new Agent({
  name: 'My Agent',
  goal: 'Accomplish a specific task',
  tools: [new WebBrowser(), new Calculator()],
  model: new OpenAIChat({ apiKey: process.env.OPENAI_API_KEY })
})

const result = await agent.run()

The code snippets highlight the difference in complexity and focus between the two projects. chatgpt-vercel provides a simpler API handler for chat requests, while agentic offers a more sophisticated agent setup with various tools and goal-oriented behavior.

lencx logo

ChatGPT

52,615

🔮 ChatGPT Desktop Application (Mac, Windows and Linux)

Pros of ChatGPT

  • Desktop application with cross-platform support (Windows, macOS, Linux)
  • More feature-rich, including prompt library, export options, and system tray support
  • Regular updates and active development

Cons of ChatGPT

  • Larger application size due to being a desktop app
  • Requires installation and updates, unlike web-based solutions
  • May have a steeper learning curve for new users due to additional features

Code Comparison

ChatGPT (Tauri-based desktop app):

#[tauri::command]
fn get_data() -> String {
    // Desktop-specific implementation
}

chatgpt-vercel (Web-based):

export async function getData() {
  // Web-based implementation
}

The code comparison highlights the fundamental difference in architecture between the two projects. ChatGPT uses Rust with Tauri for desktop app development, while chatgpt-vercel employs JavaScript for a web-based solution. This difference affects deployment, user experience, and potential feature sets.

ChatGPT offers a more comprehensive, native-like experience with offline capabilities and system integration. In contrast, chatgpt-vercel provides a lightweight, easily accessible web interface without installation requirements. The choice between the two depends on user preferences, target platforms, and desired features.

fuergaosi233 logo

wechat-chatgpt

13,245

Use ChatGPT On Wechat via wechaty

Pros of wechat-chatgpt

  • Integrates directly with WeChat, allowing for seamless ChatGPT interactions within the popular messaging platform
  • Supports multiple ChatGPT accounts for load balancing and improved reliability
  • Includes features like message retry and error handling for a more robust user experience

Cons of wechat-chatgpt

  • More complex setup process due to WeChat integration requirements
  • Limited to WeChat platform, reducing flexibility for users on other platforms
  • May require ongoing maintenance to keep up with WeChat API changes

Code Comparison

wechat-chatgpt:

const { WechatyBuilder } = require('wechaty')
const qrcodeTerminal = require('qrcode-terminal')
const bot = WechatyBuilder.build()
bot.on('scan', (qrcode, status) => {
  qrcodeTerminal.generate(qrcode, { small: true })
})

chatgpt-vercel:

import { ChatGPTAPI } from 'chatgpt'
import { createParser } from 'eventsource-parser'
export default async function handler(req, res) {
  const api = new ChatGPTAPI({ apiKey: process.env.OPENAI_API_KEY })
  const response = await api.sendMessage(req.body.message)
}

The code snippets highlight the different focus areas of each project. wechat-chatgpt emphasizes WeChat integration, while chatgpt-vercel provides a more straightforward API interaction with ChatGPT, making it easier to deploy on Vercel's serverless platform.

Chanzhaoyu logo

chatgpt-web

31,395

用 Express 和 Vue3 搭建的 ChatGPT 演示网页

Pros of chatgpt-web

  • More comprehensive features, including conversation management and export functionality
  • Better suited for self-hosting and customization
  • Supports multiple API endpoints and custom API keys

Cons of chatgpt-web

  • More complex setup and configuration process
  • Requires additional server resources due to its expanded feature set
  • May have a steeper learning curve for users unfamiliar with Vue.js and Node.js

Code Comparison

chatgpt-web (Vue.js component):

<template>
  <div class="chat-message" :class="{ 'chat-message-user': inversion }">
    <div class="chat-message-container">
      <div class="chat-message-avatar">
        <img :src="avatar" alt="avatar">
      </div>
      <div class="chat-message-content">
        <template v-if="!inversion">
          <div class="chat-message-text" v-html="text"></div>
        </template>
        <template v-else>
          <div class="chat-message-text">{{ text }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

chatgpt-vercel (React component):

export function ChatMessage(props: {
  message: Message
  showWordCount?: boolean
  showTokenCount?: boolean
  showModelName?: boolean
  hightlightCodeBlock?: boolean
}) {
  return (
    <div className={`flex flex-col ${props.message.role === 'user' ? 'items-end' : 'items-start'}`}>
      <div className={`flex items-center ${props.message.role === 'user' ? 'flex-row-reverse' : ''}`}>
        <Avatar role={props.message.role} />
        <div className={`px-3 py-2 rounded-lg ${props.message.role === 'user' ? 'bg-[#10a37f] text-white' : 'bg-[#f4f6f8] text-black'}`}>
          {props.message.content}
        </div>
      </div>
    </div>
  )
}
ChatGPTNextWeb logo

ChatGPT-Next-Web

75,716

A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。

Pros of ChatGPT-Next-Web

  • More feature-rich with advanced functionalities like custom prompts and plugins
  • Active development with frequent updates and improvements
  • Larger community support and contributions

Cons of ChatGPT-Next-Web

  • More complex setup and configuration process
  • Higher resource requirements due to additional features

Code Comparison

ChatGPT-Next-Web:

export function Markdown(props: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[rehypeMathjax, rehypeHighlight]}
      components={{
        code({ node, inline, className, children, ...props }) {
          // ... (code implementation)
        },
      }}
      {...props}
    >
      {props.content}
    </ReactMarkdown>
  );
}

chatgpt-vercel:

export default function Markdown({ content }: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        code({ node, inline, className, children, ...props }) {
          // ... (code implementation)
        },
      }}
    >
      {content}
    </ReactMarkdown>
  );
}

The code comparison shows that ChatGPT-Next-Web includes additional plugins for enhanced markdown rendering, such as math support and syntax highlighting, while chatgpt-vercel uses a simpler implementation with fewer plugins.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ChatGPT-Vercel

https://user-images.githubusercontent.com/48356807/232432194-46ba797f-ad9d-476a-a739-20e0b3d63eb2.mp4

本项目基于 chatgpt-demo 开发。正式版本（v1.0.0）使用 Solid-Start 框架，并且不再开启 SSR。请重新设置环境变量。

在线预览:

  1. vercel.app 被墙。

特点

  1. UI 优雅简洁的同时功能尽可能强大，细节满满，等你发现。同时满足小白和大佬使用。
  2. 支持 PWA。
  3. 支持 Prompts 预设，使用 空格 或者 / 搜索，可以模糊匹配，突出显示匹配的文字。
  4. 支持多个对话（聊天），并且每个对话都可以单独设置，自由设置角色，不同对话可以通过 URL 直达。使用 空格空格 或者 // 搜索，可以模糊匹配，搜索历史消息。
  5. 支持导出和导入对话和设置。
  6. 实时查看当前对话会消耗的 token 以及回答的 token，及时打断。
  7. 支持多种余额查询方式，支持定时查询内置账号余额，并且发送到微信。
  8. 支持 URL query，当作搜索引擎使用，所有对话都支持。比如 url?q=keyword 或者 url/session/xxxxx?q=keyword

使用技巧

  • 有效上下文：剔除报错的部分对话。如果关闭连续对话，将只统计锁定了的部分对话。这个概念很关键。
  • 锁定对话：点击每条消息前面的头像，就可以锁定了。锁定有什么好处？清空对话时，锁定了的不会删除。关闭连续对话时，始终会发送锁定了的对话，相当于角色设定。关闭 记录对话内容 后，始终会记录锁定了的对话，下次刷新仍然存在。
  • Open AI Key 要怎么获得：注册 OpenAI 的帐号，然后 生成 Key 就行了。现在注册就送 5 美元，可以用一两个月。嫌注册麻烦，可以直接去买号，自行搜索。注意不要被骗，一般 5 元以下可以入手，看到有 120 美元的 key，这种属于是绑了虚拟信用卡，可以透支 120 美元，只能用一个月，而且容易封号。现在没绑卡的账号限制比较多，并且容易封号。绑了卡也会优先扣除赠送的余额。
  • 输入框
    • Enter发送（可关闭），Shift+Enter换行。
    • 空格 或者 / 搜索 Prompt 预设，可以模糊匹配。所有 Prompt 可以查看 prompts.md 。
    • 使用 空格空格 或者 // 搜索其它对话，可以模糊匹配，搜索历史消息。
    • ↑ 将最近的一次提问填到输入框里。
  • 消息上的动作
    • 提问
      • 编辑：不能原地编辑，只能自动填到输入框里。
      • 重新回答：删除当前对话，然后自动发送。
      • 删除：删除当前对话。
    • 回答
      • 复制
      • 重新回答
      • 删除：只删除回答。
  • 点击顶部标题滚动到顶部，点击输入框滚动到底部。
  • url 里使用 url?q=你好啊 这种方式可以打开网页直接回答 你好啊，当作搜索引擎使用。所有的对话中都可以使用。

设置与动作

右边四个按钮是动作，点击就可以执行。

  • 伪装角色：伪装时直接进入对话里，不会发送请求。可以伪装成用户提问以及 GPT 回答。发送后自动关闭伪装。
  • 将当前对话生成图片，方便分享。在电脑上直接复制到剪贴板，手机上是下载。
  • 将当前对话生成 Markdown，直接复制到剪贴板。
  • 清空对话。

image-20230417134751367

现在支持了多个对话，也就是多个聊天。不同的对话可以单独设置，也有不同的链接，标题，图标。所以现在有了两个设置按钮，第一个是全局设置，可以填写密码，API Key，也可以关闭 Enter 键发送，这样在手机上也可以换行。

image-20230417134833609

第二个是对话设置，尽当前对话有效，针对不同的用途自行设置。目前 GPT4 仍然处于 waitlist 阶段，如果没有资格，那么无法使用。

思维发散程度越高，ChatGPT 就会乱答，如果是开放性的问题，可以适当调高，但也不要超过 1。需要确切答案的建议调为 0。

开启 记录对话内容 后，对话刷新也不会清空。开启连续对话后，每次会发送所有有效上下文，一开始提过有效上下文这个概念。

image-20230417134804056

当你点击了设置按钮之后，会发现右边的动作按钮也发生了变化。打开全局设置后，出现的导出和导入按钮。可以导出和导入所有的设置和对话。

而打开对话设置之后，在首页，也就是主对话里，就只有一个新建对话的按钮，当你新建了对话。就会出现复制对话链接以及删除对话的按钮。值得注意的是，目前这个链接只能你自己能打开，并没有上传到云端。

image-20230417135644474

在新的对话里，你可以设置标题，甚至可以设置图标，试试在标题前面加一个 Emoji。

部署一个你自己的 ChatGPT 网站（免费，国内直连）

Warning

vercel.app 域名已经被墙，但 vercel 本身没有被墙，所以你绑定自己的域名就可以了。如果广泛分享，域名有被墙的风险。如果是国内购买的域名，有请去喝茶的风险，所以要么小范围加密码使用，要么在国外购买域名。更推荐小范围内使用。

如果你只需要部署一个你自己用的网站，而不需要定制，那么你完全不需要在本地跑起来，你可以直接点击下面的按钮，然后按照提示操作，然后在 Vercel 中填入环境变量即可。

Deploy with Vercel

不过上面这种方式不容易更新，最好还是先 fork 本仓库，然后在 Vercel 中导入你自己的仓库，之后要更新就在 Github 里点击 Sync fork 就可以同步更新了。

如果你需要部署给更多人用，需要修改一些代码，那么你可能需要将上面创建的你自己的仓库 git clone 到本地。改完了 git commit & push 即可重新部署，vscode 上点几下就可以了。也可以用 vercel 的 cli，vercel deploy --prod。

如果你需要在本地开发和调试，有点麻烦：

  1. 升级到 node18，要用到原生的 fetch 和 readableStream。
  2. API 被墙了，自己想办法开代理，不然要报错。可以设置 OpenAI 的代理 API，也可以直接 vercel deploy 部署到 vercel 开发环境上调试。
  3. pnpm i 安装依赖。
  4. pnpm dev 启动项目。

更多部署方案

目前本项目除 Vercel 以外还支持

  • Netlify：直接导入即可。
  • CloudFlare Worker：使用 Github Action 部署，需要设置 CF_API_TOKEN。
  • Railway：直接导入即可。

不建议使用除 Vercel 以外的部署方案。 除了比较慢以外，更重要的是只有 Vercel 支持设置 Edge Function 服务器的地区，其他平台会自动使用距离最近的服务器，有可能是 OpenAI 不支持的地区，从而导致封号。

环境变量

以 CLIENT_ 开头的变量会暴露给前端，请不要填写敏感信息。

环境变量说明默认值
OPENAI_API_KEYOpenAI API Key，可以填写多个，用 | 或者 换行 隔开，随机调用。最好是多填几个，API 有并发上的限制。如果用户不填自己的 key，那么就会使用你的 key。无
OPENAI_API_BASE_URL本地开发时可以填写 OpenAI 的代理服务器，但是 Vercel 不需要。并且不建议生产阶段使用。api.openai.com
NO_GFW表示可以服务器可以直连，不需要OPENAI_API_BASE_URL，就算设置了也不使用。false
TIMEOUTOpenAI API 超时。单位为毫秒，Vercel Edge Function 最大超时为 30000。30000
PASSWORD网站密码无
CLIENT_DEFAULT_MESSAGE默认提示信息- xx xx
CLIENT_GLOBAL_SETTINGS默认全局设置{"APIKey":"","password":"","enterToSend":true}
CLIENT_SESSION_SETTINGS默认对话设置，对话设置在每个对话中都是独立的。{"title":"","saveSession":true,"APITemperature":0.6,"continuousDialogue":true,"model":"gpt-3.5"}
CLIENT_MAX_INPUT_TOKENS有效上下文+输入的 token 数。OpenAI 不同模型的最大 token 不一样，价格也不同，可以分别设置。并且 OpenAI 会统计输入+输出之和，但我们这里只限制输入。{"gpt-3.5":16000,"gpt-4":32000}

有两种设置方式

  1. 将 .env.example 文件修改为 .env，在 .env 中设置。

  2. Vercel 中设置 Environment Variables。尽量使用这种方式，比较方便。会在下次部署时生效。

默认全局设置

记得删除注释，或者直接复制上面表格里的。

{
  "APIKey": "", // 默认填写的 key，不需要填写，否则其他人看得到。
  "password": "", // 默认填写的密码，不需要填写，否则其他人看得到。
  "enterToSend": true // 回车键发送消息
}

默认对话设置

对话设置在每个对话中都是独立的。记得删除注释，或者直接复制上面表格里的。

{
  "title": "", // 对话标题，不需要填写
  "saveSession": true, // 记录当前对话内容，刷新不会丢失。关闭后仍然会记录锁定的对话。
  "APITemperature": 0.6, // 0-2，思维发散程度，越高 ChatGPT 思维就越发散，开始乱答，甚至会乱码，建议小于 1 。
  "continuousDialogue": true, // 开启连续对话，每次都需要将上下文传给 API。
  "model": "gpt-4o-mini" // 模型
}

提交你的 Prompts

  1. Fork 本项目。
  2. 修改 prompts.md。
  3. Pull Request 即可。

如果你不懂这个操作，也可以直接在 Issues 提交你的 Prompts。目前大部分 Prompts 来自于 awesome-chatgpt-prompts-zh，当然，这个仓库大多数也是翻译的 awesome-chatgpt-prompts，一并感谢。

要求

  • 把需要输入的内容放在最后，可以提示 ChatGPT 开始输入了，比如 “我的第一句话是：”。
  • 尽可能去优化已有的 Prompts，而不是重复添加。
  • 添加到结尾，我会定期整理。

赞赏

如果本项目对你有所帮助，可以给小猫买点零食，但不接受任何付费功能请求。

License

MIT