nuxt-chatgpt

nuxt-chatgpt is a lightweight, type-safe module for Nuxt 3 that provides seamless ChatGPT integration.

Key Capabilities:

• Composable Access: Use the useChatgpt() composable to access core methods.
• Core Methods: Includes chat, chatCompletion, and generateImage.
• Streaming Support: Provides chatCompletionStream for real-time Server-Sent Events (SSE) responses.
• Security: All requests are routed through a Nitro Server to prevent exposing your OpenAI API Key to the client side.

The primary difference lies in context:

• chat: Designed for simple, single-turn interactions. You send a prompt, and the model provides a response. It is ideal for basic chatbots or single-question interfaces.
• chatCompletion: Designed for multi-turn conversations. It accepts an array of messages (history), allowing the model to maintain context and provide responses consistent with previous parts of the conversation. This is necessary for building complex, natural conversational agents.

The useChatgpt() composable is the primary interface for interacting with ChatGPT within your Nuxt application. It provides type-safe access to the following methods:

• chat: For standard chat interactions.
• chatCompletion: For generating completions.
• chatCompletionStream: For real-time streamed responses (SSE).
• generateImage: For image generation tasks.

When choosing between these two methods, consider your UI requirements:

• chatCompletionStream: Returns the assistant response as a stream (token-by-token). Use this to build ChatGPT-like interfaces where text is displayed incrementally as it is generated.
• chatCompletion: Returns the full response at once after generation is complete.

To integrate ChatGPT into your Nuxt 3 project, add the nuxt-chatgpt dependency and register it in your nuxt.config.ts. The module uses the openai library (v4.0.0) under the hood and routes requests through a Nitro Server to keep your API Key secure.

Prerequisites

• Node.js: Minimum v18.20.5, recommended v20.19.0.

Installation

Run the following command to add the module:

npx nuxt module add nuxt-chatgpt

Configuration

Add nuxt-chatgpt to your modules array in nuxt.config.ts. You can optionally provide your OpenAI apiKey within the chatgpt configuration object.

export default defineNuxtConfig({
  modules: ["nuxt-chatgpt"],

  // entirely optional
  chatgpt: {
    apiKey: 'Your apiKey here goes here'
  },
})

The nuxt-chatgpt module can be configured in your Nuxt configuration file using the following options:

Note: isEnabled is true by default.

Use chat() for simple, single-turn interactions where you only need to send a single string and get a response. By default, it uses the gpt-4o-mini model if unspecified.

const { chat } = useChatgpt()
const inputData = ref('')
const data = ref('')

async function sendMessage() {
  try {
    const response = await chat(inputData.value)
    data.value = response
  } catch(error) {
    alert(`Error: ${error}`)
  }
}

Use generateImage() to create images from text prompts. The method returns an array of image objects. If the response format is b64_json, you will need to convert the base64 string to a Blob URL to display it in an <img> tag.

const { generateImage } = useChatgpt()
const images = ref([])
const inputData = ref('')

function b64ToBlobUrl(b64) {
  const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
  const blob = new Blob([bytes], { type: "image/png" });
  return URL.createObjectURL(blob);
}

async function sendPrompt() {
  try {
    const result = await generateImage(inputData.value);
    images.value = result.map((img) => ({
      url: b64ToBlobUrl(img.b64_json),
    }));
  } catch (error) {
    alert(`Error: ${error}`);
  }
}

Use chatCompletion() when you need to maintain context. You must pass an array of message objects containing role and content to allow the model to understand the conversation history.

const { chatCompletion } = useChatgpt()
const chatTree = ref([])
const inputData = ref('')

async function sendMessage() {
  try {
    const message = {
      role: 'user',
      content: inputData.value,
    }
    chatTree.value.push(message)

    const response = await chatCompletion(chatTree.value)
    
    const responseMessage = {
      role: response[0].message.role,
      content: response[0].message.content
    }
    chatTree.value.push(responseMessage)
  } catch(error) {
    alert(`Error: ${error}`)
  }
}

To access the core functionality of the nuxt-chatgpt module, use the useChatgpt() composable. It provides access to the following methods:

• chat(message, model?, options?): Sends a single text message and receives a response.
• chatCompletion(messages, model?, options?): Sends an array of message objects (conversation history) and receives a response.
• chatCompletionStream(messages, model?, options?, callbacks?): Sends an array of message objects and receives a streamed response via callbacks.
• generateImage(message, model?, options?): Generates images based on a text description.

const { chat, chatCompletion, chatCompletionStream, generateImage } = useChatgpt()

When configuring nuxt-chatgpt within your Nuxt application, use the key chatgpt to access the module's configuration options in your nuxt.config.ts or when accessing the module via runtime config.

// Example usage in nuxt.config.ts
export default defineNuxtConfig({
  chatgpt: {
    // your configuration here
  }
})