A quick guide to using utilsio templates - pre-built application starters with subscriptions already integrated and ready to deploy.
Instead of setting up everything from scratch, you can clone a template and have a working, production-ready, officially supported subscription system immediately!
It’s up to you to choose to use templates or not, but it is advised that you do because it provides integration out-of-the-box, while keeping everything minimal so you can customize it exactly to your needs without redundancies.
Instant Setup
Clone and set up a working subscription app right now
Best Practices
Security, error handling, and UX patterns already implemented
Production Ready
Tested patterns used in real applications, ready for deployment
Officially Supported
Templates are updated regularly, ensuring that everything just works
Use this prompt with your AI coding assistant to integrate utilsio:
Copy
You are helping me integrate utilsio, a crypto-native subscription system, into my application.Documentation: https://utilsio.dev/docs- Installation guide: https://utilsio.dev/docs/install.md- Full reference: https://utilsio.dev/docs/llms-full.txt- Quick reference: https://utilsio.dev/docs/llms.txtKey concepts:- HMAC-SHA256 request signing (secrets never leave server)- Client: @utilsio/react with UtilsioProvider + useUtilsio hook- Server: Server actions using deriveAppHashHex + signRequest- Safari support: /api/signature-callback endpoint for browsers blocking third-party cookies- Crypto payments via Superfluid streaming (USDT token)Decision tree - YOU MUST ANALYZE THE CODEBASE FIRST:1. Examine the project structure (check for package.json, src/, components/, etc.)2. Look at key files to assess if this is a new/empty project or existing codebase3. If codebase appears newly created/minimal, ASK ME: "This looks like a new project. Can I reset the codebase entirely and use the utilsio template for fastest setup?" - If YES: Clone template from https://github.com/utilsio/templates (see install.md) - If NO: Proceed with manual SDK integration4. If codebase is clearly mid-development with existing features: Use manual SDK integrationManual integration:- Install @utilsio/react package- Create server action for signing (CRITICAL for security)- Create /api/signature-callback endpoint for Safari support- Wrap app with UtilsioProvider- Never expose UTILSIO_APP_SECRET or UTILSIO_APP_SALT to clientTask: <DESCRIBE WHAT YOU WANT TO BUILD OR INTEGRATE>My setup:- Framework: <YOUR FRAMEWORK, e.g., Next.js 15 App Router>- Package manager: <bun/npm/pnpm/yarn>- Additional context: <ANY OTHER RELEVANT INFO>
Templates are excellent learning resources:Study the code to understand:
How to structure a subscription app
Security best practices for API keys
User flow design for subscriptions
Loading state management
…
Even if you’re building from scratch, clone a template to see how all the pieces fit together. You can provide the template for your AI coding agent as an example to build your app too!
