AI Workflow Editor

A powerful workflow editor component for Vue 3, featuring AI-assisted generation and SysML support.

Installation

npm install @andrewyang/ai-workflow-editor
# or
yarn add @andrewyang/ai-workflow-editor
# or
pnpm add @andrewyang/ai-workflow-editor

Peer Dependencies

Ensure you have the following peer dependencies installed:

• vue >= 3.4.0
• element-plus >= 2.0.0

Usage

Import Styles

In your entry file (e.g., main.ts or App.vue):

import 'element-plus/dist/index.css'
import '@andrewyang/ai-workflow-editor/style.css'

Use Component

<template>
  <AiWorkflowEditor
    :default-llm-config="llmConfig"
    @save="onSave"
  />
</template>

<script setup lang="ts">
import { AiWorkflowEditor } from '@andrewyang/ai-workflow-editor'

const llmConfig = {
  provider: 'openai',
  apiKey: 'your-api-key',
  model: 'gpt-4'
}

const onSave = (workflow) => {
  console.log('Saved workflow:', workflow)
}
</script>

Use Composable

import { useAi } from '@andrewyang/ai-workflow-editor'

const { generateWorkflow, loading, error } = useAi()