CozeChat Vue3

A Vue 3 chat component for Coze AI platform.

Installation

npm install coze-chat-vue3

Peer Dependencies

This package requires the following peer dependencies:

npm install vue@^3.0.0 element-plus@^2.0.0 @element-plus/icons-vue@^2.0.0

Usage

Global Registration

import { createApp } from 'vue'
import CozeChat from 'coze-chat-vue3'
import 'coze-chat-vue3/dist/style.css'

const app = createApp(App)
app.use(CozeChat)

Component Usage

<template>
  <CozeChat
    :token="yourToken"
    :bot-id="yourBotId"
    :user-avatar="userAvatar"
    :ai-avatar="aiAvatar"
    :base-url="baseUrl"
  />
</template>

<script setup>
const yourToken = 'your-coze-token'
const yourBotId = 'your-bot-id'
const userAvatar = 'https://example.com/user-avatar.png'
const aiAvatar = 'https://example.com/ai-avatar.png'
const baseUrl = 'https://api.coze.cn' // Optional, defaults to Coze China endpoint
</script>

Local Import

<template>
  <CozeChat :token="token" :bot-id="botId" />
</template>

<script setup>
import { CozeChat } from 'coze-chat-vue3'
import 'coze-chat-vue3/dist/style.css'

const token = 'your-token'
const botId = 'your-bot-id'
</script>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | token | String | Yes | - | Coze API token | | botId | String | Yes | - | Bot ID | | conversationId | String | No | '' | Specific conversation ID | | userAvatar | String | No | '' | User avatar URL | | aiAvatar | String | No | '' | AI avatar URL | | baseUrl | String | No | COZE_CN_BASE_URL | API base URL | | baseApiUrl | String | No | '' | Base URL for file access |

Composable

You can also use the useCozeAPI composable directly:

<script setup>
import { useCozeAPI } from 'coze-chat-vue3'

const {
  messages,
  isReady,
  currentConversationId,
  sendMessage,
  fetchConversations,
  switchConversation,
  uploadFile,
  // ... other methods
} = useCozeAPI()
</script>

License

MIT