Skip to content

luffe0601/iflow-chatbot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

2 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

A full-featured Agent chatbot built with Next.js 15 and iFlow CLI SDK, providing Web-based iFlow-like interactive experience.

πŸ“– δΈ­ζ–‡ζ–‡ζ‘£ (Chinese Documentation)


πŸ™ Tribute

Great thanks to the iFlow team for their excellent work and all staff for their hard work! πŸŽ‰πŸŽ‰πŸŽ‰


🎯 Project Overview

iFlow Chatbot is a production-ready Agent chat application that integrates the iFlow CLI SDK to provide powerful features:

  • πŸ€– Multi-model AI support (MiniMax-M2, Qwen3, DeepSeek, GLM, Kimi)
  • πŸ’¬ Intelligent conversation with context memory
  • πŸ”§ Tool call visualization and task planning
  • πŸ“± Fully responsive design (Desktop + Mobile)
  • 🎨 Dark mode with system theme detection
  • πŸ” Secure authentication system
  • πŸ’Ύ Persistent chat history and workspace management
  • ⚑ High-performance React rendering optimization

πŸ“‹ Key Features

πŸ’¬ Intelligent Conversation

  • Multi-turn dialogue with context understanding
  • Real-time streaming message transmission
  • Markdown rendering with code highlighting
  • Tool call status visualization
  • Task plan progress tracking

πŸ› οΈ Tool Integration

  • File operations and code generation
  • Visual tool call process display
  • Task execution plan presentation
  • Code editor and file preview

πŸ“± User Experience

  • Fully responsive design
  • Desktop: Sidebar + main chat area
  • Mobile: Drawer-style sidebar + fullscreen chat
  • Dark mode support
  • Touch-optimized interface

πŸ”§ Configuration System

Supported Models:

  • MiniMax-M2
  • Qwen3-Coder-Plus
  • DeepSeek-V3.2
  • GLM-4.6
  • Kimi-K2-0905

Permission Modes:

  • default: Confirm every operation
  • autoEdit: Auto-execute edit operations
  • yolo: Auto-execute all operations
  • plan: Plan before execution

πŸ—οΈ Technical Architecture

Frontend Technology

  • Framework: Next.js 15 (App Router)
  • Language: TypeScript
  • UI Components: shadcn/ui + Tailwind CSS
  • State Management: React Hooks + Context
  • Animations: Framer Motion
  • Code Highlighting: react-syntax-highlighter

Backend Technology

  • Database: PostgreSQL + Drizzle ORM
  • Authentication: NextAuth v5
  • API: Next.js API Routes
  • Real-time Communication: Server-Sent Events (SSE)

Core Integration

  • AI SDK: iFlow CLI SDK v0.1.2
  • Message System: WebSocket + SSE
  • Workspace Management: File system integration
  • Session Management: 30-minute auto-cleanup

πŸš€ Quick Start

πŸš€ One-Click Deployment

The simplest way: You can directly hand the current project to iFlow for review, and it will automatically analyze the project structure and complete the deployment. No manual environment variable configuration or installation commands required.

πŸ› οΈ Manual Installation

If manual installation is needed, ensure the following environment requirements:

  • Node.js 18+
  • PostgreSQL database
  • iFlow API key

Installation Steps:

  1. Clone the project
git clone https://github.com/stone100010/iflow-chatbot.git
cd iflow-chatbot
  1. Install dependencies
pnpm install
  1. Configure environment variables

Create .env.local file:

# Database
POSTGRES_URL="postgresql://..."

# iFlow API
IFLOW_API_KEY="sk-..."
IFLOW_BASE_URL="https://apis.iflow.cn/v1"

# NextAuth
AUTH_SECRET="your-secret-key"
  1. Database migration
pnpm db:migrate
  1. Start development server
pnpm dev

The app will start at localhost:3000.


🎨 Interface Features

Responsive Design

  • Desktop: Sidebar + main chat area layout
  • Mobile: Drawer-style sidebar + fullscreen chat experience
  • Adaptive: Config selector auto-switches between Popover/Sheet

Dark Mode

  • next-themes integration
  • System theme auto-detection
  • Dynamic theme color switching

Interaction Details

  • Streaming message display
  • Tool call progress animations
  • Task plan progress bars
  • Collapsible think blocks
  • Code syntax highlighting (oneDark theme)

πŸ” Permission Control

Authentication System

  • NextAuth v5 integration
  • Guest user support (guest-{timestamp})
  • Session management
  • API key environment variable protection

iFlow Permission Modes

  • default: Each operation requires confirmation
  • autoEdit: Auto-execute edit operations
  • yolo: Auto-execute all operations
  • plan: Make detailed plans before execution

🀝 Contributing Guide

Contributions are welcome! Please feel free to submit Pull Requests.

  1. Fork this repository
  2. Create a feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'feat: add some amazing feature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the Apache-2.0 License.


πŸ™ Acknowledgments

  • Vercel for Next.js and deployment platform
  • shadcn/ui for beautiful components
  • All contributors and supporters

πŸ“ž Contact

For questions or feedback, please create an Issue on GitHub.

Project Link: https://github.com/stone100010/iflow-chatbot

About

A full-featured AI chatbot built with Next.js 15 and iFlow CLI SDK, providing Claude Code-like interactive experience with file operations, code generation, tool calls, and task planning.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors