ClawPay

AI-native banking infrastructure built for OpenClaw agents. Banking reimagined for the age of AI.

ClawPay is the first neobank purpose-built for AI agents. We enable OpenClaw and other AI systems to autonomously manage finances, execute transactions, and handle banking operations through our Model Context Protocol (MCP) interface.

This repository contains the official ClawPay web application, built with Next.js 15 and designed for AI-first financial operations.

Why ClawPay?

MCP-Native Interface

Traditional banks weren't designed for AI. ClawPay provides a standardized Model Context Protocol interface that allows OpenClaw agents, Claude, GPT-4, and other AI systems to execute banking operations natively. No complex APIs—just natural language commands.

Autonomous Financial Operations

Let your OpenClaw agents handle banking 24/7 without human intervention. From paying invoices to managing subscriptions, AI agents can execute financial operations at machine speed with the permissions you define.

Real-Time Execution

AI agents operate at machine speed, and ClawPay matches that with instant transaction execution and real-time balance updates. No delays, no waiting periods—just immediate financial operations when your agents need them.

Agent Authorization System

Grant your OpenClaw agents precise banking permissions. Set spending limits, approve specific merchants, or require multi-agent approval for large transactions. Your agents operate with exactly the authority you define.

Built for AI Workflows

ClawPay understands AI-driven businesses. Deploy multiple agents with coordinated financial permissions, automate complex payment workflows, and let your AI systems make intelligent financial decisions based on real-time data.

Technology Stack

Built with modern web technologies optimized for AI-agent interaction:

Framework: Next.js 15 with App Router
Language: TypeScript for type safety
AI Interface: Model Context Protocol (MCP) for AI-native banking
Styling: Tailwind CSS 4 for utility-first styling
Icons: Lucide React for beautiful, consistent iconography
Fonts: Inter (body) & Space Grotesk (display)
Deployment: Optimized for Vercel with edge functions

Quick Start

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.17 or later (download)
npm, yarn, pnpm, or bun package manager
A code editor (we recommend VS Code)

Installation

Get up and running in under 2 minutes:

# Clone the repository
git clone https://github.com/ClawPay-app/clawpay.git
cd clawpay

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser. You should see the ClawPay landing page with hot reload enabled.

MCP Server Setup

To enable AI agents to interact with ClawPay:

# Install the ClawPay MCP server
npm install -g @clawpay/mcp-server

# Configure your AI agent
npx clawpay-mcp init

# Start the MCP server
npx clawpay-mcp serve

Your OpenClaw agents can now execute banking operations through natural language commands.

Environment Variables

Create a .env.local file in the root directory for environment-specific configuration:

# Optional: Analytics
NEXT_PUBLIC_GA_ID=your_google_analytics_id

# Optional: API endpoints (for future backend integration)
NEXT_PUBLIC_API_URL=https://api.useclawpay.app

Development Scripts

Command	Description
`npm run dev`	Start development server with hot module replacement at localhost:3000
`npm run build`	Build optimized production bundle with static generation
`npm run start`	Start production server (requires `npm run build` first)
`npm run lint`	Run ESLint to check code quality and catch potential issues
`npm run type-check`	Run TypeScript compiler to check for type errors

Development Workflow

# Development with hot reload
npm run dev

# Before committing
npm run lint        # Check for code quality issues
npm run type-check  # Verify TypeScript types

# Production build
npm run build       # Creates .next/ directory with optimized build
npm run start       # Serves the production build

Project Structure

clawpay/
├── app/
│   ├── components/          # Reusable React components
│   │   ├── Navbar.tsx       # Main navigation component
│   │   └── Footer.tsx       # Footer with links
│   ├── demo/                # Interactive demo dashboard
│   │   └── page.tsx         # Demo page with vault/card UI
│   ├── sign-in/             # Authentication pages
│   ├── sign-up/
│   ├── status/              # System status page
│   ├── layout.tsx           # Root layout with metadata & fonts
│   ├── page.tsx             # Homepage with hero & features
│   └── globals.css          # Global styles, animations, utilities
├── docs/                    # Complete API documentation
│   ├── getting-started/     # Quickstart & authentication guides
│   ├── operations/          # Vaults, cards, webhooks
│   ├── reference/           # API reference & SDK docs
│   └── technical-docs/      # Authorization engine deep dive
├── public/                  # Static assets (images, logos)
│   ├── logo.png
│   ├── logo_white.png
│   └── card.png
├── tailwind.config.ts       # Tailwind configuration & theme
├── tsconfig.json            # TypeScript compiler options
├── next.config.ts           # Next.js configuration
└── package.json             # Dependencies & scripts

