Skip to content

Conversation

Copy link

Copilot AI commented Nov 21, 2025

Adds complete monorepo scaffold enabling visual LangFlow agent building with FastAPI backend and Vite+React+TypeScript frontend. Includes Docker orchestration, flow persistence, and graceful degradation when LangFlow unavailable.

Structure

Root

  • docker-compose.yml - orchestrates langflow:7860, backend:8000, frontend:8080
  • start-dev.sh / stop-dev.sh - executable convenience scripts
  • README_MONOREPO.md, RUN_COMMANDS.md - comprehensive documentation
  • .gitignore - Python/Node exclusions

/langflow

  • Dockerfile running langflow run --host 0.0.0.0 --port 7860
  • Security notes in README

/langflow-backend

  • FastAPI with endpoints: POST /save_flow/, GET /list_flows/, GET /get_flow/{name}, POST /run_flow/
  • Graceful degradation: simulated responses if langflow import fails
  • flows/ directory mounted as Docker volume for persistence
  • CORS enabled for localhost

/web-client

  • Vite + React + TypeScript with cyberpunk theme (Orbitron font)
  • Multi-stage Docker build with nginx
  • Pages: Dashboard, Playground, Datasets, AgentBuilder
  • Components: Sidebar, AIBrain, SectionAgent, Conversation (STT/TTS placeholders)
  • Full backend integration via axios

Example Backend Integration

// AgentBuilder.tsx - upload and execute flows
const handleSaveFlow = async () => {
  const formData = new FormData();
  formData.append('file', flowFile);
  await axios.post(`${API_URL}/save_flow/`, formData);
};

const handleRunFlow = async () => {
  const formData = new FormData();
  formData.append('flow_file', flowFile);
  formData.append('user_input', userInput);
  const response = await axios.post(`${API_URL}/run_flow/`, formData);
};

Security Considerations

  • CORS restricted to localhost (expand for production)
  • No authentication layer (required before production)
  • Basic file upload validation (enhance with schema validation)
  • Flow execution needs sandboxing and timeouts
  • Backend falls back to simulated responses when LangFlow unavailable

Quick Start

./start-dev.sh
# Access: localhost:7860 (LangFlow), localhost:8000 (API), localhost:8080 (UI)

UI Inspiration

Original prompt

Create branch ragamuffin-scaffold and add a Ragamuffin monorepo scaffold to Stacey77/Rag7. The scaffold enables visual LangFlow agent building and execution via a FastAPI backend and a Vite+React+TypeScript frontend. Add Docker Compose, Dockerfiles, run scripts, READMEs, and mount flow persistence.

Requirements (create exact paths and files):

Root:

  • docker-compose.yml (services: langflow:7860, backend:8000, frontend:8080; mount ./langflow-backend/flows into backend)
  • README_MONOREPO.md (overview, Quick Start, include UI inspiration image: image1, project name "Ragamuffin")
  • RUN_COMMANDS.md (step-by-step run + dev commands)
  • start-dev.sh (executable; runs docker compose up --build)
  • stop-dev.sh (executable; runs docker compose down)
  • README.md (top-level summary referencing image and Ragamuffin)

/langflow:

  • Dockerfile (runs langflow run --host 0.0.0.0 --port 7860)
  • README.md (LangFlow notes & security)

/langflow-backend:

  • Dockerfile (builds backend image)
  • requirements.txt (fastapi, uvicorn[standard], langflow, python-multipart)
  • flows/ (empty dir persisted)
  • app/init.py
  • app/main.py (FastAPI implementing: POST /save_flow/ (multipart .json), GET /list_flows/, GET /get_flow/{flow_name}, POST /run_flow/ (multipart flow_file + form field user_input). Attempt to import langflow.load_flow_from_json; if unavailable return simulated response and log warning. Enable CORS for localhost. Add comments about security, validation, and sandboxing.)
  • README.md (backend usage & environment)

