Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

PiRC4: Pi Visual Builder AI-Driven No-Code Platform for Pi App Studio #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aybvip wants to merge 1 commit into PiNetwork:main
base: main
Choose a base branch
Loading
from aybvip:pirc4-pr
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added image.png
View file Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
[フレーム]
41 changes: 41 additions & 0 deletions pirc4/CONTRIBUTING.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Contributing to Pi Visual Builder

Thank you for your interest in contributing to the Pi Visual Builder specification.

## How to Contribute

### Specification Improvements
1. Open an Issue describing the proposed change
2. Reference the specific document (e.g., "docs/1-components.md: PiCard component")
3. Provide rationale and any supporting research

### New Component Proposals
1. Open an Issue with the component name and use case
2. Define props, events, and visual behavior
3. Provide a sketch or reference implementation
4. Follow the existing component format in `docs/1-components.md`

### Plugin Proposals
1. Open an Issue with plugin name and category
2. Define actions, components, and permissions
3. Follow the plugin format in `docs/4-marketplace.md`

### Documentation Standards
- Use Markdown with proper headings and tables
- Include code examples for all components and blocks
- Reference PiDCTP module names when applicable
- Keep language clear and accessible for non-technical Pioneers

## Pull Request Process
1. Fork the repository
2. Create a feature branch
3. Make changes following existing document style
4. Submit PR with clear description of changes

## Reporting Issues
- **Bugs/Errors**: Open an Issue with the document name and section
- **Feature Requests**: Open an Issue with use case and rationale
- **Security vulnerabilities**: Email security@pivisualbuilder.org

## License
By contributing, you agree that your contributions will be licensed under the MIT License.
56 changes: 56 additions & 0 deletions pirc4/LICENSE
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
Pi Visual Builder — Idea & Proposal License

Original Concept and Idea by: Ayoub (aybvip)
Implementation Rights: Pi Network (PiCore Team)

This project represents an original idea and proposal created by Ayoub (aybvip)
and submitted to Pi Network for adoption and implementation.

TERMS AND CONDITIONS:

1. IDEA OWNERSHIP: The original concept, idea, and proposal for Pi Visual Builder
were created by Ayoub (aybvip). The idea is submitted to Pi Network for the
purpose of enhancing Pi App Studio.

2. IMPLEMENTATION RIGHTS: Pi Network (PiCore Team) has the exclusive right to
adopt, implement, modify, and integrate this idea into Pi App Studio or any
Pi Network product. Upon adoption by Pi Network, all implementation rights
belong to Pi Network.

3. ATTRIBUTION: If Pi Network adopts this idea, the original contributor
(Ayoub / aybvip) should be credited as the original idea author in any
official announcement or documentation.

4. RESTRICTIONS: No person or entity other than Pi Network may:
- Claim ownership of this idea or proposal
- Copy, reproduce, or distribute this project for commercial purposes
- Implement this concept under a different name without permission
- Use any part of this project without explicit written permission
- Modify, adapt, or create derivative works from this project
- Remove or alter this license or the attribution to the original creator

5. DERIVATIVE WORKS: Any modification, adaptation, or derivative work based
on this project remains subject to this license. Changing the name,
rebranding, or altering parts of the idea does not create a new work
free from this license. The original idea author (Ayoub / aybvip) and
Pi Network retain all rights over any derivative works.

6. INTELLECTUAL PROPERTY: This project is protected under intellectual
property laws including copyright and trade secret protections. Any
unauthorized use, reproduction, or implementation constitutes a
violation of these rights and may be subject to legal action.

7. PROPOSAL STATUS: This project is a voluntary proposal submitted to
Pi Network. The original contributor grants Pi Network the right to
adopt and implement this idea. No other entity has this right.

8. COMMUNITY USE: Community members may view, discuss, and provide feedback
on this project for the purpose of improving Pi Network's ecosystem,
but may not appropriate, fork, or commercialize any part of it.

THIS PROJECT IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
ANY CLAIM, DAMAGES OR OTHER LIABILITY.

For permissions and inquiries, contact Pi Network through official channels
at https://minepi.com
120 changes: 120 additions & 0 deletions pirc4/ReadMe.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# Pi Visual Builder — PiRC4: The Ultimate AI-Driven No-Code Platform