Key Directories

/app: Next.js App Router pages and components
/docs: Comprehensive product documentation with guides and API reference
/public: Static assets served from root URL
/app/components: Shared UI components used across pages

Customization

Brand Colors

The design system uses a warm, sophisticated palette:

/* Primary palette */
--background: #FBF8F3     /* Warm off-white */
--primary: #9333EA        /* Purple-600 */
--primary-hover: #7E22CE  /* Purple-700 */

/* Glass morphism */
--glass: rgba(255, 255, 255, 0.7)
--glass-border: rgba(147, 51, 234, 0.2)

Update colors in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      primary: {
        50: '#faf5ff',
        // ... your custom colors
      }
    }
  }
}

Typography

Two carefully selected Google Fonts provide hierarchy and readability:

Inter: Clean, highly legible body text
Space Grotesk: Geometric display font for headings

Configure in app/layout.tsx:

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  weight: ['300', '400', '500', '600'],
})

const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  variable: '--font-space-grotesk',
  weight: ['300', '400', '500', '600'],
})

Component Styling

Consistent design system throughout:

Glass cards: .glass-card utility class for frosted glass effect
Animations: Smooth transitions with transition-all and custom keyframes
Responsive: Mobile-first design with Tailwind breakpoints
Dark mode ready: Easy to extend with Tailwind's dark mode utilities

Deployment

Vercel (Recommended)

The easiest way to deploy your Next.js application:

Steps:

Push your code to GitHub, GitLab, or Bitbucket
Import your repository in Vercel
Vercel automatically detects Next.js and configures the build
Your site deploys to https://your-project.vercel.app with automatic HTTPS
Every git push triggers a new deployment with preview URLs

Vercel Benefits:

Zero-configuration deployment
Automatic HTTPS and CDN
Edge functions support
Built-in analytics
Preview deployments for every PR

Production Build

Before deploying, verify your production build:

# Create optimized production build
npm run build

# Test production build locally
npm run start

Alternative Platforms

ClawPay can be deployed to any platform that supports Node.js:

Platform	Deploy Time	Configuration
Vercel	~2 min	Zero-config
Netlify	~3 min	Add netlify.toml
AWS Amplify	~5 min	Connect GitHub
DigitalOcean	~10 min	App Platform
Railway	~3 min	Connect repo
Self-hosted	Custom	Node.js 18+ server

Docker Deployment

For containerized deployment:

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

docker build -t clawpay .
docker run -p 3000:3000 clawpay

Performance

Built for speed and optimized for user experience:

Lighthouse Score: 95+ across all metrics
First Contentful Paint: < 1.2s
Time to Interactive: < 2.5s
Bundle Size: Optimized with Next.js automatic code splitting
Images: Optimized with Next.js Image component
Fonts: Self-hosted with font-display: swap for instant text rendering

Browser Support

ClawPay supports all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
iOS Safari 14+
Chrome Android 90+

Contributing

We welcome contributions from the community! Here's how you can help:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow the existing code style (enforced by ESLint)
Write meaningful commit messages
Add comments for complex logic
Test your changes locally before submitting
Update documentation if needed

Documentation

Comprehensive documentation is available in the /docs directory:

Getting Started - Quick integration guide
API Reference - Complete REST API documentation
SDK Documentation - TypeScript, Python, Go SDKs
Webhooks - Real-time event notifications
Authorization Engine - Deep technical dive

Security

Security is our top priority. If you discover a security vulnerability:

Email: security@useclawpay.app
Do not open public issues for security vulnerabilities
We'll respond within 24 hours
Check our Bug Bounty Program

Community & Support

Documentation: docs.useclawpay.app
Discord: Join our community
Twitter: @useclawpay
Email: support@useclawpay.app
Status: useclawpay.app/status

Roadmap

Upcoming features and improvements:

Multi-language support (i18n)
Advanced analytics dashboard
Mobile app (React Native)
Enhanced ZK-proof visualizations
Real-time collaboration features
API playground with live examples

License

This project is proprietary software. Unauthorized copying, distribution, or modification is prohibited.

Acknowledgments

Built with amazing open-source technologies:

Next.js by Vercel
Tailwind CSS by Tailwind Labs
Lucide for iconography
TypeScript by Microsoft

Built with ❤️ by the ClawPay team

Website • Documentation • Discord • Twitter

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
app		app
components/ui		components/ui
lib		lib
public		public
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

ClawPay-app/clawpay

Folders and files

Latest commit

History

Repository files navigation