Note: This starter runs against the hosted iblai.app environment. If you'd like a license to the full platform codebase to run locally or self-host, reach out to our team at ibl.ai/contact.

Clone the starter into a temp directory and copy it into your project root before installing (running pnpm install inside the cloned subdirectory causes hardlink issues):

git clone -b spa https://github.com/iblai/vibe-starter.git vibe-starter-init
cp -a vibe-starter-init/. . && rm -rf vibe-starter-init
pnpm install

Fill in iblai.env with your platform credentials:

PLATFORM=<your-tenant-key>
TOKEN=<your-platform-api-key>

Re-run the auth generator so the tenant key is written into .env.local, then start the dev server:

iblai add auth
pnpm dev

Open http://localhost:3000. Unauthenticated users are redirected to https://login.iblai.app and returned with a session.

A pre-wired Next.js 16 + Tailwind v4 + shadcn/ui project with the @iblai/iblai-js SDK already integrated. Use it as the base for new ibl.ai single-page apps — auth, navbar, profile/account/notifications pages, and Redux/data-layer providers are already in place. Skip the manual /iblai-auth, /iblai-navbar, /iblai-profile, /iblai-account, and /iblai-notification skills.

Why use it:

• Start building in minutes, not days — auth, navbar, and the standard ibl.ai pages are already wired
• Backend included — connects to iblai.app for SSO auth, AI agent infrastructure, analytics, and tenant management
• Client-side auth via SSO — no API tokens to store, rotate, or leak
• Claude Code skills guide every step — adding features is a conversation, not a scavenger hunt through docs
• shadcn/ui fills in UI gaps — consistent design language without the overhead of a custom design system
• Ship everywhere — web (Vercel), desktop (macOS/Windows/Linux), and mobile (iOS/Android) via Tauri v2

This starter is auth-ready, so any ibl.ai feature skill works out of the box. Use them directly in Claude Code with / commands:

/iblai-chat            # AI chat widget
/iblai-analytics       # Analytics dashboard
/iblai-credit          # Credit balance widget (already wired in the navbar)
/iblai-invite          # User invitation dialogs
/iblai-workflow        # Workflow builder
/iblai-course-access   # edX course-content pages
/iblai-course-create   # Generate, edit, and publish edX courses
/iblai-onboard         # Onboarding questionnaire flow
/iblai-marketing-landing      # 12-section marketing landing page
/iblai-marketing-screenshot   # App store screenshots for web, iOS, Android
/iblai-component       # Browse all available components
/iblai-ops-build       # Build and run on desktop and mobile
/iblai-ops-deploy      # Deploy frontend to Vercel
/iblai-ops-test        # Test before showing work
/iblai-ops-upgrade     # Upgrade CLI, SDK, and skills to latest
/iblai-agent-search    # Agent search/browse page
/iblai-agent-setting   # Agent Settings tab
/iblai-agent-access    # Agent Access tab (RBAC)
/iblai-agent-api       # Agent API tab
/iblai-agent-dataset   # Agent Datasets tab
/iblai-agent-disclaimer # Agent Disclaimers tab
/iblai-agent-embed     # Agent Embed tab
/iblai-agent-history   # Agent History tab
/iblai-agent-llm       # Agent LLM tab
/iblai-agent-memory    # Agent Memory tab
/iblai-agent-prompt    # Agent Prompts tab
/iblai-agent-safety    # Agent Safety tab
/iblai-agent-tool      # Agent Tools tab

Or use the CLI directly:

iblai add chat           # AI chat widget
iblai add analytics      # Analytics dashboard
iblai add invite         # User invitation dialogs
iblai add workflow       # Workflow builder
iblai add builds         # Tauri v2 desktop/mobile shell

See CLAUDE.md for the full component priority guide and the complete skill list.

app/
  (app)/                          # Authenticated pages (wrapped with navbar)
    layout.tsx                    # Renders <NavBar> + <NavigationDrawer>
    page.tsx                      # Home
    profile/page.tsx              # SDK <Profile>
    account/page.tsx              # SDK <Account>
    notifications/[[...id]]/      # SDK <NotificationDisplay>
  sso-login-complete/             # SSO callback (outside route group)
  layout.tsx                      # Root layout — wraps with <IblaiProviders>
components/
  navbar/                         # nav-bar, navigation-drawer, logo, credit-balance-widget, user-profile-button
  ui/                             # shadcn/ui components
lib/iblai/                        # config, storage-service, auth-utils, tenant
providers/iblai-providers.tsx     # Redux + Auth + Tenant providers
store/iblai-store.ts              # RTK store
iblai.env                         # Platform credentials (DOMAIN, PLATFORM, TOKEN)

The starter ships with a .mcp.json and a curated CLAUDE.md so Claude Code (and any other agent that reads CLAUDE.md) gets deep knowledge of the ibl.ai platform from the first prompt.

The @iblai/mcp server gives your AI assistant access to:

get_component_info("ChatWidget")              # Props, usage, examples for any component
get_hook_info("useAdvancedChat")              # Hook parameters and return types
get_api_query_info("useGetUserMetadataQuery") # RTK Query endpoint details
get_provider_setup("auth")                    # Provider hierarchy and setup code
create_page_template("Dashboard", "mentor")   # Generate a page following ibl.ai patterns

iOS & Android SSO limitation: Mobile WebViews use a non-standard user-agent that SSO providers reject. Completing the OAuth flow requires a system browser popup (ASWebAuthenticationSession on iOS, Chrome Custom Tabs on Android). This is not yet implemented — mobile users must authenticate via another method for now.

• Primary: #0058cc
• Gradient: linear-gradient(135deg, #00b0ef, #0058cc)
• Style: shadcn/ui new-york, system sans-serif, Lucide icons

SDK and shadcn components share the same Tailwind theme and render in ibl.ai brand colors automatically — do not override them.

pnpm dev             # Dev server (localhost:3000)
pnpm build           # Production build
pnpm test            # Vitest
pnpm test:e2e        # Playwright E2E
iblai config show    # View configuration
iblai add <feature>  # Add a feature
iblai deploy vercel  # Deploy to Vercel (requires VERCEL_TOKEN in iblai.env)

iblai deploy vercel

Builds, deploys, disables auth protection, and updates devUrl in tauri.conf.json automatically.

docker build -t my-vibe-app .
docker run -p 3000:3000 my-vibe-app

iblai add builds              # Add Tauri support
iblai builds build            # Desktop build for current platform
iblai builds ios init         # iOS project setup
iblai builds ci-workflow --all  # GitHub Actions for all platforms

• Vibe — the full developer toolkit and skill source
• iblai-app-cli — the CLI that scaffolds Vibe apps
• @iblai/iblai-js — unified SDK for data, UI components, and auth utilities
• @iblai/iblai-api — auto-generated API types
• @iblai/mcp — MCP server for AI-assisted development
• skills.sh/iblai/vibe — install skills with npx skills add iblai/vibe

MIT — ibl.ai