nuxt-chatgpt 0.3.0 → 0.4.0

package/README.md

@@ -2,8 +2,9 @@
 <br />
 <div>
   <div>
-  <h1>Hausly + Image Generator<a href="https://hausly.io" target="_blank">🔥(IMAGE DEMO)🔥</a></h2></h1>
-  <h2>Nuxt Chatgpt + Image Generator<a href="https://nuxtchatgpt.com" target="_blank">🔥(CHATGPT DEMO)🔥</a></h2>
+  <h1>Hausly + Image Generator<a href="https://hausly.io" target="_blank">🔥(Hausly)🔥</a></h1>
+  <h2>ReplyGuard + Generate Email Reply<a href="https://replyguard.ai" target="_blank">🔥(ReplyGuard)🔥</a></h2>
+  <h2>Nuxt Chatgpt + Image Generator<a href="https://nuxtchatgpt.com" target="_blank">🔥(Nuxt ChatGPT)🔥</a></h2>
   
   </div>
   <div style="display:flex; width:100%; justify-content:center">
@@ -31,10 +32,10 @@ This user-friendly module boasts of an easy integration process that enables sea
 - 💪 &nbsp; Easy implementation into any [Nuxt 3](https://nuxt.com) project.
 - 👉 &nbsp; Type-safe integration of Chatgpt into your [Nuxt 3](https://nuxt.com) project.
 - 🕹️ &nbsp; Provides a `useChatgpt()` composable that grants easy access to the `chat`, and `chatCompletion`, and `generateImage` methods.
+- 🕹️ &nbsp; Provides `chatCompletionStream` for real-time streamed responses (SSE).
 - 🔥 &nbsp; Ensures security by routing requests through a [Nitro Server](https://nuxt.com/docs/guide/concepts/server-engine), preventing the <b>API Key</b> from being exposed.
 - 🧱 &nbsp; It is lightweight and performs well.
 
-
 ## Recommended Node Version
 
 ### min `v18.20.5 or higher`
@@ -71,54 +72,56 @@ That's it! You can now use Nuxt Chatgpt in your Nuxt app 🔥
 
 ## Usage & Examples
 
-To access the `chat`, `chatCompletion`, and `generateImage` methods in the nuxt-chatgpt module, you can use the `useChatgpt()` composable, which provides easy access to them. 
+To access the `chat`, `chatCompletion`, `chatCompletionStream`, and `generateImage` methods in the nuxt-chatgpt module, you can use the `useChatgpt()` composable, which provides easy access to them.
 
 The `chat`, and `chatCompletion` methods requires three parameters:
 
-| Name | Type | Default | Description |
-|--|--|--|--|
-|**message**|`String`|available only for `chat()`|A string representing the text message that you want to send to the GPT model for processing.
-|**messages**|`Array`|available only for `chatCompletion()`|An array of objects that contains `role` and `content`
-|**model**|`String`|`gpt-5-mini` for `chat()` and `gpt-5-mini` for `chatCompletion()`|Represent certain model for different types of natural language processing tasks.
-|**options**|`Object`|`{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }`|An optional object that specifies any additional options you want to pass to the API request, such as, the number of responses to generate, and the maximum length of each response.
+| Name         | Type     | Default                                                                                      | Description                                                                                                                                                                          |
+| ------------ | -------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **message**  | `String` | available only for `chat()`                                                                  | A string representing the text message that you want to send to the GPT model for processing.                                                                                        |
+| **messages** | `Array`  | available only for `chatCompletion()` and `chatCompletionStream()`                           | An array of objects that contains `role` and `content`                                                                                                                               |
+| **model**    | `String` | `gpt-5-mini` for `chat()` and `gpt-5-mini` for `chatCompletion()`                            | Represent certain model for different types of natural language processing tasks.                                                                                                    |
+| **options**  | `Object` | `{ temperature: 0.5, max_tokens: 2048, top_p: 1 frequency_penalty: 0, presence_penalty: 0 }` | An optional object that specifies any additional options you want to pass to the API request, such as, the number of responses to generate, and the maximum length of each response. |
 
 The `generateImage` method requires one parameters:
 
-| Name | Type | Default | Description |
-|--|--|--|--|
-|**message**|`String`| A text description of the desired image(s). The maximum length is 1000 characters.
-|**model**|`String`|`gpt-image-1-mini`| The model to use for image generation.
-|**options**|`Object`|`{ n: 1, quality: 'standard', response_format: 'url', size: '1024x1024', style: 'natural' }`|An optional object that specifies any additional options you want to pass to the API request, such as, the number of images to generate, quality, size and style of the generated images.
+| Name        | Type     | Default                                                                                      | Description                                                                                                                                                                               |
+| ----------- | -------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **message** | `String` | A text description of the desired image(s). The maximum length is 1000 characters.           |                                                                                                                                                                                           |
+| **model**   | `String` | `gpt-image-1-mini`                                                                           | The model to use for image generation.                                                                                                                                                    |
+| **options** | `Object` | `{ n: 1, quality: 'standard', response_format: 'url', size: '1024x1024', style: 'natural' }` | An optional object that specifies any additional options you want to pass to the API request, such as, the number of images to generate, quality, size and style of the generated images. |
 
 Available models:
 
-- text-davinci-002
-- text-davinci-003
-- gpt-3.5-turbo
-- gpt-3.5-turbo-0301
-- gpt-3.5-turbo-1106
-- gpt-4
-- gpt-4o
-- gpt-4o-mini
-- gpt-4-turbo
-- gpt-4-1106-preview
-- gpt-4-0314
-- gpt-4-0613
-- gpt-4-32k
-- gpt-4-32k-0314
-- gpt-4-32k-0613
-- gpt-5-nano
-- gpt-5-mini
-- gpt-5-pro
-- gpt-5.1
-- gpt-5.2-pro
-- gpt-5.2
-- dall-e-3
-- gpt-image-1
-- gpt-image-1-mini
-- gpt-image-1.5
-
-### Simple `chat` usage 
+* text-davinci-002
+* text-davinci-003
+* gpt-3.5-turbo
+* gpt-3.5-turbo-0301
+* gpt-3.5-turbo-1106
+* gpt-4
+* gpt-4o
+* gpt-4o-mini
+* gpt-4-turbo
+* gpt-4-1106-preview
+* gpt-4-0314
+* gpt-4-0314
+* gpt-4-0613
+* gpt-4-32k
+* gpt-4-32k-0314
+* gpt-4-32k-0613
+* gpt-5-nano
+* gpt-5-mini
+* gpt-5-pro
+* gpt-5.1
+* gpt-5.2-pro
+* gpt-5.2
+* dall-e-3
+* gpt-image-1
+* gpt-image-1-mini
+* gpt-image-1.5
+
+### Simple `chat` usage
+
 In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
 
 ```js
@@ -183,7 +186,8 @@ async function sendMessage() {
 </template>
 ```
 
-### Simple `chatCompletion` usage 
+### Simple `chatCompletion` usage
+
 In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
 
 ```js
@@ -290,7 +294,76 @@ async function sendMessage() {
 </template>
 ```
 
-### Simple `generateImage` usage 
+### Simple `chatCompletionStream` usage (streaming)
+
+In the following example, the model is unspecified, and the gpt-4o-mini model will be used by default.
+
+```js
+const { chatCompletionStream } = useChatgpt()
+
+const chatTree = ref([])
+const inputData = ref('')
+
+async function sendStreamedMessage() {
+  try {
+    const message = {
+      role: 'user',
+      content: `${inputData.value}`,
+    }
+
+    chatTree.value.push(message)
+
+    const assistantMessage = {
+      role: 'assistant',
+      content: ''
+    }
+
+    chatTree.value.push(assistantMessage)
+
+    // IMPORTANT: do not send the placeholder assistant message to the server
+    const payloadMessages = chatTree.value.slice(0, -1)
+
+    await chatCompletionStream(payloadMessages, undefined, undefined, {
+      onToken(token) {
+        assistantMessage.content += token
+      },
+      onDone() {
+        // streaming finished
+      },
+      onError(err) {
+        alert(`Stream error: ${typeof err === "string" ? err : err?.message || "Unknown"}`)
+      }
+    })
+  } catch(error) {
+    alert(`Verify your organization if you want to use GPT-5 models: ${error}`)
+  }
+}
+
+```
+
+```html
+<template>
+  <div>
+    <input v-model="inputData">
+    <button
+      @click="sendStreamedMessage"
+      v-text="'Send Streamed'"
+    />
+    <div>
+      <div
+        v-for="chat in chatTree"
+        :key="chat"
+      >
+        <strong>{{ chat.role }} :</strong>
+        <div>{{ chat.content }} </div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+### Simple `generateImage` usage
+
 In the following example, the model is unspecified, and the `gpt-image-1-mini` model will be used by default.
 
 ```js
@@ -389,15 +462,19 @@ The `chat` method allows the user to send a prompt to the OpenAI API and receive
 
 The `chatCompletion` method is similar to the `chat` method, but it provides additional functionality for generating longer, more complex responses. Specifically, the chatCompletion method allows you to provide a conversation history as input, which the API can use to generate a response that is consistent with the context of the conversation. This makes it possible to build chatbots that can engage in longer, more natural conversations with users.
 
+## chatCompletionStream vs chatCompletion
+
+The `chatCompletionStream` method returns the assistant response **as a stream** (token-by-token). This is useful when you want to build a ChatGPT-like UI where the answer is displayed while it's being generated, instead of waiting for the full message.
 
 ## Module Options
 
-| Name | Type | Default | Description |
-|--|--|--|--|
-|**apiKey**|`String`|`xxxxxx`|Your apiKey here goes here
-|**isEnabled**|`Boolean`|`true`| Enable or disable the module. `True` by default.
+| Name          | Type      | Default  | Description                                      |
+| ------------- | --------- | -------- | ------------------------------------------------ |
+| **apiKey**    | `String`  | `xxxxxx` | Your apiKey here goes here                       |
+| **isEnabled** | `Boolean` | `true`   | Enable or disable the module. `True` by default. |
 
 <!-- CONTRIBUTING -->
+
 ## Contributing
 
 Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
@@ -411,16 +488,17 @@ Don't forget to give the project a star! Thanks again!
 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
-
 <!-- LICENSE -->
+
 ## License
 
 Distributed under the MIT License. See `LICENSE.txt` for more information.
 
 <!-- CONTACT -->
+
 ## Contact
 
-Oliver Trajceski - [LinkedIn](https://mk.linkedin.com/in/oliver-trajceski-8a28b070) - oliver@akrinum.com
+Oliver Trajceski - [LinkedIn](https://mk.linkedin.com/in/oliver-trajceski-8a28b070) - [oliver@akrinum.com](mailto:oliver@akrinum.com)
 
 Project Link: [https://nuxtchatgpt.com](https://nuxtchatgpt.com)
 
@@ -482,4 +560,4 @@ Use this space to list resources you find helpful and would like to give credit
 [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-chatgpt.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-downloads-href]: https://npmjs.com/package/nuxt-chatgpt
 [license-src]: https://img.shields.io/npm/l/nuxt-chatgpt.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://npmjs.com/package/nuxt-chatgpt
+[license-href]: https://npmjs.com/package/nuxt-chatgpt

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0 <5.0.0"
   },
-  "version": "0.3.0",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -45,6 +45,13 @@ const module$1 = defineNuxtModule({
         handler: resolve(runtimeDir, "server/api/chat-completion")
       }
     );
+    addServerHandler(
+      {
+        route: "/api/chat-completion-stream",
+        method: "post",
+        handler: resolve(runtimeDir, "server/api/chat-completion-stream")
+      }
+    );
     addServerHandler(
       {
         route: "/api/image-generate",

package/dist/runtime/composables/useChatgpt.d.ts

@@ -1,2 +1,10 @@
-import type { IChatgptClient } from "../types/index.js";
-export declare const useChatgpt: () => IChatgptClient;
+import type { IChatgptClient, IModel, IOptions } from "../types/index.js";
+type StreamHandlers = {
+    onToken?: (token: string) => void;
+    onDone?: () => void;
+    onError?: (err: any) => void;
+};
+export declare const useChatgpt: () => IChatgptClient & {
+    chatCompletionStream: (messages?: [], model?: IModel, options?: IOptions, handlers?: StreamHandlers, abortSignal?: AbortSignal) => Promise<void>;
+};
+export {};

package/dist/runtime/composables/useChatgpt.js

@@ -4,11 +4,7 @@ export const useChatgpt = () => {
     try {
       return await $fetch("/api/chat", {
         method: "POST",
-        body: {
-          message,
-          model,
-          options
-        }
+        body: { message, model, options }
       });
     } catch (error) {
       throw createError({
@@ -21,11 +17,7 @@ export const useChatgpt = () => {
     try {
       return await $fetch("/api/chat-completion", {
         method: "POST",
-        body: {
-          messages,
-          model,
-          options
-        }
+        body: { messages, model, options }
       });
     } catch (error) {
       throw createError({
@@ -38,12 +30,68 @@ export const useChatgpt = () => {
     try {
       return await $fetch("/api/image-generate", {
         method: "POST",
-        body: {
-          message,
-          model,
-          options
-        }
+        body: { message, model, options }
+      });
+    } catch (error) {
+      throw createError({
+        statusCode: 500,
+        message: "Failed to forward request to server"
       });
+    }
+  };
+  const chatCompletionStream = async (messages, model, options, handlers = {}, abortSignal) => {
+    try {
+      const res = await fetch("/api/chat-completion-stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ messages, model, options }),
+        signal: abortSignal
+      });
+      if (!res.ok || !res.body) {
+        const text = await res.text().catch(() => "");
+        throw new Error(
+          `Stream failed (${res.status}): ${text || res.statusText}`
+        );
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder("utf-8");
+      let buffer = "";
+      const emit = (eventName, data) => {
+        if (eventName === "token") handlers.onToken?.(data);
+        else if (eventName === "done") handlers.onDone?.();
+        else if (eventName === "error") {
+          try {
+            handlers.onError?.(JSON.parse(data));
+          } catch {
+            handlers.onError?.(data);
+          }
+        }
+      };
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        let idx;
+        while ((idx = buffer.indexOf("\n\n")) !== -1) {
+          const frame = buffer.slice(0, idx);
+          buffer = buffer.slice(idx + 2);
+          let eventName = "message";
+          const dataLines = [];
+          for (const line of frame.split("\n")) {
+            if (line.startsWith("event:")) eventName = line.slice(6).trim();
+            if (line.startsWith("data:"))
+              dataLines.push(line.slice(5).trimStart());
+          }
+          const data = dataLines.join("\n");
+          if (eventName === "done") {
+            emit("done", data);
+            return;
+          }
+          if (eventName === "token" || eventName === "error") {
+            emit(eventName, data);
+          }
+        }
+      }
     } catch (error) {
       throw createError({
         statusCode: 500,
@@ -51,5 +99,5 @@ export const useChatgpt = () => {
       });
     }
   };
-  return { chat, chatCompletion, generateImage };
+  return { chat, chatCompletion, generateImage, chatCompletionStream };
 };

package/dist/runtime/server/api/chat-completion-stream.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<void>>;
+export default _default;

package/dist/runtime/server/api/chat-completion-stream.js

@@ -0,0 +1,62 @@
+import OpenAI from "openai";
+import { createError, defineEventHandler, readBody, setHeader } from "h3";
+import { defaultOptions } from "../../constants/options.js";
+import { MODEL_GPT_5_MINI } from "../../constants/models.js";
+import { modelMap } from "../../utils/model-map.js";
+import { useRuntimeConfig } from "#imports";
+export default defineEventHandler(async (event) => {
+  const { messages, model, options } = await readBody(event);
+  if (!useRuntimeConfig().chatgpt.apiKey) {
+    throw createError({
+      statusCode: 403,
+      message: "Missing OpenAI API Key"
+    });
+  }
+  const openai = new OpenAI({
+    apiKey: useRuntimeConfig().chatgpt.apiKey
+  });
+  const requestOptions = {
+    messages,
+    model: !model ? modelMap[MODEL_GPT_5_MINI] : modelMap[model],
+    ...options || defaultOptions,
+    stream: true
+  };
+  setHeader(event, "Content-Type", "text/event-stream; charset=utf-8");
+  setHeader(event, "Cache-Control", "no-cache, no-transform");
+  setHeader(event, "Connection", "keep-alive");
+  event.node.res.flushHeaders?.();
+  const res = event.node.res;
+  const abort = new AbortController();
+  event.node.req.on("close", () => abort.abort());
+  const writeEvent = (eventName, data) => {
+    res.write(`event: ${eventName}
+`);
+    const lines = String(data).split("\n");
+    for (const line of lines) res.write(`data: ${line}
+`);
+    res.write("\n");
+  };
+  try {
+    writeEvent("meta", JSON.stringify({ ok: true }));
+    const stream = await openai.chat.completions.create(
+      requestOptions,
+      { signal: abort.signal }
+    );
+    for await (const chunk of stream) {
+      const delta = chunk?.choices?.[0]?.delta?.content;
+      if (typeof delta === "string" && delta.length) {
+        writeEvent("token", delta);
+      }
+    }
+    writeEvent("done", "[DONE]");
+    res.end();
+  } catch (error) {
+    writeEvent(
+      "error",
+      JSON.stringify({
+        message: error?.message ?? String(error)
+      })
+    );
+    res.end();
+  }
+});

package/package.json

@@ -1,72 +1,72 @@
-{
-  "name": "nuxt-chatgpt",
-  "version": "0.3.0",
-  "description": "ChatGPT integration for Nuxt 3",
-  "license": "MIT",
-  "type": "module",
-  "homepage": "https://vuemadness.com/nuxt-chatgpt",
-  "bugs": {
-    "url": "https://github.com/schnapsterdog/nuxt-chatgpt/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/schnapsterdog/nuxt-chatgpt"
-  },
-  "contributors": [
-    {
-      "name": "Oliver Trajceski (@schnapsterdog)"
-    }
-  ],
-  "author": {
-    "name": "Oliver Trajceski",
-    "email": "oliver@akrinum.com"
-  },
-  "keywords": [
-    "vue3",
-    "nuxt3",
-    "nuxt",
-    "nuxt.js",
-    "nuxt-chatgpt",
-    "image",
-    "image-generator"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/types.d.mts",
-      "import": "./dist/module.mjs",
-      "default": "./dist/module.mjs"
-    }
-  },
-  "main": "./dist/module.mjs",
-  "types": "./dist/types.d.mts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "prepack": "nuxt-module-build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:generate": "nuxi generate playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "dev:preview": "nuxi preview playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --minor && npm publish && git push --follow-tags",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest watch"
-  },
-  "dependencies": {
-    "@nuxt/kit": "latest",
-    "defu": "latest",
-    "openai": "^4.96.2"
-  },
-  "devDependencies": {
-    "@nuxt/eslint-config": "latest",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "latest",
-    "@nuxt/test-utils": "^3.18.0",
-    "changelogen": "latest",
-    "eslint": "latest",
-    "nuxt": "^3.16.2",
-    "vitest": "latest"
-  }
+{
+  "name": "nuxt-chatgpt",
+  "version": "0.4.0",
+  "description": "ChatGPT integration for Nuxt 3",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://vuemadness.com/nuxt-chatgpt",
+  "bugs": {
+    "url": "https://github.com/schnapsterdog/nuxt-chatgpt/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/schnapsterdog/nuxt-chatgpt"
+  },
+  "contributors": [
+    {
+      "name": "Oliver Trajceski (@schnapsterdog)"
+    }
+  ],
+  "author": {
+    "name": "Oliver Trajceski",
+    "email": "oliver@akrinum.com"
+  },
+  "keywords": [
+    "vue3",
+    "nuxt3",
+    "nuxt",
+    "nuxt.js",
+    "nuxt-chatgpt",
+    "image",
+    "image-generator"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs",
+      "default": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:generate": "nuxi generate playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:preview": "nuxi preview playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release --minor && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@nuxt/kit": "latest",
+    "defu": "latest",
+    "openai": "^4.96.2"
+  },
+  "devDependencies": {
+    "@nuxt/eslint-config": "latest",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "latest",
+    "@nuxt/test-utils": "^3.18.0",
+    "changelogen": "latest",
+    "eslint": "latest",
+    "nuxt": "^3.16.2",
+    "vitest": "latest"
+  }
 }