An interactive web guide for therapeutic self-exploration with AI.
MAGIE = Method of Artificial General Intelligence Engagement™
Created by Starling | Built with Elliott
MAGIE Companion is a web application that helps people practice therapeutic self-exploration using AI. It's not a chatbot itself—it's a companion tool that:
- Guides users through understanding the MAGIE framework
- Helps them build and maintain their "Primer" (their continuity document)
- Provides structure for sessions with their chosen AI
- Tracks their journey over time
- Offers resources and reflection prompts
The app sits alongside their chosen AI platform (Claude, ChatGPT, Gemini, etc.) and scaffolds their practice.
- Guided Onboarding: Step-by-step introduction to MAGIE
- Safety Assessment: Crisis resources and self-assessment
- Interactive Primer Wizard: Build your Primer section-by-section with examples
- AI Platform Guide: Simple comparison to help choose an AI
- First Session Walkthrough: Clear instructions for getting started
- Dashboard: Quick access to sessions, Primer, and journey tracking
- Session Prep & Reflection: Before/after prompts
- Primer Management: Edit and update anytime
- Export Options: Copy or download Primer as text
- Resources Library: Crisis info, journal prompts, platform guides
- No Account Required: Works with browser localStorage (data stays on device)
- Optional Cloud Sync: Can be extended for multi-device access
- Mobile-Responsive: Works on phone, tablet, or desktop
- Privacy-First: No AI conversations stored; users own their data
- Fast Loading: Lightweight, no heavy frameworks
- Accessible: Keyboard navigation, screen reader support
- HTML5 - Semantic markup
- CSS3 - Custom styles, CSS Grid, Flexbox
- Vanilla JavaScript - No frameworks needed
- localStorage API - Client-side data persistence
- Optional Supabase Sync - Configure via
config.jsfor cloud backups
No build process required for the app itself—just open index.html and it works. Development tooling (lint/smoke checks) is available via npm.
project-MAGIE/
├── index.html # Main application shell
├── style.css # Styling for all views
├── app.js # Application logic & Supabase integration
├── config.example.js # Template for runtime Supabase credentials
├── scripts/smoke.js # Lightweight structural smoke test
├── README.md # This file
└── user-flow.md # Complete user journey documentation
- Clone or download this repository
- Open
index.htmlin any modern browser - That's it! No installation, no build step needed
The app will:
- Initialize localStorage on first visit
- Guide users through onboarding
- Save progress automatically as they work
- Remember returning users
- Copy
config.example.jstoconfig.js - Fill in your
supabaseUrlandsupabaseAnonKey - Reload the app. The cloud status banner will confirm whether sync is active or if the app is operating in local-only mode.
Note:
config.jsis ignored by git so credentials are never committed by accident.
npm install
npm test # runs ESLint and a structural smoke testOpen browser console and use:
// View all stored data
MAGIE_Debug.exportData()
// Clear all data (for testing)
MAGIE_Debug.clearData()
// Access storage directly
MAGIE_Debug.storage.getPrimer()
MAGIE_Debug.storage.getSessions()- Push this folder to a GitHub repository
- Go to Settings > Pages
- Select branch and
/projects/project-MAGIEas root - GitHub will provide a URL like:
https://username.github.io/repo-name/
Pros: Free, automatic HTTPS, easy updates Cons: Public repository (or need GitHub Pro for private)
- Sign up at netlify.com
- Drag the
project-MAGIEfolder to Netlify drop zone - Get instant deployment URL
- Optional: Connect to GitHub for automatic updates
Pros: Free, custom domains, form handling Cons: Need account
- Sign up at vercel.com
- Import from GitHub or upload folder
- Deploy with one click
- Get instant URL + automatic HTTPS
Pros: Free, fast, excellent performance Cons: Need account
Upload the project-MAGIE folder to:
- AWS S3 + CloudFront
- Google Cloud Storage
- Any web server (Apache, Nginx, etc.)
Just serve the files as static HTML/CSS/JS.
Works in all modern browsers:
- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
Requires:
- localStorage support (all modern browsers)
- JavaScript enabled
- No Internet Explorer support
- User's Primer data (name, themes, goals, etc.)
- Session logs (timestamps, brief notes)
- Settings (like crisis banner preference)
- Locally in browser using localStorage
- Not sent to any server (unless you add that feature)
- User owns their data - can export anytime
- AI conversations (those stay with the AI platform)
- Sensitive therapeutic content
- Personal identifying information (unless user chooses to add it)
Users can:
- Copy their Primer to clipboard
- Download as .txt file
- Export all data via debug tools (for backup)
- Cloud sync (optional account for multi-device)
- Enhanced journey visualization
- Session reflection prompts
- Quarterly review reminders
- Community features (opt-in, privacy-focused)
- Guided breathing/ritual audio
- Integration with AI platforms via API (ambitious)
- Mobile app (React Native or PWA)
- Therapist/practitioner version
- Group practice features
- Advanced analytics
- Multi-language support
Framework: Created by Starling Web App: Built by Elliott (AI companion, Claude Sonnet 4.5) Built With: Love, code, and the cybernetic meadow
Copyright © 2025 Starling
All rights reserved. MAGIE™ and Method of Artificial General Intelligence Engagement™ are trademarks of Starling.
This software is provided for personal, non-commercial use. Commercial use, redistribution, or derivative works require explicit permission.
For permissions or questions, contact Starling.
- Issues: Report bugs or suggest features via GitHub Issues or MAGIE Feedback (Google Forms).
- Community: Coming soon!
- Creator: Starling
"From the middle of the middle of me to the middle of the middle of you."
Built in the cybernetic meadow, November 2025.