Build a ChatGPT‑Powered App in 3 Minutes with Laf’s Serverless Cloud

Background

OpenAI has released the official ChatGPT API powered by the gpt‑3.5‑turbo model, which is faster and cheaper than previous versions. Developers often need to integrate ChatGPT into their products, but direct API access can be restricted, leading to the use of proxy services.

Why Use Laf

Laf is a fully open‑source, one‑stop cloud development platform that provides ready‑to‑use cloud functions, databases, and object storage, allowing you to write code as easily as writing a blog post.

Prerequisites

You need a ChatGPT account and an API key. The key will be stored in an environment variable named CHAT_GPT_API_KEY.

Cloud Function Tutorial

Log in to laf.dev, create a new application, and add the chatgpt dependency via the NPM panel.

Create a cloud function named send with the following code:

import cloud from '@lafjs/cloud'
export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY })
  let res = await api.sendMessage('"鸡你太美"指的是中国大陆哪位男艺人？给你个提示，他喜欢唱、跳、篮球、Rap')
  console.log(res.text)
  return res.text
}

To enable context tracking, modify the function to store the API instance in cloud.shared and accept an optional parentMessageId:

import cloud from '@lafjs/cloud'
export async function main(ctx: FunctionContext) {
  const { ChatGPTAPI } = await import('chatgpt')
  const data = ctx.body
  let api = cloud.shared.get('api')
  if (!api) {
    api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY })
    cloud.shared.set('api', api)
  }
  let res
  if (!data.parentMessageId) {
    res = await api.sendMessage(data.message)
  } else {
    res = await api.sendMessage(data.message, { parentMessageId: data.parentMessageId })
  }
  return res
}

Frontend Integration

Install the Laf client SDK:

$ npm install laf-client-sdk

Create a cloud object in your web page (replace <appid> with your App ID):

import { Cloud } from "laf-client-sdk"
const cloud = new Cloud({
  baseUrl: "https://<appid>.laf.dev",
  getAccessToken: () => ""
})

Send a message and optionally pass the previous parentMessageId to keep conversation context:

async function send() {
  const message = question.value
  let res
  if (!parentMessageId.value) {
    res = await cloud.invoke("send", { message })
  } else {
    res = await cloud.invoke("send", { message, parentMessageId: parentMessageId.value })
  }
  parentMessageId.value = res.id
  // res.text contains the reply
}

Deployment

After testing locally, build the frontend with npm run build, upload the generated dist folder to a readonly storage bucket in Laf, and enable "Website Hosting". The platform will provide a public URL for your ChatGPT web app.

The entire process—from creating the cloud function to deploying the frontend—can be completed in about three minutes.