Flowise 前端框架配置指南

用户需求

问题：有没有适合配置 Flowise 的前端框架？
目标：寻找类似 Open WebUI 的开箱即用方案，或者推荐适合集成 Flowise 的前端框架。

推荐前端框架

根据需求，以下是几种适合与 Flowise 集成的前端框架方案：

1. React + Next.js（首选推荐）

npx create-next-app@latest my-flowise-app

优势：
– 与 Flowise 官方技术栈一致（Flowise 基于 React 构建）
– 支持 SSR/SSG（服务器端渲染/静态生成），性能卓越
– 丰富的生态系统和组件库
– 易于调用 Flowise 提供的 API

2. Vue.js + Nuxt.js

npx nuxi@latest init my-flowise-app

优势：
– 开发体验友好、上手简单
– 双向数据绑定，适合复杂表单配置界面
– 出色的 TypeScript 支持

3. React + Vite（轻量级）

npm create vite@latest my-flowise-app -- --template react-ts

优势：
– 开发服务器启动速度极快
– 简单易用，适合快速原型开发
– 生成的打包体积小

基础 React 集成示例

以下代码展示了如何在 React 应用中使用 Flowise API 创建一个简单的聊天界面：

API 配置

// api/flowise.ts
const FLOWISE_API = 'http://localhost:3000/api/v1';

export async function queryFlowise(chatflowId: string, question: string) {
  const response = await fetch(`${FLOWISE_API}/prediction/${chatflowId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question })
  });
  return response.json();
}

前端组件

// components/FlowiseChat.tsx
import { useState } from 'react';

export default function FlowiseChat({ chatflowId }) {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await queryFlowise(chatflowId, input);
    setMessages([...messages, { user: input, bot: result.text }]);
    setInput('');
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i}>
            <p><strong>You:</strong> {msg.user}</p>
            <p><strong>Bot:</strong> {msg.bot}</p>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input 
          value={input} 
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask something..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

推荐的 UI 组件库

为提高开发效率和用户体验，可以选用以下 UI 库：

• shadcn/ui：现代化、可定制的 React 组件库
• Ant Design：企业级 UI 解决方案
• Material-UI：Google Material Design 风格组件库
• Tailwind CSS：实用优先的 CSS 框架，适合快速开发

类似 Open WebUI 的方案

如果你需要一个类似 Open WebUI 的完整开箱即用界面，以下是通过 Open WebUI 集成 Flowise 的解决方案：

Open WebUI + Flowise 集成

Open WebUI 提供了 Functions 和 Pipelines 系统，可以与 Flowise 后端能力无缝对接，创建一个功能强大且美观的用户界面。

集成方法 1：通过 Functions 配置

步骤：

1. 启动 Open WebUI
2. 进入 Admin Panel → Functions
3. 添加新 Function，代码如下：

"""
title: Flowise Integration for OpenWebUI
Requirements:
- Flowise API URL (set via FLOWISE_API_URL)
- Flowise API Key (set via FLOWISE_API_KEY)
"""
from pydantic import BaseModel, Field
from typing import Optional, Dict, Any, List, Union, Generator, Iterator
import requests
import os

class Pipe:
    class Valves(BaseModel):
        flowise_url: str = Field(
            default=os.getenv("FLOWISE_API_URL", "http://localhost:3000"),
            description="Flowise URL",
        )
        flowise_api_key: str = Field(
            default=os.getenv("FLOWISE_API_KEY", ""),
            description="Flowise API key for authentication",
        )

    def __init__(self):
        self.type = "manifold"
        self.id = "flowise_chat"
        self.valves = self.Valves()

    def pipes(self) -> List[dict]:
        return [
            {"id": "flowise", "name": "Flowise Chatflow"}
        ]

    def pipe(self, body: dict) -> Union[str, Generator, Iterator]:
        # 调用 Flowise API
        url = f"{self.valves.flowise_url}/api/v1/prediction/{body['chatflow_id']}"
        response = requests.post(url, json=body)
        return response.json()

集成方法 2：使用社区 Pipeline 连接器

社区已经开发了一款现成的 Open WebUI-Flowise 连接器：

# 克隆连接器代码
git clone https://github.com/ItsDave001/open-webui-flowise-connector

# 使用 Docker Compose 启动
docker-compose up -d

完整部署方案

以下是 Open WebUI 与 Flowise 的完整部署方式：

# 1. 启动 Flowise
docker run -d -p 3000:3000 flowiseai/flowise

# 2. 启动 Open WebUI Pipelines
docker run -d -p 9099:9099 \
  --add-host=host.docker.internal:host-gateway \
  -v pipelines:/app/pipelines \
  --name pipelines \
  ghcr.io/open-webui/pipelines:main

# 3. 启动 Open WebUI
docker run -d -p 8080:8080 \
  -v open-webui:/app/backend/data \
  --name open-webui \
  ghcr.io/open-webui/open-webui:main

配置连接

1. 打开 Open WebUI：http://localhost:8080
2. 进入 Admin Panel → Settings → Connections
3. 添加 Pipeline 连接：
4. API URL: http://localhost:9099
5. API Key: 0p3n-w3bu!
6. 配置 Flowise 环境变量：
7. FLOWISE_API_URL: http://localhost:3000
8. FLOWISE_API_KEY: 你的 API Key

优势

• 优秀的界面：Open WebUI 提供了类似 ChatGPT 的美观界面
• 强大的后端：Flowise 支持可视化工作流、RAG 和代理功能
• 开源免费：两者均为开源项目
• 易于部署：支持 Docker 快速启动

总结

根据具体需求，如果需要快速开发、轻量集成，推荐使用 React + Next.js 或 Vue.js + Nuxt.js。
如果需要开箱即用的完整界面，Open WebUI 与 Flowise 的结合是最佳方案。

需要进一步的实现帮助或定制？欢迎随时沟通！