An AI-powered skincare formulation assistant that runs in your browser
SkinTwin is an advanced AI skincare formulation assistant that combines the power of multiple AI providers with an in-browser development environment for cosmetic chemistry. Built on innovative AI technology, SkinTwin enables you to chat with AI, generate formulation code, create product designs, and develop skincare formulations—all within your browser.
- 🤖 Multi-AI Provider Support: Works with OpenAI, Anthropic, Google, Ollama, and many more
- 🌐 In-Browser Runtime: Powered by WebContainer for full Node.js environment in the browser
- 🧪 Intelligent Formulation Generation: Create, edit, and refactor skincare formulations with AI assistance
- 🖥️ Integrated Terminal: Full shell access with zsh emulation
- 📁 Ingredient & Product Management: Create, edit, and organize formulation files in vessels structure
- 👀 Live Preview: See your formulations and products in real-time
- 🔄 Git Integration: Version control and repository management
- 🚀 Multiple Export Options: Export formulations to various industry formats
- 💻 Cross-Platform: Available as web app and desktop application
- 🐳 Docker Ready: Containerized deployment support
- 🧪 SKIN-TWIN Formulation Vessel: Specialized AI assistant for skincare product formulation with chemical reaction simulation
A specialized prompt that transforms the AI assistant into a virtual chemical reaction vessel for skincare formulation:
- Virtual Chemistry: Simulates real chemical reactions as ingredients are added
- Safety First: Only recommends cosmetically safe ingredients, avoids restricted chemicals
- Professional Output: Industry-standard ingredient tables with INCI names and ZAR pricing
- Step-by-Step Mixing: Detailed formulation instructions with chemical equations
- Product Development: Suggests creative product names and functional benefits
To use: Select "SKIN-TWIN Formulation Vessel" from the prompt dropdown in settings, then try examples like "Create a vitamin C brightening serum" or "Formulate an anti-aging night cream with retinol".
- Node.js 18.18.0 or higher
- pnpm (recommended package manager)
-
Clone the repository
git clone https://github.com/EchoCog/skin.twin.git cd skin.twin -
Install dependencies
pnpm install
-
Set up environment variables
cp .env.example .env.local
Edit
.env.localand add your API keys (see Environment Setup below). -
Start the development server
pnpm dev
-
Open your browser Navigate to
http://localhost:5173to start using SkinTwin!
Bolt supports multiple AI providers. You only need to configure the providers you want to use:
# For debugging (optional)
VITE_LOG_LEVEL=debugChoose one or more providers and add their API keys:
OPENAI_API_KEY=your_openai_api_key_hereANTHROPIC_API_KEY=your_anthropic_api_key_hereGOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_hereOLLAMA_API_BASE_URL=http://127.0.0.1:11434- Groq:
GROQ_API_KEY - HuggingFace:
HuggingFace_API_KEY - OpenRouter:
OPEN_ROUTER_API_KEY - Mistral:
MISTRAL_API_KEY - Cohere:
COHERE_API_KEY - DeepSeek:
DEEPSEEK_API_KEY - Together AI:
TOGETHER_API_KEY - xAI:
XAI_API_KEY - Perplexity:
PERPLEXITY_API_KEY
VITE_GITHUB_ACCESS_TOKEN=your_github_token_here
VITE_GITHUB_TOKEN_TYPE=classicCreate a GitHub Personal Access Token
AWS_BEDROCK_CONFIG={"region": "us-east-1", "accessKeyId": "your_key", "secretAccessKey": "your_secret"}pnpm dev- Start development serverpnpm build- Build for productionpnpm start- Start production serverpnpm test- Run testspnpm test:watch- Run tests in watch modepnpm lint- Lint codepnpm lint:fix- Fix linting issuespnpm typecheck- Type checking
skin.twin/
├── app/ # Remix application code
│ ├── components/ # React components
│ ├── lib/ # Core libraries and utilities
│ ├── routes/ # Remix routes
│ └── styles/ # Styling files
├── vessels/ # Skincare formulation vessels and ingredients
├── electron/ # Electron app configuration
├── public/ # Static assets
├── docs/ # Documentation
└── scripts/ # Build and utility scripts
- Framework: Remix with Vite
- Runtime: WebContainer for in-browser Node.js
- Styling: UnoCSS with Tailwind CSS
- UI Components: Radix UI
- AI Integration: AI SDK
- State Management: Nanostores
- Desktop App: Electron
pnpm dockerbuild
pnpm dockerrunpnpm dockerbuild:prod
docker run -p 5173:5173 --env-file .env.local skin-twin:productionBuild desktop applications for different platforms:
# Build for current platform
pnpm electron:build:unpack
# Build for specific platforms
pnpm electron:build:mac # macOS
pnpm electron:build:win # Windows
pnpm electron:build:linux # Linux
# Build for all platforms
pnpm electron:build:distpnpm deploy- Build the project:
pnpm build - Deploy the
build/clientdirectory to your hosting provider - Ensure environment variables are configured in your hosting platform
Run the test suite:
# Run all tests
pnpm test
# Run tests in watch mode
pnpm test:watch
# Type checking
pnpm typecheckWe welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and ensure tests pass
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style and conventions
- Add tests for new features
- Update documentation as needed
- Ensure all linting checks pass:
pnpm lint - Run type checking:
pnpm typecheck
For more detailed documentation, visit the docs directory. Additional documentation is being actively developed.
If you encounter any issues or have questions:
- Check the existing issues
- Create a new issue with detailed information
- Include steps to reproduce any bugs
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with ❤️ by the SkinTwin team
- Powered by WebContainer technology
- Community contributions from skincare formulation experts
Made with 🧪 by the SkinTwin team
Website • Issues • Discussions