Vextra Agent

A large model Agent that works with Vextra Editor to implement AI-assisted design functionality. Vextra Agent is an intelligent design assistant that can understand user design requirements and generate corresponding design operations through large language models.

✨ Features

🤖 Intelligent Design Assistant

• Natural Language Interaction: Support for describing design requirements in natural language
• Context Understanding: Intelligently understands current design state and user intent
• Multi-language Support: Built-in internationalization support for Chinese and English

🛠️ Rich Design Tools

• Shape Creation: Support for creating rectangles, paths, text, and other basic shapes
• Shape Operations: Move, delete, and modify shape properties
• Style Settings: Fill colors, border styles, etc.
• Document Operations: Get document data, page information, etc.

🔧 Technical Features

• TypeScript: Complete type safety
• Modular Architecture: Clear tool management and extension mechanisms
• Vue 3: Modern frontend framework
• LLM Integration: Support for multiple large language model interfaces

📦 Installation

npm install @kcaitech/vextra-agent

🚀 Quick Start

Basic Usage

@see vextra-agent-example project

🛠️ Development

Requirements

• Node.js >= 16
• npm >= 8

Install Dependencies

npm install

Development Mode

npm run dev

Build

npm run build

Tool System

Agent comes with various design tools:

Shape Creation Tools

• new_rectangle: Create rectangles
• new_path_shape: Create path shapes
• new_text_shape: Create text shapes

Shape Operation Tools

• move_shape: Move shapes
• del_shape: Delete shapes
• get_selection: Get selected content

Style Tools

• new_fill: Set fill styles
• new_border: Set border styles

Document Tools

• get_vextra_data: Get document data
• get_vextra_pagesinfo: Get page information

Custom Tools

You can register custom tools through ToolManager:

import { ToolManager, ToolDefinition } from '@kcdesign/agent';

const toolManager = new ToolManager(source, 'json');

// Register custom tool
const customTool: ToolDefinition = {
  name: 'custom_tool',
  description: 'Custom tool description',
  parameters: z.object({
    // Define parameters
  }),
  execute: async (args) => {
    // Implement tool logic
  }
};

toolManager.registerTool(customTool);

📁 Project Structure

src/
├── agent.ts              # Core Agent class
├── basic/                # Basic types and utilities
├── components/           # Vue components
├── i18n/                # Internationalization
├── llm/                 # Large language model client
├── message/             # Message processing
├── source/              # Document source
├── tools/               # Tool collection
├── utils/               # Utility functions
└── view/                # View components

📄 License

This project is licensed under the AGPL-3.0 License. See the LICENSE file for details.

👥 Authors

• KCai Technology - kcaitech.com