Agno Vue

中文

An Agno front-end UI interface built with Vue 2, providing a smooth user experience for AI agent interactions. The project is designed to support seamless migration to Vue 3.

If you are using element-ui, we provide a Chinese-friendly element-ui version .

Features

• Smart Conversation: Interact with AI agents using natural language
• Streaming Response: Real-time display of AI responses
• Session Management: Create, switch, and manage multiple conversation sessions
• Agent Switching: Quickly switch between different AI agents
• Code Highlighting: Syntax highlighting for code blocks
• Markdown Rendering: Full support for Markdown formatting

Tech Stack

• Vue 2: Progressive JavaScript framework
• Markdown Rendering: Markdown parsing and rendering

References

• Agno Official Documentation
• Agno Agent UI
• Agno Client

Quick Start

Prerequisites

• Ensure the backend Agno service is running on port 7777. If using DeepSeek, you can try agno-deepseek

Install Dependencies

pnpm i

Start Development Server

pnpm dev

The application will start at http://localhost:5173 (port may vary based on configuration).

Build for Production

pnpm build

Build artifacts will be output to the dist/ directory.

Feature Description

Smart Conversation

Supports conversations with the Agno backend service, sending user messages and receiving AI responses.

Streaming Response

Real-time streaming of response content via Server-Sent Events (SSE) or WebSocket, significantly enhancing user experience.

Session Management

• Create new sessions
• Switch between historical sessions
• Delete sessions
• Session list display

Agent Switching

Supports configuration and switching between different AI agents, each with unique capabilities and knowledge.