![Pi Visual Builder Preview](assets/preview.png)

> **The Power of Visual Development + The Intelligence of Pi AI** — A next-generation visual development platform with a native **AI Agent (Orchestrator)**. Build complex, relational database web apps with step-by-step visual workflows, all powered by natural language prompts.

## 📚 Documentation Index

| # | Document | Description |
|---|----------|-------------|
| 1 | [Component Specification](docs/1-components.md) | 20+ visual components (Layout, Display, Input, Navigation, Pi-Native) |
| 2 | [Logic Blocks](docs/2-logic-blocks.md) | Event blocks, logic blocks, data blocks, Pi SDK blocks |
| 3 | [Code Generation](docs/3-code-generation.md) | React/TS + HTML/CSS output, Pi SDK API, build pipeline |
| 4 | [Component Marketplace](docs/4-marketplace.md) | Publishing, monetization, verification, discovery |
| 5 | [Example Apps](docs/5-examples.md) | 5 complete app examples (e-commerce, services, community, loyalty, HTML) |
| 6 | [Editor UI Layout](docs/6-editor-ui-layout.md) | Professional editor: canvas, property editor, AI assistant panel, workflow canvas, data tab, styles tab |

## 📱 Interactive Mockups (Mobile-Optimized)

| Mockup | Preview |
|--------|---------|
| [🎨 Design Tab](mockups/1-design-tab.html) | Visual canvas with elements tree, property editor, and AI assistant |
| [⚡ Workflow Tab](mockups/2-workflow-tab.html) | Step-by-step logic chains with Pi payment & escrow actions |
| [🗄️ Data Tab](mockups/3-data-tab.html) | Relational database with PiDCTP-linked fields and privacy rules |
| [🎭 Styles Tab](mockups/4-styles-tab.html) | Color/font variables, element styles, live preview with dark theme AI |

## 🤖 The Pi AI Agent (BETA)

The **Pi AI Agent** is the heart of the platform. It's not just a chatbot; it's an **Active Orchestrator** that performs actions across the environment:

1. **Instant UI Implementation**: "Build a form so users can apply to jobs" → AI creates popup, adds input fields, styles them to match your theme.
2. **Logic & Workflow Generation**: "When the user clicks apply, save the data and send a confirmation" → AI builds a 3-step visual workflow: `Show Popup` → `Display Data` → `Send Confirmation`.
3. **Real-time Design Reworking**: "Rework the design to be more professional" → AI adjusts padding, typography, and color schemes across the active screen.
4. **Database Auto-Schema**: AI automatically suggests and creates data types (e.g., `Job Application`) based on the form fields it just built.

## 🏛️ Professional Development Workspace

### 1. Design Tab (Visual Canvas)
- **Pixel-Perfect Canvas**: Drag-and-drop elements with absolute or flexbox positioning.
- **Elements Tree**: Organize components hierarchically (Groups, Text, Buttons, Icons, Shapes).
- **Responsive Engine**: Toggle between Mobile, Tablet, and Desktop views instantly.
- **Property Editor**: Full control over fonts, colors, animations, and conditional states.

### 2. Workflow Tab (Step-by-Step Logic)
- **Visual Logic Chains**: A clear, vertical flow of actions triggered by events.
- **Event Triggers**: `Button is clicked`, `Page is loaded`, `Payment is confirmed`.
- **Action Steps**: Show/Hide elements → Data operations → Ecosystem actions (Send Pi, Award Badge, Open Dispute).

### 3. Data Tab (Relational Manager)
- **Data Types**: Build complex objects like `Merchant`, `EscrowTransaction`, `Job`.
- **Field Mapping**: Link fields directly to PiDCTP on-chain states for verified reputation.
- **Privacy Rules**: Define who can see or modify specific data points.

### 4. API Connector
- **Visual API Builder**: Connect any external REST API without writing code.
- **Native Pi SDK integration**: Visual blocks for all Pi Network core functions.

### 5. Plugins & Marketplace
- **Community Plugins**: Discovery of community-built logic blocks and UI components.
- **Monetization**: Authors earn Pi for their premium plugins.

### 6. Styles Tab
- **Style Variables**: Colors, fonts, spacing — define once, apply everywhere.
- **Element Styles**: Reusable style presets (Button-primary, Card-default, etc.).
- **Pi Design System**: Built-in theme tokens for consistent Pi ecosystem branding.

## 🏗️ Technical Architecture (AI-First)

```
┌─────────────────────────────────────────────────────────────┐
│ PI VISUAL BUILDER (VB) │
├─────────────────────────────────────────────────────────────┤
│ 🤖 PI AI AGENT (Orchestrator: Generates UI, Logic, Data) │
├──────────┬───────────┬───────────┬───────────┬──────────────┤
│ DESIGN │ WORKFLOW │ DATA │ API │ PLUGINS │
│ CANVAS │ ENGINE │ MANAGER │ CONNECTOR │ MARKETPLACE │
└──────────┴─────┬─────┴─────┬─────┴─────┬─────┴──────┬───────┘
│ │ │ │
┌──────────▼───────────▼───────────▼────────────▼───┐
│ PI SDK & PiDCTP LAYER │
│ (On-Chain Auth, Payments, Escrow, Reputation) │
└──────────────────────────┬────────────────────────┘
│
┌───────────────▼───────────────┐
│ PI BROWSER RUNTIME │
│ (React/TS Dynamic Web App) │
└───────────────────────────────┘
```

## 🔗 PiRC3 (PiDCTP) Visual Integration

Pi Visual Builder turns complex smart contract calls into simple visual steps:

| Visual Workflow Step | PiRC3 Backend Action |
| :--- | :--- |
| `Verify Seller` | `pi.reputation.getEffectiveScore()` |
| `Create Milestone` | `pi.escrow.createMilestoneEscrow()` |
| `Release Payment` | `pi.escrow.confirmReceipt()` |
| `Lodge Complaint` | `pi.dispute.open()` |
| `Award Verified Badge` | `pi.reputation.awardBadge()` |

## 📅 Roadmap

| Phase | Feature | Status |
|-------|---------|--------|
| **Phase 1** | Visual Foundation (UI Canvas + Basic Workflows) | Proposed |
| **Phase 2** | Data Intelligence (Relational Database + Privacy Rules) | Proposed |
| **Phase 3** | AI Integration (Pi AI Agent for natural language app building) | Proposed |
| **Phase 4** | Global Ecosystem (Plugin Marketplace + Pi App Studio Sync) | Proposed |

## 📄 License

Idea & Proposal License — Original concept by **Ayoub (aybvip)**. Implementation rights belong exclusively to **Pi Network**. No other entity may claim, copy, or implement this idea. See [LICENSE](LICENSE) for full terms.

---

### Links
- **PiRC3 (PiDCTP)**: [PR #378](https://github.com/PiNetwork/PiRC/pull/378)
- **Platform Discussion**: [Issue #381](https://github.com/PiNetwork/PiRC/issues/381)
- **Pi App Studio**: Available in Pi Browser
46 changes: 46 additions & 0 deletions pirc4/SECURITY.md
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Security Policy

## Reporting a Vulnerability

**Do NOT report security vulnerabilities through public GitHub Issues.**

Email security@pivisualbuilder.org with:
- Description of the vulnerability
- Steps to reproduce
- Potential impact
- Suggested fix (if any)

We will acknowledge receipt within 48 hours and provide a detailed response within 7 days.

## Security Considerations

### Plugin Security
- All plugins are sandboxed — cannot access other plugin state
- External network requests require explicit permission in manifest
- No direct DOM manipulation (use framework APIs only)
- Obfuscated code is rejected during review

### Data Security
- Privacy rules enforced at runtime — no bypass possible
- PiDCTP on-chain state is immutable — visual builder cannot alter it
- API keys stored encrypted, never exposed to client-side code

### AI Agent Security
- AI actions require user confirmation before execution
- AI cannot modify privacy rules without explicit approval
- AI-generated code is reviewed before deployment
- Rate limiting prevents AI abuse

## Scope

### In Scope
- Plugin system and sandboxing
- Data privacy rules enforcement
- AI Agent action boundaries
- API connector security
- PiDCTP integration correctness

### Out of Scope
- Pi Network core protocol (report to Pi team)
- Pi Browser vulnerabilities (report to Pi team)
- Third-party API security (report upstream)
Binary file added pirc4/assets/preview.png
View file Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
[フレーム]
Loading

AltStyle によって変換されたページ (->オリジナル) /