Circle: AI Generation Platform with USDC Integration

Introduction

For CodeLab’s WQ25 cohort, our team had the incredible opportunity to work with Circle, a leading fintech company revolutionizing digital finance through its USDC stablecoin and blockchain-based payment infrastructure. Circle provides developers and businesses with powerful payment, treasury, and financial applications that leverage blockchain technology for streamlined transactions and financial operations.

Our mission was to create an integrated AI generation platform that seamlessly combines multiple AI services with Circle’s USDC payment infrastructure. This platform enables users to generate text, images, videos, and 3D models while using USDC for metered billing, creating a unified experience that showcases both the creative potential of AI and the practical applications of Circle’s blockchain-based micropayments.

The Team

[team photo]

Timeframe

January — April 2025

Tools

Design — Figma

Development — Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Supabase

Maintenance — GitHub, Vercel, Jira, Notion, Slack

The Project

We developed a comprehensive platform that serves as a creative hub for AI-generated content. The application features four main generation capabilities: Text-to-Text (chat), Text-to-Image, Image-to-Video, and Image-to-3D model conversion. Each of these services connects to specialized AI models including OpenAI, Meshy, Novita, and Replicate, with all usage tracked and billed through Circle’s USDC infrastructure.

The platform is organized into two main sections:

1. AI Generation Suite — Where users can create content through various AI services and view their generation history
2. Wallet Management — Where users can monitor their USDC balance, view transaction history, and manage billing

The AI dashboard serves as the central hub for creativity, offering a clean interface with sidebar navigation for different generation types, chronologically organized history of previous generations, and prompt suggestions to help users get started. Real-time USDC balance is prominently displayed to keep users informed of their available funds.

Our wallet management interface provides users with complete visibility into their USDC finances, featuring current balance display, add funds functionality with multiple payment options, detailed transaction history with filtering capabilities, and usage analytics showing spending patterns.

Design

For this project, our designers set out to create a UI and UX experience that reimagines metered billing with crypto. Our goal was to prove to the world that crypto is an easy, safe, and practical method of payment for services requiring metered billing, such as the AI services below.

To begin with, we created detailed user surveys and analyzed the results in order to clarify the requirements. We found that a large segment of consumers have not had experience with crypto for payments yet, and we set out to change this.

Throughout the project, we created mockups in low, mid, and high fidelity and continuously worked with both the client and our own developers to iterate on our designs. Our final, high-fidelity mockups were used by the development team to polish the user flow and UI of the end product to be both practical and aesthetically pleasing.

Development

Architecture Overview

Our application architecture was designed to handle the complex interactions between multiple AI services and Circle’s payment infrastructure while maintaining security and performance. The system consists of several interconnected components:

1. Next.js Frontend and Backend — A unified application using the App Router pattern for optimal performance and simplified deployment
2. Supabase Integration — Providing database, authentication, and storage solutions
3. AI Service Connectors — Communicating with various external AI providers to power the AI functionality
4. Circle API Integration — Secure handling of USDC transactions and wallet management

This architecture enables seamless communication between the user interface and various services while maintaining security and performance at scale.

Text Generation

The text generation feature provides users with conversational AI capabilities powered by large language models. We implemented a system that handles real-time streaming of responses, creating a more dynamic and engaging chat experience compared to waiting for complete responses.

Our implementation maintains conversation history to provide context for ongoing interactions, counts tokens for accurate and immediate usage billing, and includes comprehensive error handling for API limits and service disruptions.

Image Generation

For image generation, we integrated with Replicate as an AI image provider to offer users a range of style options and capabilities. The system takes text prompts and transforms them into visual creations, with controls for aspect ratio, quality, and other parameters.

We implemented secure image storage in Supabase and dynamic loading states to provide feedback during generation. The interface makes the complex process of AI image creation accessible to users without technical expertise.

Video Generation

Powered by Novita, the video generation feature transforms static images into dynamic video content, bringing still images to life with motion. This implementation presented unique challenges due to the larger file sizes and longer processing times involved.

We developed a system that handles file uploads efficiently, manages the extended processing time with status updates and notifications, securely stores and retrieves the resulting video assets, and optimizes compression for preview displays. Users can transform their images into videos with simple controls, despite the complex processing happening behind the scenes.

3D Model Generation

Our most technically complex feature converts 2D images into fully textured 3D models that users can interact with directly in the browser. This capability required integrating specialized 3D generation by Meshy with browser-based rendering technology.

The implementation includes in-browser 3D rendering using Three.js, model format conversion for compatibility, interactive controls for viewing and manipulating the generated models, and performance optimizations for smooth experiences across different devices. This feature demonstrates the potential of combining AI generation with interactive web technologies.

USDC Wallet Integration

Integrating Circle’s USDC payment infrastructure was central to our project, providing the foundation for our metered billing system. Each user interaction with an AI service triggers a micropayment, creating a direct connection between usage and cost.

Our wallet implementation includes several key components: secure wallet generation for new users during onboarding, real-time balance monitoring and updates to keep users informed, efficient transaction processing for handling deposits, withdrawals, and service payments, and transparent metered billing that charges based on actual AI service usage.

This integration required careful attention to security best practices, including secure API key handling, transaction verification to prevent unauthorized usage, and comprehensive error handling to address failed transactions gracefully.

Security, Style, and Architecture Choices

Beyond the core AI and payment functionality, we made several architectural choices to ensure a robust, maintainable application. We leveraged Next.js App Router for efficient routing and rendering and utilized Supabase for authentication, database, and storage needs.

For user authentication, we integrated Supabase Auth, providing JWT-based session management.

The component architecture follows a modular approach with reusable UI elements from shadcn/ui, consistent styling with Tailwind CSS, and appropriate separation of concerns between API routes and frontend components. This structure makes the codebase more maintainable and allows for efficient collaboration among team members.

Takeaways & Challenges

Integrating Multiple AI Services

One of our biggest challenges was creating a cohesive experience across different AI services with varying capabilities, response times, and API structures. Initially, we attempted to build separate interfaces for each service, but this led to inconsistent user experiences and code duplication.

We pivoted to a more modular approach, creating standardized components that could be configured for each service’s unique requirements. This improved code maintainability and provided users with a consistent experience regardless of which AI service they were using.

This challenge taught us the importance of abstraction layers when working with multiple external APIs and reinforced the value of component-based architecture in complex applications.

USDC Integration Complexity

Implementing secure, reliable cryptocurrency transactions presented unique challenges compared to traditional payment systems. Circle’s APIs required careful integration to ensure transactions were properly processed, recorded, and reflected in users’ balances.

We implemented comprehensive error handling and transaction verification steps to ensure users’ funds were always accurately tracked. This experience highlighted the importance of thorough testing for financial features, leading us to develop extensive test suites specifically for wallet functionality.

Closing Remarks

Working with Circle on this project provided our team with invaluable experience in both AI integration and blockchain-based payment systems. The combination of cutting-edge AI services with Circle’s stable, secure payment infrastructure demonstrates the potential for new business models in the digital creation space.

We’re proud to have delivered a platform that not only showcases the capabilities of multiple AI services but also provides a practical implementation of cryptocurrency micropayments. This project represents a significant step forward in making both AI generation and cryptocurrency payments more accessible to everyday users.

We extend our sincere gratitude to the Circle team for their guidance and support throughout this project, and we look forward to seeing how this platform evolves in the future.