iblai-components（iblai 组件）

/iblai-components

Overview of all ibl.ai components and how to create a new app.

Creating a New App

Vanilla Next.js + ibl.ai Features

Start with a standard Next.js app and add features as needed:

npx create-next-app@latest my-app --yes
cd my-app
iblai add auth --platform your-tenant
iblai add chat
npm run dev

Full ibl.ai Agent App

Scaffold a complete app with auth, chat, and everything pre-configured:

iblai startapp agent --platform your-tenant
cd <app-name> && pnpm install
cp .env.example .env.local && pnpm dev

Non-Interactive (CI/CD)

iblai startapp agent --yes --platform acme --agent my-id --app-name my-app

AI-Enhanced Scaffolding

iblai startapp agent --platform acme --anthropic-key sk-ant-... \
  --prompt "kids learning assistant with bright colors"

Available Components

CLI-Generated (use the CLI)

AI-Built (you build these using the skill documentation)

These components are built by the AI assistant using SDK components and the detailed code provided in each skill. The MCP tools (get_component_info, get_hook_info) provide props references and usage examples.

Other CLI Commands

Component Priority

1. ibl.ai components first -- always use the native component when one exists
2. shadcn/ui for everything else -- forms, tables, modals, date pickers, etc.: npx shadcn@latest add button dialog table form
3. shadcnspace blocks -- pre-built page sections: npx shadcn@latest add @shadcn-space/hero-01

ibl.ai and shadcn components share the same Tailwind theme and are visually seamless.

Requirements

• Next.js App Router project (app/ directory)
• Node.js 18+
• iblai CLI available for auth and chat (iblai --version). See /iblai-auth prerequisites for installation.
• If you started with npx create-next-app@latest, run iblai add auth first -- other components depend on the auth providers
• If you used iblai startapp agent, auth is already set up
• Brand guidelines: BRAND.md