ChatKit Vue Proxy Server (Nuxt)

This is the companion proxy server for the ChatKit Wrapper Vue component.

This package will install a Proxy Server into your Nuxt environment and will take care of traffic between the ChatKit Vue component and OpenAI API servers.

Features

• Easy integration of ChatKit Web Component in Vue 3 and Nuxt projects.
• Proxy server API calls to keep your OpenAI API key secure (Nuxt SSR).

Requirements

• ChatKit Wrapper Vue Component installed, see ChatKit Wrapper Vue Repository or ChatKit Wrapper Vue NPMJS
• OpenAI API Key with access to ChatKit (available through OpenAI API Platform.
• Agent workflow created on OpenAI Chat prompts platform that is published and with a Prompt ID generated.
• For other than Development environments, a domain authorized in the OpenAI API Security settings

Installation

Install the package via npm or yarn:

npm install chatkit-wrapper-nuxt

Update the modules section of your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['chatkit-wrapper-nuxt']
})

Update your .env file or set environment variables:

# Your secret OpenAI API Key
CHATKIT_OPENAI_API_KEY=your_openai_api_key_here

# OpenAI end-point for ChatKit calls, defaults to https://api.openai.com/v1/
CHATKIT_OPENAI_API_ENDPOINT=https://api.openai.com/v1/  

Usage

In your Nuxt component, use the following example code to kickstart your implementation:

<script setup lang="ts">
  import { ChatKit } from 'chatkit-wrapper-vue'
</script>

<template>
  <div class="chatkit">
    <ClientOnly>
      <ChatKit :workflowKey="wf_xxxxxxxxxxxxx" />
    </ClientOnly>
  </div>
</template>

<style scoped>
  .chatkit {
    width: 40em;
    height: 80vh;
    margin: auto;
  }
</style>

See the used ChatKit Wrapper Vue Repository for more details on properties of the <ChatKit> component.

You can also check the playground folder for an example implementation using ChatKitProperties.

FAQ / Common Errors

• When you get a OpenAI key not found in environment and/or config. error in your command prompt console, make sure you have correctly configured the environment variables.

• Version History

• 0.3.6 - Updated documentation and example code to reflect chatkit vue wrapper 0.3.6 changes

• 0.3.5 - Dependency with chatkit-wrapper-vue moved to playground (where it belongs)

• 0.3.4 - Explicit import of some vue methods

• 0.3.3 - Small fixes to exported types

• 0.3.2 - First public package update

• 0.2.0 - Added support for event listeners, you can now trigger functions on events triggered by the OpenAI ChatKit.

• 0.1.1 - Implemented all support properties on component as pass-through and with default functionality or default values.

• 0.1.0 - Initial version with functional wrapper.

LICENSE

This package includes the ChatKit Web Component bundle Apache 2.0 sourced from OpenAI. See NOTICE-OPENAI for details.