Build automation, diagrams, charts and documents on one infinite canvas.
Automation pipelines · Flowcharts · BPMN · UML · Org charts · Mind maps · Network diagrams · Live chart dashboards · Docs, sheets & whiteboards · AI agents with 12 model providers · 200+ app integrations.
Features · Demo · How to use · Quick start · Configuration · Architecture · License
Generate_complete_video_tutorial_202608170839.mp4
🎬 Watch Zeno in action — a complete walkthrough of building automation flows, diagrams and documents on the canvas.
- One infinite canvas — drag, drop, connect and run. Sticky notes, freehand drawing, frames, embeds and thousands of shapes.
- Media on the canvas — upload, drop, paste or resize images, PDFs and videos that render and play right on the canvas.
- Visual automation builder — wire together triggers, flow control, transforms, HTTP/API calls, databases, file ops, office generators and AI steps, then execute the whole graph with one click. Save any canvas as a reusable workflow.
- AI agents & providers — run LLM-powered agents and ReAct loops across 12 providers (OpenAI, Anthropic, Google Gemini, Groq, Mistral, DeepSeek, Fireworks, Together, xAI, Cohere, OpenRouter, local Ollama).
- 200+ app integrations — connect Gmail, Slack, GitHub, Notion, Asana, Figma, Trello, Google Calendar, Stripe, Vercel and more through Composio, with full OAuth connection flow.
- 1000+ diagram shapes — 17 categories: Flowchart, BPMN, UML, ER, Network, Org Chart, Mind Map, Venn, Gantt, Wireframe, Electrical, Piping, Floor Plan, Science, 3D solids and arrows.
- 50+ chart blocks — bar, line, pie, radar, heatmap, treemap, candlestick, sankey, gantt, word cloud, geo maps and more.
- Docs, sheets & whiteboards — Notion-style blocks (todo, toggle, callout, databases with table/board/calendar/timeline views), spreadsheets with formulas, slide decks and a full whiteboard.
- Fullstack micro-apps — generate real React + Express apps from prompts, preview them live with Sandpack and export the code.
- Auto-save & history — every canvas auto-saves to local storage with undo/redo; everything persists across reloads.
Zeno is a blank canvas you can turn into anything. Here's the full workflow.
- On the home screen, pick one of the 18 ready-made projects (automations, flowcharts, org charts, dashboards, planners…) and it loads onto the canvas instantly — explore it, run it, tweak it or remix it.
- Or click New to start from scratch on an infinite canvas.
- Click the canvas or use the
/slash menu to insert nodes: shapes, blocks, charts, media, AI steps and more. - Drag nodes anywhere on the canvas; drag from a node's handle to connect two nodes with an edge.
- Add sticky notes, freehand drawing, frames and embeds for rich layouts.
- Media nodes let you upload, drag & drop, paste or resize images, PDFs and videos directly on the canvas — videos play inline.
- Add a trigger node (schedule, webhook, form…).
- Wire in logic and actions: flow control, transforms, HTTP/API calls, database queries, file operations, office document generators (Word / Excel / PowerPoint) and AI steps.
- Optionally add an AI agent node that can reason and use tools across your integrations.
- Hit Run — Zeno executes the whole graph and shows results for each step.
- Save the canvas as a reusable workflow template.
- Docs — Notion-style block editor with headings, to-do lists, toggles, callouts and databases (table, board, calendar and timeline views).
- Sheets — spreadsheets with formulas and charts.
- Whiteboard — freeform drawing, sticky notes and frames.
- Charts — 50+ live chart types backed by real data.
- Micro-apps — describe an app in plain language, generate a full React + Express app, preview it live and export the code.
- App integrations — open the Connect panel, pick an app (Gmail, Slack, GitHub, Notion, Asana, Figma, Trello, Google Calendar, Stripe, Vercel…) and complete the OAuth flow. 200+ apps supported.
- AI providers — add your keys in Settings or in
.envto enable agents and AI steps across 12 providers. Everything works out of the box without keys; keys unlock AI and integrations. - Web search & email — add a search key (Tavily / SerpAPI) for real web search, and SMTP details for real email sending.
- Everything auto-saves to your browser's local storage — close and reopen anytime.
- Use undo/redo freely; nothing is lost.
- Save any canvas as a reusable workflow for future projects.
💡 Tip: Start with the Email Inbox AI Summarizer or GitHub Issue Auto-Triage project to see a complete automation + AI agent in action.
Prerequisites: Node.js 18+ and npm (or bun).
# 1. Install dependencies
npm install
# 2. Configure environment (optional — works out of the box without keys)
cp .env.example .env
# 3. Start the full-stack dev server (Express API + Vite client on port 3000)
npm run devOpen http://localhost:3000 — the Ready-made projects gallery is on the home screen.
💡 Everything works without any API keys. Add keys to enable AI agents, app integrations, web search and real email sending.
| Command | Description |
|---|---|
npm run dev |
Full-stack dev server (Express + Vite, port 3000) |
npm run dev:client |
Vite dev server only |
npm run build |
Production build |
npm run preview |
Preview the production build |
npm run lint |
TypeScript type-check (tsc --noEmit) |
All configuration lives in .env (see .env.example). Optional keys power specific features:
| Variable | Purpose |
|---|---|
COMPOSIO_API_KEY |
200+ app integrations (Gmail, Slack, GitHub, …) |
OPENAI_API_KEY · ANTHROPIC_API_KEY · GOOGLE_API_KEY · GROQ_API_KEY · MISTRAL_API_KEY · DEEPSEEK_API_KEY · FIREWORKS_API_KEY · TOGETHER_API_KEY · XAI_API_KEY · COHERE_API_KEY · OPENROUTER_API_KEY |
AI model providers for agents & automation |
OLLAMA_BASE_URL |
Local models (Ollama) — no key needed |
SEARCH_API_KEY |
Real web search for agents (Tavily / SerpAPI) |
SMTP_HOST · SMTP_PORT · SMTP_USER · SMTP_PASS |
Real email sending |
APP_URL |
OAuth callback URL for app connections |
Keys can also be entered directly in the app's Settings UI — they are stored locally and never sent anywhere except to the provider you choose.
┌────────────────────────────┐ ┌─────────────────────────────┐
│ React + Vite client │ │ Express server (tsx) │
│ · Infinite canvas (React │────▶│ · /api/workflows/run │
│ Flow / @xyflow) │ │ · /api/agent/run (+ SSE) │
│ · Shape library (data- │ │ · Composio OAuth flow │
│ driven SVG, 1000+) │ │ · Office (docx/xlsx/pptx) │
│ · Block editor (Zeno) │ │ · SQLite · Files · SMTP │
│ · Zustand state + autosave│ └─────────────────────────────┘
└────────────────────────────┘
Key directories
| Path | What lives here |
|---|---|
src/data/projects.ts |
The 18 ready-made projects (single source of truth) |
src/data/templates.ts |
Templates palette, derived from projects |
src/data/shapes/ |
The 1000+ shape library (declarative SVG body model) |
src/nodes-core/ |
The node executor + 70+ executable node types |
src/components/ |
Canvas, nodes, panels and UI |
src/components/MediaNode.tsx |
Image / PDF / video media nodes (upload, drop, paste, resize) |
src/zeno/ |
The block editor engine (docs, databases, charts) |
src/server/ |
AI agent framework + Composio SDK |
server.ts |
Express API surface |
Ready-made projects are plain arrays of nodes and edges. Add a new entry to
src/data/projects.ts and it automatically appears in the home gallery and
the Templates palette:
{
id: 'my-project',
name: 'My Automation',
tagline: 'One-liner describing what it does.',
emoji: '🤖',
gradient: 'linear-gradient(135deg,#6366f1,#ec4899)',
category: 'Automation',
difficulty: 'beginner',
nodes: [ /* canvas nodes */ ],
edges: [ /* connections */ ],
}Released under the MIT License. Built with React Flow, Vite, Zustand and Composio.
Made with 🧠 by the Zeno team