URPC Playground

URPC Playground is a demonstration application showcasing URPC framework features with three main examples.

🚀 Quick Start

Install Dependencies

npm install
# or
pnpm install
# or
bun install

Environment Configuration

Create .env.local file (only required for Mastra Plugin):

OPENROUTER_API_KEY=your-openrouter-api-key-here

Start Development Server

npm run dev

Visit http://localhost:3000 to view the application.

📋 Examples

1. Next.js App Router Example

• Path: /uniweb3
• Function: Wallet operations using URPC + UniWeb3
• Features: Wallet connection, EVM/Solana support, balance queries

2. Todo App Example

• Path: /todo-app-demo
• Function: Todo application built with UniRender + URPC
• Features: Multiple layouts, editable tables, responsive design, real-time updates

3. Mastra Plugin Example

• Path: /mastra-plugin
• Function: Intelligent data operations assistant based on URPC + Mastra Plugin
• Features: AI-powered, natural language processing, direct operations, real-time feedback
• Note: Requires OpenRouter API Key configuration

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• UI: Tailwind CSS, Radix UI, Lucide React
• Data: URPC Core, URPC Adapters
• AI: Mastra Plugin, OpenRouter
• Web3: UniWeb3 (EVM + Solana)
• Components: UniKit (UniRender)

📁 Project Structure

src/
├── app/
│   ├── page.tsx                    # Main navigation page
│   ├── uniweb3/                    # Next.js application example using URPC and UniWeb3 for wallet operations
│   ├── todo-app-demo/              # Todo app example
│   ├── mastra-plugin/              # Mastra Plugin example
│   └── api/
│       └── [...urpc]/              # URPC API routes
├── components/
│   └── theme-toggle.tsx            # Theme toggle component
├── entities/
│   ├── user.ts                     # User entity
│   ├── post.ts                     # Post entity
│   └── todo.ts                     # Todo entity
└── lib/
    ├── urpc-api.ts                 # URPC API configuration
    └── urpc-client.ts              # URPC client configuration

🔧 Configuration

TypeScript Configuration

Decorator support is enabled:

{
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true
}

Main Dependencies

• @unilab/urpc: URPC core library
• @unilab/ukit: UniRender components
• @unilab/uniweb3: Web3 integration
• @unilab/mastra-plugin: Mastra Plugin integration
• @mastra/core: AI Agent framework

🚀 Deployment

# Build production version
npm run build

# Start production server
npm start

📝 Usage Guide

Next.js App Router Example

Visit /uniweb3 to view Ethereum and Solana wallet balances

Todo App Example

Visit /todo-app-demo to experience UniRender's multiple layouts and editing features

Mastra Plugin Example

Visit /mastra-plugin to perform data operations using natural language:

• "Find all users"
• "Create a new user named Jack"
• "Update user 1's name to John"
• "Delete user with ID 3"

📄 License

MIT License

---

Built with ❤️ by Uni-Labs