Unchained Commerce Admin UI Template



The open-source admin dashboard for Unchained Commerce ā manage your headless e-commerce with AI superpowers
---
| | | |
|:---:|:---:|:---:|
| !Products | !Dashboard | !Product |
---
| Feature | Description |
|---------|-------------|
| š¤ AI Copilot | Built-in AI assistant with Model Context Protocol (MCP) for intelligent automation |
| š¦ Product Management | Simple, Bundle, Configurable, Subscription Plans & NFT-tokenized products |
| š Order & Fulfillment | Complete order lifecycle with configurable workflows |
| š¼ B2B Quotations | Professional quotation management with approval workflows |
| š Inventory Control | Multi-warehouse tracking with low-stock alerts |
| š³ Payment & Shipping | Integrate any payment gateway or delivery provider |
| š Multi-language & Currency | Full i18n support with country-specific locales |
| š Role-Based Access | Granular permissions with build-time security |
| šØ Customizable Branding | White-label ready with custom logos |
| š± Responsive Design | Works on desktop, tablet, and mobile |
---
| | | | | |
|:---:|:---:|:---:|:---:|:---:|
| Next.js 15 | React 19 | Apollo GraphQL | Tailwind CSS 4 | TypeScript |
Plus: Formik ⢠React Intl ⢠Headless UI ⢠Recharts ⢠Cypress ⢠AI SDK
---
- Node.js 22+
- Unchained Engine running on localhost:4010
``bashClone the repository
git clone git@github.com:unchainedshop/unchained.git
cd admin-ui
Open http://localhost:3000 in your browser.
---
āļø Configuration
$3
| Variable | Default | Description |
|----------|---------|-------------|
|
NEXT_PUBLIC_GRAPHQL_ENDPOINT | http://localhost:4010/graphql | Unchained Engine GraphQL endpoint |
| NEXT_PUBLIC_LOGO | ā | URL to your custom logo |Create a
.env.local file for local development:`bash
NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://your-engine.example.com/graphql
NEXT_PUBLIC_LOGO=https://your-cdn.com/logo.svg
`---
š³ Deployment
$3
`bash
npm run build
Output in ./out/ - deploy to any CDN (Vercel, Netlify, S3, etc.)
`
$3
`typescript
// Express
import { expressRouter } from '@unchainedshop/admin-ui/express';
app.use('/admin', expressRouter);// Fastify
import { fastifyRouter } from '@unchainedshop/admin-ui/fastify';
fastify.register(fastifyRouter, { prefix: '/admin' });
`---
š Development
| Command | Description |
|---------|-------------|
|
npm run dev | Start dev server with debugging |
| npm run build | Production build |
| npm run lint | Run ESLint |
| npm run format | Format with Prettier |
| npm run codegen | Generate GraphQL types |
| npm run test:e2e | Run Cypress E2E tests |
| npm run test:component | Run Cypress component tests |
| npm run extract-translation | Extract i18n strings |
| npm run compile-translation | Compile translations |---
šļø Architecture
Modular architecture with 27+ domain modules:
`
src/modules/
āāā product/ # Catalog & variants
āāā order/ # Order management
āāā quotation/ # B2B quotations
āāā copilot/ # AI assistant
āāā token/ # NFT tokenization
āāā enrollment/ # Subscriptions
āāā assortment/ # Categories
āāā user/ # Customer management
āāā payment-providers/ # Payment gateways
āāā delivery-provider/ # Shipping
āāā country/ # Multi-country
āāā currency/ # Multi-currency
āāā ... # And more
`Each module follows the pattern:
-
components/ ā React components
- hooks/ ā Data fetching hooks (use{Action}{Entity})
- fragments/ ā GraphQL fragments
- utils/` ā Domain utilities---
Documentation ⢠Website