RBAC behavior: As shown on the left in the image below, when admin logs in they can see all apps, while user can only see the apps configured for their role (configured in rbac.json).
This project is forked from the Dify official project (MIT license): langgenius/webapp-conversation (Next.js)
For the RBAC implementation flow, see: rbac_flow_guide
You can compare the backup/webapp-conversation_original_code_202606 and main branches to see what code changes this project made to the original project.
Original langgenius/webapp-conversation Config
Create a file named .env.local in the current directory and copy the contents from .env.example. Setting the following content:
# APP URL: This is the API's base URL.
NEXT_PUBLIC_API_URL=http://127.0.0.1/v1
# Multi-app configuration for RBAC.
# The appId is the unique identifier from the Dify app URL.
# The apiKey is generated from the app's API Access page.
NEXT_PUBLIC_AGENT_CONFIGS=[{"id":"agent-1","name":"Agent 1","appId":"your-first-app-id","apiKey":"app-your-first-key"},{"id":"agent-2","name":"Agent 2","appId":"your-second-app-id","apiKey":"app-your-second-key"}]
# Used to sign the JWT Token for login.
JWT_SECRET=replace-this-in-production- The
appIdandapiKeyare from the Dify backend after you create an APP:
- As shown below,
langgenius/webapp-conversationis the project that Dify provided for developers to folk and customize the web APP
Config more in config/index.tsfile:
export const APP_INFO: AppInfo = {
title: 'Chat APP',
description: '',
copyright: '',
privacy_policy: '',
default_language: 'zh-Hans'
}
export const isShowPrompt = true
export const promptTemplate = ''Edit rbac.json directly to manage roles and accounts. The backend reloads this file at request time.
{
"defaultPassword": "123456",
"roles": {
"admin": {
"agents": ["agent-1", "agent-2"]
},
"user": {
"agents": ["agent-1"]
}
},
"users": [
{ "username": "admin", "role": "admin" },
{ "username": "user", "role": "user" }
]
}RBAC Notes:
roles.<role>.agents(e.g."agent-1","agent-2") areiddefined inNEXT_PUBLIC_AGENT_CONFIGS
Login Notes:
defaultPasswordis the shared password for every configured account.- The default accounts are
admin / 123456anduser / 123456.
First, install dependencies:
npm install
# or
yarn
# or
pnpm installThen, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
This project is based on the MIT license of langgenius/webapp-conversation. This is an community project, not an official Dify Project. It is not affiliated with, endorsed by, or sponsored by LangGenius / the Dify project.
Please note that this project was rapidly developed using Vibe Coding and is not yet production-ready. My hope is that it serves as a springboard for further innovation. Developers with interest are welcome to optimize the project. Discussion, bug fixes, and pull requests are all welcome!
