A beautiful Studygram-styled web application for AI Chat, Image Generation, and Video Generation — completely free via Puter.js.
Features • Demo • Quick Start • Tech Stack
- Multi-model support: GPT-5.2, Claude Opus 4.5, Gemini 3 Pro, DeepSeek, o3 Reasoning, and more
- Multi-modal input: Upload up to 10 images/files (max 20MB each) for AI analysis
- Rich content display: Markdown (GFM), LaTeX math rendering, syntax-highlighted code blocks
- Smart UX: 40-message context history, Enter to send / Shift+Enter for newline, quick prompt suggestions
- Web Search: Integrated GPT-4o Search model for real-time information
- Top models: Gemini 3 Pro Image, GPT Image 1, DALL-E 3, FLUX 1.1 Pro, Stable Diffusion 3.5
- Polaroid-style display: Generated images appear in a beautiful polaroid frame
- Error handling: Friendly loading states and error messages
- Cutting-edge models: Sora 2, Veo 3.0, Kling 2.1, Seedance, and more
- Customizable: Duration (4-12s) and resolution options
- Test Mode: Try without consuming credits
- Handwritten fonts, lined paper background, pastel colors
- Light/Dark mode toggle
- Responsive and mobile-friendly
- Account Pool: Use for free without login - auto-rotate accounts when credits run out
- Credits/Usage: View detailed API usage with popup modal
- Auto-load: Credits automatically refresh on page load
- Account management: Sign in/out with Puter account
Try PaperChat: Live Demo
- Node.js ≥ 20
- npm or compatible package manager
- Puter account (auto-created on first use via browser)
# Clone the repository
git clone https://github.com/eiyuumiru/PaperChat.git
cd PaperChat
# Install dependencies
npm install
# Start development server
npm run devnpm run build
npm run preview| Category | Technologies |
|---|---|
| Framework | React 18, TypeScript, Vite 6 |
| AI Backend | Puter.js SDK (@heyputer/puter.js) |
| Markdown | react-markdown, remark-gfm, rehype-highlight |
| Math | remark-math, rehype-katex, KaTeX |
| Styling | CSS3 with Studygram aesthetic |
src/
├── App.tsx # Main app with tab navigation
├── main.tsx # React entry point
├── components/
│ ├── AdminPanel.tsx # Hidden admin panel (Ctrl+Alt+Shift+P)
│ ├── ChatPanel.tsx # Chat interface with file upload
│ ├── ImagePanel.tsx # Image generation panel
│ ├── VideoPanel.tsx # Video generation panel (Beta)
│ ├── Header.tsx # Header with settings/changelog
│ ├── ModelSelector.tsx# AI model dropdown
│ ├── Message.tsx # Message rendering component
│ └── ...
├── hooks/
│ ├── useChat.ts # Chat logic with Puter AI
│ ├── useImageGeneration.ts
│ └── useVideoGeneration.ts
├── utils/
│ ├── api.ts # API helpers & Account Pool client
│ ├── constants.ts # App constants & configs
│ ├── i18n.ts # Multi-language support (EN/VI)
│ └── fileValidator.ts # File upload validation
├── types/ # TypeScript definitions
└── styles/
├── index.css # Studygram CSS design
└── admin.css # Admin panel styles
api/ # Vercel serverless functions
├── _lib/
│ ├── accountPool.ts # Account rotation logic
│ ├── db.ts # Turso database client
│ └── puterClient.ts # Puter API wrapper
├── chat.ts # Chat API endpoint
├── image.ts # Image generation endpoint
├── video.ts # Video generation endpoint
├── admin-accounts.ts # Admin: list/add accounts
└── admin-refresh.ts # Admin: refresh all credits
PaperChat uses Puter.js which is free but has rate limits per account. If you hit the limit:
- Clear cookies for PaperChat site
- Clear cookies for puter.com
- Return to PaperChat and send any message
- A new account is auto-created ✨
- All API calls are handled via Puter.js SDK — no API keys required
- For production deployment, serve over HTTPS for stable Puter.js operation
- User authentication is managed by Puter.js automatically
Contributions are welcome! Feel free to:
- Report bugs or issues
- Suggest new features
- Submit pull requests
This project is open source and available under the MIT License.
Made with 💖 by eiyuumiru