MiraFrame

MiraFrame is a full-stack project that turns a story idea into a comic-style production, using AI to generate the story outline, character profiles, panel scripts, character images, and video clips. Rather than sending one prompt and waiting for a result, it breaks the creative process into a sequence of stages that can be observed, retried, or adjusted by the user at any point. The README and codebase are written in Chinese.

The project is built entirely in TypeScript across four packages: a React front end, a backend server using NestJS (a structured Node.js framework), an agent layer using LangGraph.js (a library for building AI workflows with multiple steps), and a shared package for types and data schemas that all three other packages reference. This single-language approach means the same data definitions are used from the browser UI all the way down to the AI workflow.

The workflow runs as a recoverable multi-stage graph rather than a single API call. After each major stage, such as the story outline or character design, users can provide feedback and the system regenerates that stage before moving forward. If an image or video generation call fails, the node enters a failure state and can be retried without rerunning the entire pipeline. Real-time progress is pushed to the browser over a WebSocket connection so users can see each stage complete as it happens.

The project supports a fake provider mode for all AI services, meaning the full pipeline can be tested without any API keys. Real text, image, and video generation services are configured either through environment variables or through a settings panel in the UI. The project uses Docker Compose for running the database and cache locally, and is described as suitable for learning and prototyping rather than direct production use.