An application that doesn't have a fixed interface. It learns, adapts, and rebuilds itself based on user intent, history, and context.
ForceUI is a next-generation Generative UI framework that revolutionizes how users interact with applications. Instead of navigating through fixed menus and predetermined workflows, users simply describe what they need in natural language, and ForceUI automatically assembles the perfect interface.
ForceUI's adaptive dashboard with timeline, stats, and component orchestration
Sleek dark mode experience with full theme support
Real-time analytics and metrics visualization
Model Context Protocol integrations with GitHub, Calendar, and more
AI-generated UI components based on user intent
- Natural Language Processing: Understands user intent from conversational input
- Smart Component Selection: Automatically selects and renders the most relevant components
- Context-Aware: Considers user history, persona, and preferences
- Founder Mode: Focus on high-level metrics, timelines, and strategic planning
- Developer Mode: Code-centric views, technical dashboards, and debugging tools
- Analyst Mode: Data visualizations, reports, and deep analysis
- Recruiter Mode: Candidate tracking, pipeline management
- GitHub Integration: Real-time commit tracking, PR status, and issue management
- Calendar Integration: Meeting schedules, event coordination
- Analytics API: Live data streaming and metrics visualization
- Workflow Recording: Capture and replay user workflows for automation
- Transparent Reasoning: See exactly why the AI chose specific components
- Intent Analysis: Understand how your input was interpreted
- Confidence Scores: View the AI's certainty in its decisions
Every component is:
- Schema-Validated with Zod for type safety
- AI-Describable for intelligent selection
- Persona-Aware for contextual display
- Animated with Framer Motion for smooth transitions
┌─────────────────────────────────────────────────────────────┐
│ ForceUI │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Intent │ │ Component │ │ Explainability │ │
│ │ Classifier │→ │ Orchestr. │→ │ Engine │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ Memory │ │ Persona │ │ MCP Integrations │ │
│ │ Store │ │ Store │ │ (GitHub, Calendar) │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ Tambo AI SDK + Next.js │
└─────────────────────────────────────────────────────────────┘
forceui/
├── src/
│ ├── app/ # Next.js pages
│ │ └── forceui/ # Main ForceUI application
│ ├── components/
│ │ ├── generative/ # AI-rendered components
│ │ │ ├── Timeline.tsx
│ │ │ ├── StatsCard.tsx
│ │ │ ├── ChartView.tsx
│ │ │ ├── SummaryPanel.tsx
│ │ │ ├── ExplainabilityPanel.tsx
│ │ │ └── MCPStatusPanel.tsx # MCP integrations demo
│ │ ├── interactable/ # User-interactive components
│ │ │ ├── IntentChat.tsx
│ │ │ ├── KanbanBoard.tsx
│ │ │ ├── NotesPanel.tsx
│ │ │ ├── PersonaSwitcher.tsx
│ │ │ └── WorkflowRecorder.tsx # Workflow recording demo
│ │ └── layout/ # Layout components
│ ├── engine/ # Core intelligence layer
│ │ ├── intentClassifier.ts
│ │ ├── orchestrator.ts
│ │ ├── componentRegistry.ts
│ │ └── explainability.ts
│ ├── stores/ # Zustand state management
│ ├── config/ # Configuration files
│ └── hooks/ # Custom React hooks
└── screenshots/ # Demo screenshots
| Technology | Purpose |
|---|---|
| Next.js 15 | React framework with App Router |
| Tambo AI SDK | Generative UI capabilities |
| TypeScript | Type-safe development |
| Tailwind CSS | Utility-first styling |
| Framer Motion | Smooth animations |
| Recharts | Data visualization |
| Zustand | State management |
| Zod | Schema validation |
| MCP | Model Context Protocol integrations |
- Node.js 18+
- npm or yarn
# Navigate to the forceui directory
cd forceui
# Install dependencies
npm install
# Set up environment
cp example.env.local .env.local
# Add your Tambo API key to .env.local
# Run development server
npm run devOpen http://localhost:3000/forceui in your browser.
Try these prompts in the IntentChat:
| Prompt | Result |
|---|---|
| "Plan a product launch" | Timeline + KanbanBoard + StatsCard |
| "Show my integrations" | MCPStatusPanel with live status |
| "Record a workflow" | WorkflowRecorder component |
| "Analyze user metrics" | ChartView + StatsCard + SummaryPanel |
| "Switch to developer mode" | UI adapts for developer persona |
- Intent-to-UI Pipeline: Revolutionary approach to UI generation
- MCP Integration: Showcasing Model Context Protocol for external tool access
- Explainable AI: Full transparency in AI decision-making
- Persona-Aware: Dynamic adaptation based on user role
- Load the application → See the animated welcome screen
- Try "Show my integrations" → View the MCP Status Panel
- Click "Record a workflow" → Interact with the Workflow Recorder
- Use "Plan a product launch" → Watch components assemble
- Toggle "Show AI Reasoning" → See the explainability panel
Built for the Tambo Hackathon 2026 🏆
MIT License - See LICENSE for details.