.png)
4 months ago
6
AgenticGenUI is an open-source library for building AI-powered, generative user interfaces. It provides a comprehensive set of components tailored for AI agent applications, enabling developers to rapidly create interactive, production-ready UIs that seamlessly integrate with large language models or any react based apps.
- 40+ Specialized Components: Purpose-built UI components for AI agent interfaces
- CopilotKit Integration: Seamless compatibility with CopilotKit
- Scenario-Based Design: Tailored to real AI agent use cases
- Fully Responsive: Desktop, tablet, and mobile support
- Accessibility-First: Adheres to a11y best practices
- TypeScript Support: Strong typings for all components
- Customizable Theming: Easy branding and theming
- Demo Application: Explore all components live
- Installation
- Demo Setup
- Component Overview
- Usage Examples
- Integration Guide
- Contributing
- License
- Acknowledgements
Note: AgenticGenUI is not yet available via npm. Use Git to install directly.
# Clone the repository
git clone https://github.com/vivek100/AgenticGenUI.git
# Navigate into the project
cd AgenticGenUI
# Install dependencies
npm install
# Start development server
npm run dev
Explore the full functionality via the included demo app.
- Node.js 18.x+
- npm 9.x+
Create a .env.local file in the root:
XAI_API_KEY=your_xai_api_key_here
Note: You can run the demo app without api keys too, it has mock mode where it can use fuzzy match of input text message and render the components.
Get your API key from Grok
npm run dev
# Visit http://localhost:3000
AgenticGenUI ships 40+ ready-to-use components:
- MetricCard, Chart, DataTable, DataGrid, ExpandableRowTable
- UserForm, MultiStepForm, SearchWithFilters, DateTimeRangePicker
- MentionInput, ColorPickerPopover
- InfoBanner, ProgressBar, ToastStack, ConfirmationCard
- KanbanBoard, ChecklistWithProgress, ApprovalWorkflowCard, Timeline
- AvatarCard, TeamMemberList, OrgChartViewer, ThreadedComments
- ProductCatalogGrid, CartSummaryPanel, PaymentDetailsForm, OrderStatusTracker
- TabLayout, AccordionContent, MarkdownRenderer, CodeSnippetViewer, ImageGallery
- AIPromptBuilder, LocationMap, RoutePlannerMap, EnvironmentSwitcher
- LanguageSelector, ThemeToggle, ModalPrompt
import { MetricCard } from './agentic-ui/components';
function Dashboard() {
return (
<MetricCard
title="Active Users"
value={1254}
change={12.5}
changeType="increase"
description="Total active users in the last 30 days"
icon="users"
/>
);
}
import { CopilotKit } from '@copilotkit/react-core';
import { AgentRenderer } from './components/agent-renderer';
import { MetricCardGrid } from './agentic-ui/components';
function App() {
return (
<CopilotKit apiKey="your-api-key">
<AgentRenderer>
<MetricCardGrid
title="Business Overview"
metrics={[
{
title: "Revenue",
value: "$12,345",
change: 8.2,
changeType: "increase",
description: "Total revenue this month",
icon: "dollar-sign"
},
{
title: "Users",
value: "1,234",
change: 12.5,
changeType: "increase",
description: "Active users this month",
icon: "users"
}
]}
/>
</AgentRenderer>
</CopilotKit>
);
}
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
// app/layout.tsx
import { CopilotKit } from '@copilotkit/react-core';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<CopilotKit apiKey={process.env.COPILOT_API_KEY} chatApiEndpoint="/api/copilotkit">
{children}
</CopilotKit>
</body>
</html>
);
}
// app/api/copilotkit/route.ts
import { createAI } from '@copilotkit/runtime';
export async function POST(req: Request) {
const body = await req.json();
const { messages } = body;
const ai = createAI({ /* your AI config */ });
const response = await ai.chat(messages);
return new Response(JSON.stringify(response));
}
// components/agent-renderer.tsx
import { useChat } from '@copilotkit/react-core';
import { componentRegistry } from '../agentic-ui/registry';
export function AgentRenderer({ children }) {
const { messages, input, handleInputChange, handleSubmit } = useChat();
const renderAIComponents = () =>
messages.map((message, i) => {
if (message.role === 'assistant' && message.content) {
try {
const content = JSON.parse(message.content);
const Component = componentRegistry[content.type];
return Component ? <Component key={i} {...content.props} /> : null;
} catch {
return <div key={i}>{message.content}</div>;
}
}
return null;
});
return (
<div>
{children}
{renderAIComponents()}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} placeholder="Ask something..." />
<button type="submit">Send</button>
</form>
</div>
);
}
export function getSystemPrompt() {
return `
You are an AI that generates UI components from user requests.
Available components include:
- MetricCard
- Chart
- DataTable
...
Respond using JSON with:
- type: Component name
- props: Component props
Example:
{
"type": "MetricCard",
"props": {
"title": "Active Users",
"value": 1254,
"change": 12.5,
"changeType": "increase",
"description": "Total active users in the last 30 days",
"icon": "users"
}
}
`;
}
We welcome contributions!
-
Fork this repo
-
Create a feature branch
git checkout -b feature/your-feature-name -
Commit your changes
git commit -m "Add new feature" -
Push your branch
git push origin feature/your-feature-name -
Open a Pull Request
- Follow the existing code style
- Write tests for new components
- Update documentation
- Ensure tests pass
AgenticGenUI is licensed under the MIT License. See LICENSE for full details.
- CopilotKit – AI integration
- shadcn/ui – Component library
- Tailwind CSS – Styling framework
- Next.js – Fullstack framework
- And all the future contributors ❤️
Built with ❤️ by Vivek
