lsq128/miraframe

★ 28TypeScriptAudience · vibe coderComplexity · 4/5Setup · hard

Mindmap

mindmap
  root((repo))
    What it does
      Story to comic
      AI image generation
      AI video clips
    Tech stack
      React frontend
      NestJS backend
      LangGraph.js agents
    Workflow
      Multi-stage graph
      User feedback loops
      Real-time WebSocket
    Setup
      Docker Compose
      Fake provider mode
      Env var config

mindmap root((repo)) What it does Story to comic AI image generation AI video clips Tech stack React frontend NestJS backend LangGraph.js agents Workflow Multi-stage graph User feedback loops Real-time WebSocket Setup Docker Compose Fake provider mode Env var config

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Turn a story idea into a full comic-style production with AI-generated images and video clips.

USE CASE 2

Test the full AI generation pipeline locally without any API keys using fake provider mode.

USE CASE 3

Learn how to build a recoverable multi-stage AI workflow where users can review and retry each step.

USE CASE 4

Prototype a creative AI application with a React frontend, NestJS backend, and LangGraph.js agent layer.

Tech stack

TypeScriptReactNestJSLangGraph.jsDocker

Getting it running

Difficulty · hard Time to first run · 1h+

Requires Docker Compose for local database and cache, plus API keys for real text, image, and video generation services (fake provider mode available for testing).

No license information was mentioned in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1

I want to run MiraFrame locally to turn a short story idea into a comic, walk me through setting up Docker Compose, configuring env vars for AI services, and running the first pipeline.

Prompt 2

Show me how to add a new stage to the MiraFrame LangGraph.js workflow that generates a title card image after the story outline is approved.

Prompt 3

How does MiraFrame handle a failed image generation node, explain the retry logic and how I can hook into it to add custom error handling.

Prompt 4

I want to use MiraFrame with my own image generation API instead of the default, how do I add a new provider in the settings panel and wire it into the workflow?

Open on GitHub → Explain another repo

← lsq128 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.