Grafi Ai

Grafi AI – Decentralized AI-Powered Design Platform

Welcome to Grafi AI, a next-generation decentralized design platform that blends the best of traditional design tools with the power of AI and blockchain technology. Imagine Canva, but with true user ownership, privacy-first storage, and censorship resistance. Grafi AI empowers creators to design freely while maintaining complete control over their data and creative output.

At its core, Grafi AI provides an intuitive design experience with a left sidebar packed with essential tools, including drawing options (select, pencil, text, shapes), an AI image generator with multiple style options (photographic, digital art, illustration, abstract), and a rich color palette of over 50 vibrant options. The canvas area allows for interactive click-and-drag object manipulation with real-time editing and precise zoom controls.

For deeper customization, the right sidebar serves as a properties panel where users can fine-tune object details such as font family, size, alignment, colors (fill, stroke, opacity), and transformations (scale, rotation, positioning). Designs can be exported in multiple formats (PNG, SVG, JSON) and stored under "My Designs" for quick access.

What sets Grafi AI apart is its decentralized storage model. Users can connect their Sui wallet (Slush, Sui Wallet, Suiet) to save designs on-chain through Walrus storage with optional Seal encryption for private designs. For fast local retrieval, designs are also backed up in MongoDB and identified using a unique Blob ID system, allowing for easy sharing without platform lock-in.

Grafi AI is built on the principles of true user ownership, privacy control, and censorship resistance. Unlike traditional platforms like Canva, your designs cannot be deleted or restricted, and encrypted storage ensures even the platform team cannot access your private creations.

This project was built to solve real problems around ownership, platform risk, and data privacy, while leveraging a Walrus + MongoDB hybrid architecture for performance and reliability. Grafi AI is also an early mover in decentralized creative tools, offering a unique opportunity for creators to adopt a privacy-first workflow.

The platform follows a freemium model, where basic design tools are free to use, while premium features are available under paid plans. Additional monetization streams include transaction fees on saves, a template marketplace with commission-based earnings, enterprise collaboration features, and premium tiers for storage and performance.

Core Architecture & Technology Choices We built Decentralized Canva as a full-stack Next.js 14 application with a hybrid storage architecture that combines decentralized storage with traditional database management. The frontend leverages React 18 with TypeScript and Tailwind CSS for styling, while the core design functionality is powered by Fabric.js 5.x - a powerful canvas library that we heavily customized for our design tools. The entire application is structured around Next.js App Router, which allows us to serve both the frontend and API endpoints from a single codebase, eliminating the need for a separate backend server and reducing deployment complexity. Blockchain Integration & Wallet Management For blockchain integration, we chose the Sui Network and integrated it using @mysten/dapp-kit, which provides excellent TypeScript support and wallet management capabilities. We implemented support for multiple wallet types including Slush Wallet, Sui Wallet, Suiet Wallet, and Unsafe Burner Wallet. One particularly hacky solution we implemented was a custom wallet type detection system that uses string matching on wallet names to determine the wallet type, since the official dApp kit didn't handle all wallet types consistently. This involved creating a complex ternary operator chain that checks wallet names and maps them to our internal wallet types - it's not the most elegant solution, but it works reliably across all supported wallets. Hybrid Storage Architecture - The Core Innovation The most innovative aspect of our architecture is our hybrid storage system that combines Walrus decentralized storage with MongoDB for metadata management. We store the actual design data (the canvas JSON, images, and other binary content) in Walrus, which provides true decentralization and immutability, while storing metadata like design names, creation dates, wallet addresses, and searchable tags in MongoDB for fast queries and organization. This approach gives us the best of both worlds - the security and decentralization of blockchain storage with the performance and query capabilities of a traditional database. The integration between these two systems happens through a custom service layer that handles the complex flow of saving designs to Walrus, receiving a blob ID, and then storing that blob ID along with metadata in MongoDB. AI Integration & Canvas Enhancement We integrated OpenAI's API for both image generation (DALL-E 3) and text generation (GPT-4), creating a seamless AI-assisted design experience. One of the most notable hacky solutions we implemented was a custom AI-to-Canvas bridge that automatically scales and positions AI-generated images within the Fabric.js canvas. Since Fabric.js doesn't natively support AI-generated content, we had to create a custom image loading system that calculates optimal scaling ratios, centers images on the canvas, and handles different image formats. We also built a custom property panel that updates in real-time as users interact with canvas objects, using Fabric.js event listeners to track selection changes and update the UI accordingly. Encryption & Security Implementation For security, we implemented end-to-end encryption using a custom encryption service built on top of the Seal encryption library. The most interesting aspect of our encryption implementation is that we use the user's wallet address as the encryption key, ensuring that only the wallet owner can decrypt their designs. This creates a truly decentralized security model where users maintain complete control over their data without relying on external key management systems. The encryption happens client-side before data is sent to Walrus, ensuring that even we as developers cannot access the encrypted design content. State Management & Performance Optimizations Instead of using external state management libraries like Redux or Zustand, we built a custom hook architecture that provides better TypeScript support and more predictable state flow. Our custom hooks like useDesigns, useCanvas, useWalrus, and useAI encapsulate all the complex logic for managing different aspects of the application state. This approach gives us fine-grained control over when and how state updates occur, which is crucial for a real-time design application where performance is paramount. We also implemented lazy loading for the database connection and connection pooling to ensure the MongoDB integration doesn't impact the user experience. Partner Technologies & Their Benefits The integration with MongoDB Atlas as our database partner was crucial for providing reliable, scalable metadata storage with global availability. Walrus as our decentralized storage partner enables true data ownership and censorship resistance, while OpenAI's API provides the AI capabilities that differentiate our platform from traditional design tools. The Sui Network integration through @mysten/dapp-kit gives us access to a fast, low-cost blockchain with excellent developer tools. Each of these partner technologies was chosen specifically to address different aspects of our decentralized, AI-enhanced design platform, and their integration creates a cohesive ecosystem that traditional centralized design tools simply cannot match. Notable Technical Challenges & Solutions One of the most complex challenges we solved was creating a real-time design synchronization system that allows users to see their designs update instantly as they make changes, while also handling the asynchronous nature of blockchain transactions and decentralized storage. We implemented a custom event system that queues operations and provides optimistic updates, so users see changes immediately while the actual storage operations happen in the background. Another hacky but effective solution was our custom error handling system that gracefully degrades when AI services are unavailable or when wallet connections fail, ensuring the core design functionality always remains accessible even when external services are down.