Build AI workflows visually. Connect models, chain prompts, and deploy intelligent pipelines — all without code.
Composer is a visual workflow builder for AI agent pipelines. Drag nodes onto a canvas, connect them with edges, and watch your AI pipeline execute in real-time with streaming responses.
- Multi-provider AI — Use OpenAI, Google Gemini, and Anthropic models in the same workflow
- Real-time collaboration — Share a link and build together with live cursors
- Natural language editing — Describe what you want, Autopilot builds it
- MCP integration — Run flows programmatically from Claude Code or Cursor
npm install
npm run devOpen localhost:3000 and start building.
Create .env.local:
# Supabase (required)
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your-anon-key
# AI providers (at least one)
OPENAI_API_KEY=sk-...
GOOGLE_GENERATIVE_AI_API_KEY=AI...
ANTHROPIC_API_KEY=sk-ant-...Production environment (Vercel)
ENCRYPTION_KEY=... # 32-byte hex for owner-funded execution
SUPABASE_SERVICE_ROLE_KEY=... # Service role for secure operations
CRON_SECRET=... # MCP cleanup cron authentication| Node | Description |
|---|---|
| Text Input | Entry point for text data |
| Image Input | Upload images into your flow |
| Audio Input | Record audio with real-time waveform visualization |
| Node | Description |
|---|---|
| Text Generation | Multi-provider LLM prompts (OpenAI, Google, Anthropic) |
| Image Generation | Create images with GPT Image 1, DALL-E, or Gemini |
| React Component | Generate and render React components in a sandbox |
| Audio Transcription | Speech-to-text with OpenAI |
| Realtime Conversation | Live voice chat via OpenAI Realtime API |
| Node | Description |
|---|---|
| AI Logic | Custom JavaScript transforms generated by Claude |
| String Combine | Merge up to 4 strings with a separator |
| Switch | Route data based on boolean conditions |
| Comment | Annotate your flow with colored boxes |
| Preview Output | Display results and export to the sidebar |
| Provider | Text Generation | Image Generation |
|---|---|---|
| OpenAI | GPT-5.2, GPT-5 Mini, GPT-5 Nano | GPT Image 1, DALL-E 2/3 |
| Gemini 3 Pro, Gemini 3 Flash | Gemini 2.5 Flash Image | |
| Anthropic | Claude Opus 4.5, Sonnet 4.5, Haiku 4.5 | — |
Default models: Gemini 3 Flash (text), Gemini 2.5 Flash Image (images)
- React Flow canvas with drag-to-pan navigation
- Hold spacebar + drag to create selection boxes
- Color-coded edges: cyan (string), purple (image), amber (response), emerald (audio)
Natural language flow editing powered by Claude. Describe what you want to build and watch it happen.
- Execute mode — Changes apply immediately
- Plan mode — Review a step-by-step plan before applying
- Supports Claude Sonnet 4.5 and Opus 4.5 with extended thinking
Share your flow with a link and collaborate in real-time.
- Live cursor positions with names and avatars
- Owner-funded execution — Let collaborators run flows using your API keys
- Rate limiting: 10 runs/minute, 100 runs/day per flow
Run flows programmatically from AI coding tools.
{
"mcpServers": {
"composer": {
"type": "http",
"url": "https://composer.design/api/mcp"
}
}
}Tools: get_flow_info · run_flow · get_run_status
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router), React Flow |
| Styling | Tailwind CSS v4, shadcn/ui, motion.dev |
| AI | Vercel AI SDK, OpenAI SDK |
| Backend | Supabase (Auth, Storage, Realtime) |
| 3D | React Three Fiber |
| Testing | Vitest, React Testing Library |
npm run dev # Start dev server
npm run build # Production build
npm run lint # Run ESLint
npm test # Run testsThis project includes skills for Claude Code at .claude/skills/:
| Command | Purpose |
|---|---|
/supabase |
SQL, migrations, RLS policies, Edge Functions |
/node-creation |
Step-by-step guide for adding new node types |
/content-design |
UI text and capitalization standards |
/gemini-agents |
Parallel code changes with Gemini CLI |
/testing |
Vitest patterns and mocking strategies |
/docs |
Nextra documentation site conventions |
MIT