explaingit

ageerle/ruoyi-drama

Analysis updated 2026-05-18

50VueAudience · developerComplexity · 4/5Setup · hard

TLDR

A Vue 3 frontend for creating short AI generated video dramas, from story idea to finished video, paired with the ruoyi-ai backend.

Mindmap

mindmap
  root((repo))
    What it does
      Write story idea
      Polish script
      Configure assets
      Confirm storyboard
      Generate video
    Tech stack
      Vue 3
      Vite
      Pinia
      FFmpeg backend
    Use cases
      Create AI short dramas
      Generate images and video
      Manage Atlas Cloud key
    Audience
      Developers
      Content creators
    Requirements
      ruoyi-ai backend
      Atlas Cloud API key
      FFmpeg with libx264

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Write a short story idea and turn it into a finished AI generated video drama.

USE CASE 2

Manage and apply a single Atlas Cloud API key across all chat, image, and video models.

USE CASE 3

Polish an AI drafted script before generating the final storyboard.

USE CASE 4

Assemble confirmed storyboard shots into one finished video clip.

What is it built with?

Vue 3VitePiniaFFmpeg

How does it compare?

ageerle/ruoyi-dramacompdf/docslighthuangdihd/call_me_as_agent
Stars505050
LanguageVueVueVue
Setup difficultyhardmoderateeasy
Complexity4/53/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · hard Time to first run · 1h+

Requires the separate ruoyi-ai backend running first, plus an Atlas Cloud API key and a server-side FFmpeg build with libx264 and aac support.

In plain English

Ruoyi Drama is a web frontend for creating short AI generated video dramas, built with Vue 3, Vite, and Pinia. It does not work on its own. It is designed to connect to a separate backend project called ruoyi-ai, which must be running first, usually at a local address on port 6039, and the frontend talks to it through a Vite proxy so the browser does not run into cross origin errors. The workflow it supports goes from a story idea all the way to a finished video. A user logs into the app with a backend account, types a story idea into the creation center, and clicks start to enter the workspace. From there they can polish the script, configure assets, confirm the storyboard, and finally have the tool assemble the finished video clip. Image and video generation both depend on a third party service called Atlas Cloud, so before creating anything the user has to paste an Atlas Cloud API key into a key configuration popup in the app. Saving it applies that same key across all of the chat, image, and video models used by the backend. Turning the finished storyboard into an actual video file also requires FFmpeg to be installed on the backend server, specifically a build that includes the libx264 and aac encoders. For Windows users, the linked backend repository ships a script that installs FFmpeg automatically and sets the needed environment variables, though the backend service has to be fully restarted afterward for the change to take effect. For everyday development, running npm install followed by npm run dev starts the frontend against the default backend address, and settings such as the backend URL can be changed in an environment file. Running npm run build produces a production build in a dist folder, meant to be served behind a reverse proxy such as nginx that forwards API requests to the backend. The README does not mention a license.

Copy-paste prompts

Prompt 1
Walk me through setting up the ruoyi-ai backend and connecting this frontend to it on my local machine.
Prompt 2
Help me configure my Atlas Cloud API key in this app so image and video generation work.
Prompt 3
Explain what I need to install FFmpeg correctly so the storyboard-to-video step works on my server.
Prompt 4
Show me how to change the .env.development file to point this frontend at a different backend address.

Frequently asked questions

What is ruoyi-drama?

A Vue 3 frontend for creating short AI generated video dramas, from story idea to finished video, paired with the ruoyi-ai backend.

What language is ruoyi-drama written in?

Mainly Vue. The stack also includes Vue 3, Vite, Pinia.

How hard is ruoyi-drama to set up?

Setup difficulty is rated hard, with roughly 1h+ to a first successful run.

Who is ruoyi-drama for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.