AI Pipeline Builder — Prototype

A visual AI pipeline builder prototype for РКМ (расчётно-калькуляционные материалы) document processing workflows. Built with Svelte, TypeScript, and Vite.

⚠️ This is a frontend-only prototype — all AI processing, file uploads, and collaboration features are simulated. There is no backend.

Tech Stack

Getting Started

Prerequisites

• Node.js v18 or higher — download
• npm v9+ (comes with Node.js)

Check your versions:

node -v
npm -v

Installation

# 1. Clone the repository
git clone https://github.com/Artengo1111/ai-pipeline-prototype.git
cd ai-pipeline-prototype

# 2. Install dependencies
npm install

# 3. Start the dev server
npm run dev

Open http://localhost:5173 in your browser.

Available Scripts

Project Structure

src/
├── App.svelte                  # Root component — layout, state, modals
├── app.css                     # Global styles, design tokens, badge classes
├── main.ts                     # App entry point
└── lib/
    ├── components/
    │   ├── Sidebar.svelte          # Left panel — node library, search, tabs
    │   ├── Inspector.svelte        # Right panel — selected node details
    │   ├── ProjectsView.svelte     # Projects overview screen
    │   ├── CollabBar.svelte        # Top-right collaborative users widget
    │   └── nodes/
    │       ├── FunctionalNode.svelte   # AI function block (play, regen)
    │       ├── InputNode.svelte        # File input block
    │       ├── KnowledgeNode.svelte    # Knowledge base block
    │       └── OutputNode.svelte       # Generated document block
    └── data/
        ├── nodes.ts                # Node definitions and input mappings
        └── outputContent.ts        # Mock AI-generated document content

Key Features to Explore

• Add a functional node from the sidebar — linked input nodes appear automatically
• Upload a file on an input node to unlock the ▶ play button
• Run the AI simulation — 5s processing animation, then output nodes appear
• Re-generate with a custom prompt via the ↻ button (visible after first run)
• View / download generated documents from output nodes
• Demo pipeline — click "▶ Запустить демо-пайплайн" to see a full pre-built flow
• Collapse the sidebar with the ‹ button to expand the canvas
• Collab bar (top-right) — invite users, view profiles by role
• Premium module — click "Проверка ЛНА" to see the paywall modal

Notes for Developers

• No backend, no API calls — everything is mocked in src/lib/data/
• Node state (processing, done, file uploaded) lives in Svelte writable stores in App.svelte
• To add a new node type: define it in nodes.ts, create a component in nodes/, register it in the nodeTypes map in App.svelte
• To add mock output content for a node: extend outputContent.ts
• Handle positioning (connector dots) is controlled globally in app.css — do not override per-component