/web-client:

  • Dockerfile (multi-stage build using nginx)
  • nginx.conf (optional)
  • package.json (Vite + React + TypeScript deps & scripts)
  • tsconfig.json
  • vite.config.ts
  • index.html
  • .env (VITE_API_URL=http://localhost:8000)
  • src/main.tsx
  • src/App.tsx
  • src/styles.css (Orbitron font & cyberpunk theme)
  • src/components/Sidebar.tsx
  • src/components/AIBrain.tsx
  • src/components/SectionAgent.tsx
  • src/components/Conversation.tsx (STT/TTS)
  • src/pages/Dashboard.tsx
  • src/pages/Playground.tsx
  • src/pages/Datasets.tsx
  • src/pages/AgentBuilder.tsx (integrates with backend endpoints /list_flows/, /get_flow/{name}, /save_flow/, /run_flow/)

Other requirements:

  • start-dev.sh and stop-dev.sh must be executable in the commit
  • Use relative paths in Dockerfiles and docker-compose
  • Do not modify existing repository files; add new files only. If conflicts exist, create PR and note potential conflicts in PR description
  • PR metadata:
    • Branch: ragamuffin-scaffold
    • Target: main
    • PR title: feat: add Ragamuffin monorepo scaffold (langflow, fastapi, web-client, docker-compose)
    • PR description: concise summary of additions, how to run (docker compose up --build), and recommended next steps (secure CORS, validate flows, add auth, persistent storage). Note simulated backend fallback if langflow unavailable and security caveats.

Include UI inspiration image reference anywhere in the READMEs: image1

Operational notes:

  • Ensure flows persistence directory is created and mounted.
  • The backend must start even if langflow is not installed and /run_flow/ should return a simulated response while logging a warning.
  • Mark scripts executable.

Do not include secrets or tokens in repository.

Deliverable: create branch ragamuffin-scaffold, add files, commit, push, and open PR into main. Provide the PR URL in the response.

This pull request was created as a result of the following prompt from Copilot chat.

Create branch ragamuffin-scaffold and add a Ragamuffin monorepo scaffold to Stacey77/Rag7. The scaffold enables visual LangFlow agent building and execution via a FastAPI backend and a Vite+React+TypeScript frontend. Add Docker Compose, Dockerfiles, run scripts, READMEs, and mount flow persistence.

Requirements (create exact paths and files):

Root:

  • docker-compose.yml (services: langflow:7860, backend:8000, frontend:8080; mount ./langflow-backend/flows into backend)
  • README_MONOREPO.md (overview, Quick Start, include UI inspiration image: image1, project name "Ragamuffin")
  • RUN_COMMANDS.md (step-by-step run + dev commands)
  • start-dev.sh (executable; runs docker compose up --build)
  • stop-dev.sh (executable; runs docker compose down)
  • README.md (top-level summary referencing image and Ragamuffin)

/langflow:

  • Dockerfile (runs langflow run --host 0.0.0.0 --port 7860)
  • README.md (LangFlow notes & security)

/langflow-backend:

  • Dockerfile (builds backend image)
  • requirements.txt (fastapi, uvicorn[standard], langflow, python-multipart)
  • flows/ (empty dir persisted)
  • app/init.py
  • app/main.py (FastAPI implementing: POST /save_flow/ (multipart .json), GET /list_flows/, GET /get_flow/{flow_name}, POST /run_flow/ (multipart flow_file + form field user_input). Attempt to import langflow.load_flow_from_json; if unavailable return simulated response and log warning. Enable CORS for localhost. Add comments about security, validation, and sandboxing.)
  • README.md (backend usage & environment)

/web-client:

  • Dockerfile (multi-stage build using nginx)
  • nginx.conf (optional)
  • package.json (Vite + React + TypeScript deps & scripts)
  • tsconfig.json
  • vite.config.ts
  • index.html
  • .env (VITE_API_URL=http://localhost:8000)
  • src/main.tsx
  • src/App.tsx
  • src/styles.css (Orbitron font & cyberpunk theme)
  • src/components/Sidebar.tsx
  • src/components/AIBrain.tsx
  • src/components/SectionAgent.tsx
  • src/components/Conversation.tsx (STT/TTS)
  • src/pages/Dashboard.tsx
  • src/pages/Playground.tsx
  • src/pages/Datasets.tsx
  • src/pages/AgentBuilder.tsx (integrates with backend endpoints /list_flows/, /get_flow/{name}, /save_flow/, /run_flow/)

Other requirements:

  • start-dev.sh and stop-dev.sh must be executable in the commit
  • Use relative paths in Dockerfiles and docker-compose
  • Do not modify existing repository files; add new files only. If conflicts exist, create PR and note potential conflicts in PR description
  • PR metadata:
    • Branch: ragamuffin-scaffold
    • Target: main
    • PR title: feat: add Ragamuffin monorepo scaffold (langflow, fastapi, web-client, docker-compose)
    • PR description: concise summary of additions, how to run (docker compose up --build), and recommended next steps (secure CORS, validate flows, add auth, persistent storage). Note simulated backend fallback if langflow unavailable and security caveats.

Include UI inspiration image reference anywhere in the READMEs: image1

Operational notes:

  • Ensure flows persistence directory is created and mounted.
  • The backend must start even if langflow is not installed and /run_flow/ should return a simulated response while logging a warning.
  • Mark scripts executable.

Do not include secrets or tokens in repository.

Deliverable: create branch ragamuffin-scaffold, add files, commit, push, and open PR into main. Provide the PR URL in the response.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI changed the title [WIP] Add Ragamuffin monorepo scaffold with FastAPI and React feat: add Ragamuffin monorepo scaffold (LangFlow, FastAPI, React) Nov 21, 2025
Copilot AI requested a review from Stacey77 November 21, 2025 03:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants