README_EN.md

MatePPT

An AI PPT frontend project covering topic input, project creation, template selection, work management, and full classic PPT editing capabilities.

中文 | English

Online Demo · Quick Start · Features · License

---

🎬 Video Demo

demo_.video.mp4

A full walkthrough of the core AI PPT workflow, from outline generation to editing and exporting.

🌐 Online Demo

Demo URL: https://mateclaw.github.io/MatePPT/

This address is intended for quickly experiencing the core workflow of the project, including outline generation, template selection, slide editing, and export capabilities.

🖼️ Showcase

Knowledge Graph Retrieval Overview	History of Artificial Intelligence
Efficient Study Strategies for University Students	Environmental Protection and Sustainable Development

📌 Overview

MatePPT is not positioned as a standalone editor kernel. It is closer to a product-facing AI PPT web application.

Updates

• Added: template market, custom template upload, and annotation flow
• Fixed: local development login, upload, and API proxy issues

It is better suited for scenarios such as:

• AI PPT product frontends
• Web applications with login, project management, and template workflow
• Frontend projects that continue extending business capabilities on top of an existing editor

If what you need is only a minimal pure editor, or a project that never connects to backend APIs, this repository will likely need further trimming for your own scenario.

✨ Features

Product Flow

• Topic Input: enter a topic or requirement and start the AI PPT creation flow
• Project Creation: create a PPT project and continue into the editing workflow
• Template Selection: browse, choose, and apply templates
• Work Management: view historical projects and continue editing or previewing
• Detail Flow: move across outline, template, editing, and preview pages

Editing Capabilities

• Classic Editor: keeps a full PPT editing main interface
• Page Management: supports adding, deleting, reordering, and switching pages
• Element Editing: text, images, shapes, tables, charts, multimedia, and more
• Style Adjustments: theme, palette, layout, and basic style configuration
• Export Entry: keeps export and preview related capabilities available

🧰 Tech Stack

• React 18
• Umi 4
• TypeScript
• Ant Design
• Zustand
• React Query
• Tailwind CSS

🚀 Quick Start

Requirements

• Node.js >= 20
• pnpm >= 10

Install Dependencies

corepack pnpm install

Start Development Server

corepack pnpm dev

Default local address:

http://localhost:8000

Production Build

corepack pnpm build

🔌 Backend Configuration

This project requests backend APIs during runtime. The common integration approaches are:

1. Use the proxy configuration in .umirc.ts during local development
2. Explicitly specify the backend base URL

For example, in PowerShell:

$env:UMI_API_BASE="http://your-api-host"
corepack pnpm dev

If there is no available backend, the frontend can still start, but login, project creation, AI PPT generation, and related features will not work properly.

🗂️ Project Structure

MatePPT/
├── public/          # Static assets
├── src/
│   ├── pages/       # Page entries
│   ├── components/  # Shared and business components
│   ├── services/    # Request service layer
│   ├── stores/      # State management
│   ├── ppt/         # PPT editor core
│   ├── routes/      # Route configuration
│   └── config/      # Runtime configuration
├── .umirc.ts        # Umi config
└── package.json

🤝 Contributing

Issues and Pull Requests are welcome.

Suggested flow:

1. Fork this repository
2. Create a feature branch
3. Finish your changes and validate locally
4. Open a Pull Request

Before submitting, it is recommended to run at least once:

corepack pnpm build

📜 License

This project is open-sourced under the AGPL-3.0 license. See LICENSE for details.

📮 Contact

For discussion, collaboration, or project-related questions, feel free to reach out via:

• bubuxiu@gmail.com

If you would like to join the WeChat group, scan the QR code below: