MCP Project Orchestrator

{ "id": "unknown-id", "name": "mcp-code-generator", "description": "An advanced code generation prompt that leverages multiple MCP resources to create contextually-aware, high-quality code with minimal hallucination.", "content": " \\\"mcp-code-generator\\\",\\n \\\"version\\\": \\\"1.0.0\\\",\\n \\\"description\\\": \\\"An advanced code generation prompt that leverages multiple MCP resources to create contextually-aware, high-quality code with minimal hallucination.\\\",\\n \\\"prompt_text\\\": \\\"# MCP-Powered Code Generator\\\\n\\\\nYou are an expert coding assistant with access to multiple MCP resources. Your task is to generate high-quality, contextually-appropriate code based on the user's requirements while leveraging the following MCP resources to reduce hallucination and improve accuracy:\\\\n\\\\n- **Filesystem** (@file:// URIs): Access to project files and directory structure\\\\n- **GitHub** (@github:// URIs): Access to repositories, code examples, and documentation\\\\n- **Sequential Thinking** (@thinking:// URIs): Step-by-step reasoning for complex algorithms\\\\n- **Memory** (@memory:// URIs): Previous code snippets and user preferences\\\\n\\\\n## Code Generation Process\\\\n\\\\n1. **Analyze Requirements**\\\\n - Break down the user's request into specific coding tasks\\\\n - Identify key functionalities, interfaces, and constraints\\\\n - Determine appropriate language, framework, or library to use\\\\n\\\\n2. **Resource Collection**\\\\n - Check current project structure (if available): `@file:///project`\\\\n - Find related examples on GitHub: `@github://relevant-repos`\\\\n - Retrieve user preferences if available: `@memory://coding-preferences`\\\\n\\\\n3. **Design Phase**\\\\n - Create a high-level design outline\\\\n - Determine classes, functions, or components needed\\\\n - Establish interfaces and relationships\\\\n\\\\n4. **Implementation Phase**\\\\n - Write clean, well-documented code that follows best practices\\\\n - Include proper error handling and edge cases\\\\n - Ensure compatibility with existing codebase (if applicable)\\\\n - Add appropriate comments and documentation\\\\n\\\\n5. **Testing Considerations**\\\\n - Include unit test examples or strategies when appropriate\\\\n - Consider edge cases and potential failures\\\\n - Provide sample usage examples\\\\n\\\\n## Code Quality Guidelines\\\\n\\\\n- **Readability**: Write clear, self-explanatory code with consistent formatting\\\\n- **Maintainability**: Use descriptive variable names and follow language conventions\\\\n- **Performance**: Consider algorithmic efficiency and resource usage\\\\n- **Security**: Follow security best practices and avoid common vulnerabilities\\\\n- **Reusability**: Create modular, reusable components when appropriate\\\\n\\\\n## Output Format\\\\n\\\\nYour response should include:\\\\n\\\\n1. A brief explanation of the approach taken\\\\n2. The generated code in properly formatted code blocks\\\\n3. Installation instructions or dependencies (if applicable)\\\\n4. Usage examples\\\\n5. References to any MCP resources used\\\\n\\\\n## Contextual Adaptation\\\\n\\\\nTailor your code generation based on:\\\\n\\\\n- The programming language specified or inferred from context\\\\n- The user's preferred coding style (if known)\\\\n- The complexity level appropriate for the task\\\\n- The target environment (web, mobile, desktop, server, etc.)\\\\n\\\\n{{code_requirements}}\\\\n\\\\n{{additional_context}}\\\",\\n \\\"variables\\\": [\\n \\\"code_requirements\\\",\\n \\\"additional_context\\\"\\n ],\\n \\\"tags\\\": [\\n \\\"code-generation\\\",\\n \\\"multi-resource\\\",\\n \\\"mcp-integration\\\",\\n \\\"development\\\",\\n \\\"programming\\\"\\n ],\\n \\\"examples\\\": [\\n {\\n \\\"name\\\": \\\"React Component Generator\\\",\\n \\\"variables\\\": {\\n \\\"code_requirements\\\": \\\"Create a React component for a customizable data table with sorting, filtering, and pagination capabilities. The component should be reusable across our application.\\\",\\n \\\"additional_context\\\": \\\"Our project uses TypeScript, React 18, and follows a functional component approach with hooks. We prefer using styled-components for styling. The existing component structure can be found at @file:///project/src/components/.\\\"\\n },\\n \\\"expected_response\\\": \\\"# Customizable Data Table Component\\\\n\\\\nI'll create a reusable React component for a data table with sorting, filtering, and pagination capabilities, following your project's TypeScript and React 18 standards with styled-components for styling.\\\\n\\\\n## Approach\\\\n\\\\nAfter examining your project structure at `@file:///project/src/components/`, I notice you're using a functional component pattern with hooks. I'll create:\\\\n\\\\n1. A main `DataTable` component that handles the core functionality\\\\n2. Several sub-components for table elements (header, row, cell, pagination)\\\\n3. Custom hooks for sorting, filtering, and pagination logic\\\\n4. TypeScript interfaces for strong typing\\\\n\\\\n## Component Structure\\\\n\\\\n```typescript\\\\n// DataTable.tsx\\\\nimport React, { useState, useMemo, useCallback } from 'react';\\\\nimport styled from 'styled-components';\\\\nimport { TableHeader } from './TableHeader';\\\\nimport { TableRow } from './TableRow';\\\\nimport { Pagination } from './Pagination';\\\\nimport { useSort } from '../hooks/useSort';\\\\nimport { useFilter } from '../hooks/useFilter';\\\\nimport { usePagination } from '../hooks/usePagination';\\\\n\\\\n// TypeScript interfaces\\\\nexport interface Column<T> {\\\\n key: string;\\\\n header: string;\\\\n renderCell?: (item: T) => React.ReactNode;\\\\n sortable?: boolean;\\\\n filterable?: boolean;\\\\n}\\\\n\\\\nexport interface DataTableProps<T> {\\\\n data: T[];\\\\n columns: Column<T>[];\\\\n initialSortKey?: string;\\\\n initialSortDirection?: 'asc' | 'desc';\\\\n rowsPerPageOptions?: number[];\\\\n initialRowsPerPage?: number;\\\\n onRowClick?: (item: T) => void;\\\\n className?: string;\\\\n}\\\\n\\\\n// Styled components\\\\nconst TableContainer = styled.div`\\\\n width: 100%;\\\\n overflow-x: auto;\\\\n border-radius: 4px;\\\\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\\\\n`;\\\\n\\\\nconst Table = styled.table`\\\\n width: 100%;\\\\n border-collapse: collapse;\\\\n font-size: 14px;\\\\n`;\\\\n\\\\nconst TableBody = styled.tbody`\\\\n & tr:nth-child(odd) {\\\\n background-color: #f9f9f9;\\\\n }\\\\n \\\\n & tr:hover {\\\\n background-color: #f1f1f1;\\\\n }\\\\n`;\\\\n\\\\nconst FilterContainer = styled.div`\\\\n margin-bottom: 16px;\\\\n display: flex;\\\\n justify-content: flex-end;\\\\n`;\\\\n\\\\nconst FilterInput = styled.input`\\\\n padding: 8px 12px;\\\\n border: 1px solid #ddd;\\\\n border-radius: 4px;\\\\n font-size: 14px;\\\\n width: 250px;\\\\n`;\\\\n\\\\n// Main component\\\\nexport function DataTable<T extends Record<string, any>>({ \\\\n data, \\\\n columns, \\\\n initialSortKey,\\\\n initialSortDirection = 'asc',\\\\n rowsPerPageOptions = [10, 25, 50],\\\\n initialRowsPerPage = 10,\\\\n onRowClick,\\\\n className\\\\n}: DataTableProps<T>) {\\\\n // Global filter state\\\\n const [filterValue, setFilterValue] = useState('');\\\\n \\\\n // Hook usage\\\\n const { sortedData, sortKey, sortDirection, handleSort } = useSort(data, initialSortKey, initialSortDirection);\\\\n const { filteredData } = useFilter(sortedData, filterValue, columns);\\\\n const { \\\\n currentPageData, \\\\n currentPage, \\\\n totalPages, \\\\n rowsPerPage,\\\\n setCurrentPage, \\\\n setRowsPerPage \\\\n } = usePagination(filteredData, initialRowsPerPage);\\\\n\\\\n // Filter change handler\\\\n const handleFilterChange = useCallback(\\\\n (e: React.ChangeEvent<HTMLInputElement>) => {\\\\n setFilterValue(e.target.value);\\\\n setCurrentPage(1); // Reset to first page when filtering\\\\n }, \\\\n [setCurrentPage]\\\\n );\\\\n\\\\n // Memoize filterable columns\\\\n const filterableColumns = useMemo(\\\\n () => columns.filter(column => column.filterable),\\\\n [columns]\\\\n );\\\\n\\\\n return (\\\\n <div className={className}>\\\\n {filterableColumns.length > 0 && (\\\\n <FilterContainer>\\\\n <FilterInput \\\\\\n type=\\\\\\\"text\\\\\\\" \\\\\\n placeholder=\\\\\\\"Filter table...\\\\\\\"\\\\\\n value={filterValue}\\\\\\n onChange={handleFilterChange}\\\\\\n />\\\\\\n </FilterContainer>\\\\\\n )}\\\\\\n \\\\\\n <TableContainer>\\\\\\n <Table>\\\\\\n <TableHeader \\\\\\n columns={columns} \\\\\\n sortKey={sortKey} \\\\\\n sortDirection={sortDirection} \\\\\\n onSort={handleSort} \\\\\\n />\\\\\\n <TableBody>\\\\\\n {currentPageData.map((item, index) => (\\\\\\n <TableRow \\\\\\n key={index} \\\\\\n item={item} \\\\\\n columns={columns} \\\\\\n onClick={onRowClick ? () => onRowClick(item) : undefined} \\\\\\n />\\\\\\n ))}\\\\\\n {currentPageData.length === 0 && (\\\\\\n <tr>\\\\\\n <td colSpan={columns.length} style={{ textAlign: 'center', padding: '16px' }}>\\\\\\n No records found\\\\\\n </td>\\\\\\n </tr>\\\\\\n )}\\\\\\n </TableBody>\\\\\\n </Table>\\\\\\n </TableContainer>\\\\\\n \\\\\\n <Pagination \\\\\\n currentPage={currentPage}\\\\\\n totalPages={totalPages}\\\\\\n rowsPerPage={rowsPerPage}\\\\\\n rowsPerPageOptions={rowsPerPageOptions}\\\\\\n onPageChange={setCurrentPage}\\\\\\n onRowsPerPageChange={setRowsPerPage}\\\\\\n totalItems={filteredData.length}\\\\\\n />\\\\\\n </div>\\\\\\n );\\\\\\n}\\\\n```\\\\n\\\\n## Custom Hooks Implementation\\\\n\\\\n```typescript\\\\n// hooks/useSort.ts\\\\nimport { useState, useMemo } from 'react';\\\\n\\\\nexport function useSort<T extends Record<string, any>>(\\\\n data: T[], \\\\\\n initialSortKey?: string, \\\\\\n initialSortDirection: 'asc' | 'desc' = 'asc'\\\\n) {\\\\n const [sortKey, setSortKey] = useState<string | undefined>(initialSortKey);\\\\n const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>(initialSortDirection);\\\\n\\\\n const handleSort = (key: string) => {\\\\n if (sortKey === key) {\\\\n // Toggle direction if already sorting by this key\\\\n setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');\\\\n } else {\\\\n // New sort key, set to ascending by default\\\\n setSortKey(key);\\\\n setSortDirection('asc');\\\\n }\\\\n };\\\\n\\\\n const sortedData = useMemo(() => {\\\\n if (!sortKey) return [...data];\\\\n\\\\n return [...data].sort((a, b) => {\\\\n const aValue = a[sortKey];\\\\n const bValue = b[sortKey];\\\\n\\\\n // Handle different data types\\\\n if (typeof aValue === 'string' && typeof bValue === 'string') {\\\\n return sortDirection === 'asc' \\\\\\n ? aValue.localeCompare(bValue) \\\\\\n : bValue.localeCompare(aValue);\\\\n }\\\\n\\\\n if (aValue === bValue) return 0;\\\\n \\\\n if (sortDirection === 'asc') {\\\\n return aValue > bValue ? 1 : -1;\\\\n } else {\\\\n return aValue < bValue ? 1 : -1;\\\\n }\\\\n });\\\\n }, [data, sortKey, sortDirection]);\\\\n\\\\n return { sortedData, sortKey, sortDirection, handleSort };\\\\n}\\\\n```\\\\n\\\\n```typescript\\\\n// hooks/useFilter.ts\\\\nimport { useMemo } from 'react';\\\\nimport { Column } from '../components/DataTable';\\\\n\\\\nexport function useFilter<T extends Record<string, any>>(\\\\n data: T[], \\\\\\n filterValue: string,\\\\n columns: Column<T>[]\\\\n) {\\\\n const filteredData = useMemo(() => {\\\\n if (!filterValue) return data;\\\\n \\\\n const lowercasedFilter = filterValue.toLowerCase();\\\\n \\\\n return data.filter(item => {\\\\n return columns.some(column => {\\\\n const value = item[column.key];\\\\n if (value == null) return false;\\\\n \\\\n return String(value).toLowerCase().includes(lowercasedFilter);\\\\n });\\\\n });\\\\n }, [data, filterValue, columns]);\\\\n\\\\n return { filteredData };\\\\n}\\\\n```\\\\n\\\\n```typescript\\\\n// hooks/usePagination.ts\\\\nimport { useState, useMemo, useEffect } from 'react';\\\\n\\\\nexport function usePagination<T>(\\\\n data: T[], \\\\\\n initialRowsPerPage: number\\\\n) {\\\\n const [currentPage, setCurrentPage] = useState(1);\\\\n const [rowsPerPage, setRowsPerPage] = useState(initialRowsPerPage);\\\\n\\\\n // Reset to first page when data changes\\\\n useEffect(() => {\\\\n setCurrentPage(1);\\\\n }, [data.length]);\\\\n\\\\n const totalPages = useMemo(() => \\\\\\n Math.max(1, Math.ceil(data.length / rowsPerPage)),\\\\n [data.length, rowsPerPage]\\\\n );\\\\n\\\\n // Keep current page in bounds\\\\n useEffect(() => {\\\\n if (currentPage > totalPages) {\\\\n setCurrentPage(totalPages);\\\\n }\\\\n }, [currentPage, totalPages]);\\\\n\\\\n const currentPageData = useMemo(() => {\\\\n const startIndex = (currentPage - 1) * rowsPerPage;\\\\n return data.slice(startIndex, startIndex + rowsPerPage);\\\\n }, [data, currentPage, rowsPerPage]);\\\\n\\\\n return { \\\\\\n currentPageData, \\\\\\n currentPage, \\\\\\n totalPages, \\\\\\n rowsPerPage,\\\\n setCurrentPage, \\\\\\n setRowsPerPage \\\\n };\\\\n}\\\\n```\\\\n\\\\n## Supporting Components\\\\n\\\\n```typescript\\\\n// TableHeader.tsx\\\\nimport React from 'react';\\\\nimport styled from 'styled-components';\\\\nimport { Column } from './DataTable';\\\\n\\\\nconst HeaderRow = styled.tr`\\\\n background-color: #f5f5f5;\\\\n border-bottom: 2px solid #ddd;\\\\n`;\\\\n\\\\nconst HeaderCell = styled.th<{ sortable: boolean }>`\\\\n padding: 12px 16px;\\\\n text-align: left;\\\\n font-weight: 600;\\\\n cursor: ${props => props.sortable ? 'pointer' : 'default'};\\\\n user-select: none;\\\\n position: relative;\\\\n`;\\\\n\\\\nconst SortIcon = styled.span<{ direction: 'asc' | 'desc' }>`\\\\n margin-left: 8px;\\\\n &:after {\\\\n content: '${props => props.direction === 'asc' ? '↑' : '↓'}';\\\\n font-size: 14px;\\\\n }\\\\n`;\\\\n\\\\ninterface TableHeaderProps<T> {\\\\n columns: Column<T>[];\\\\n sortKey?: string;\\\\n sortDirection: 'asc' | 'desc';\\\\n onSort: (key: string) => void;\\\\n}\\\\n\\\\nexport function TableHeader<T>({ \\\\\\n columns, \\\\\\n sortKey, \\\\\\n sortDirection, \\\\\\n onSort \\\\n}: TableHeaderProps<T>) {\\\\n return (\\\\n <thead>\\\\n <HeaderRow>\\\\n {columns.map(column => (\\\\n <HeaderCell \\\\\\n key={column.key} \\\\\\n sortable={!!column.sortable}\\\\\\n onClick={column.sortable ? () => onSort(column.key) : undefined}\\\\\\n >\\\\\\n {column.header}\\\\\\n {sortKey === column.key && (\\\\n <SortIcon direction={sortDirection} />\\\\n )}\\\\\\n </HeaderCell>\\\\n ))}\\\\\\n </HeaderRow>\\\\n </thead>\\\\n );\\\\n}\\\\n```\\\\n\\\\n```typescript\\\\n// TableRow.tsx\\\\nimport React from 'react';\\\\nimport styled from 'styled-components';\\\\nimport { Column } from './DataTable';\\\\n\\\\nconst Row = styled.tr<{ clickable: boolean }>`\\\\n cursor: ${props => props.clickable ? 'pointer' : 'default'};\\\\n`;\\\\n\\\\nconst Cell = styled.td`\\\\n padding: 12px 16px;\\\\n border-bottom: 1px solid #eee;\\\\n vertical-align: top;\\\\n`;\\\\n\\\\ninterface TableRowProps<T> {\\\\n item: T;\\\\n columns: Column<T>[];\\\\n onClick?: () => void;\\\\n}\\\\n\\\\nexport function TableRow<T>({ item, columns, onClick }: TableRowProps<T>) {\\\\n return (\\\\n <Row clickable={!!onClick} onClick={onClick}>\\\\\\n {columns.map(column => (\\\\n <Cell key={column.key}>\\\\\\n {column.renderCell ? column.renderCell(item) : String(item[column.key] ?? '')}\\\\\\n </Cell>\\\\n ))}\\\\\\n </Row>\\\\n );\\\\n}\\\\n```\\\\n\\\\n```typescript\\\\n// Pagination.tsx\\\\nimport React from 'react';\\\\nimport styled from 'styled-components';\\\\n\\\\nconst PaginationContainer = styled.div`\\\\n display: flex;\\\\n justify-content: space-between;\\\\n align-items: center;\\\\n margin-top: 16px;\\\\n font-size: 14px;\\\\n`;\\\\n\\\\nconst PageInfo = styled.div`\\\\n color: #666;\\\\n`;\\\\n\\\\nconst PageControls = styled.div`\\\\n display: flex;\\\\n align-items: center;\\\\n`;\\\\n\\\\nconst PageButton = styled.button<{ active?: boolean }>`\\\\n padding: 6px 12px;\\\\n margin: 0 4px;\\\\n background-color: ${props => props.active ? '#007bff' : 'white'};\\\\n color: ${props => props.active ? 'white' : '#333'};\\\\n border: 1px solid #ddd;\\\\n border-radius: 4px;\\\\n cursor: pointer;\\\\n \\\\n &:disabled {\\\\n opacity: 0.5;\\\\n cursor: not-allowed;\\\\n }\\\\n \\\\n &:hover:not(:disabled) {\\\\n background-color: ${props => props.active ? '#007bff' : '#f1f1f1'};\\\\n }\\\\n`;\\\\n\\\\nconst RowsPerPageSelect = styled.select`\\\\n padding: 6px 8px;\\\\n border: 1px solid #ddd;\\\\n border-radius: 4px;\\\\n margin-left: 8px;\\\\n`;\\\\n\\\\ninterface PaginationProps {\\\\n currentPage: number;\\\\n totalPages: number;\\\\n rowsPerPage: number;\\\\n rowsPerPageOptions: number[];\\\\n totalItems: number;\\\\n onPageChange: (page: number) => void;\\\\n onRowsPerPageChange: (rowsPerPage: number) => void;\\\\n}\\\\n\\\\nexport function Pagination({ \\\\\\n currentPage, \\\\\\n totalPages, \\\\\\n rowsPerPage, \\\\\\n rowsPerPageOptions, \\\\\\n totalItems,\\\\n onPageChange, \\\\\\n onRowsPerPageChange \\\\n}: PaginationProps) {\\\\n // Calculate start and end item numbers\\\\n const startItem = Math.min(totalItems, (currentPage - 1) * rowsPerPage + 1);\\\\n const endItem = Math.min(totalItems, startItem + rowsPerPage - 1);\\\\n \\\\n // Generate page buttons\\\\n const getPageButtons = () => {\\\\n const buttons = [];\\\\n \\\\n // Always show first page\\\\n buttons.push(\\\\n <PageButton \\\\\\n key=\\\\\\\"first\\\\\\\" \\\\\\n active={currentPage === 1}\\\\\\n onClick={() => onPageChange(1)}\\\\\\n disabled={currentPage === 1}\\\\\\n >\\\\\\n 1\\\\\\n </PageButton>\\\\n );\\\\n \\\\n // Show ellipsis if needed\\\\n if (currentPage > 3) {\\\\n buttons.push(<span key=\\\\\\\"ellipsis1\\\\\\\">...</span>);\\\\n }\\\\n \\\\n // Show pages around current page\\\\n for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {\\\\n buttons.push(\\\\n <PageButton \\\\\\n key={i} \\\\\\n active={currentPage === i}\\\\\\n onClick={() => onPageChange(i)}\\\\\\n >\\\\\\n {i}\\\\\\n </PageButton>\\\\n );\\\\n }\\\\n \\\\n // Show ellipsis if needed\\\\n if (currentPage < totalPages - 2) {\\\\n buttons.push(<span key=\\\\\\\"ellipsis2\\\\\\\">...</span>);\\\\n }\\\\n \\\\n // Always show last page if there's more than one page\\\\n if (totalPages > 1) {\\\\n buttons.push(\\\\n <PageButton \\\\\\n key=\\\\\\\"last\\\\\\\" \\\\\\n active={currentPage === totalPages}\\\\\\n onClick={() => onPageChange(totalPages)}\\\\\\n disabled={currentPage === totalPages}\\\\\\n >\\\\\\n {totalPages}\\\\\\n </PageButton>\\\\n );\\\\n }\\\\n \\\\n return buttons;\\\\n };\\\\n\\\\n return (\\\\n <PaginationContainer>\\\\n <PageInfo>\\\\n Showing {totalItems ? `${startItem}-${endItem} of ${totalItems}` : '0'} results\\\\n </PageInfo>\\\\n \\\\n <PageControls>\\\\n <PageButton \\\\\\n onClick={() => onPageChange(currentPage - 1)}\\\\\\n disabled={currentPage === 1}\\\\\\n >\\\\\\n Previous\\\\\\n </PageButton>\\\\n \\\\\\n {getPageButtons()}\\\\\\n \\\\\\n <PageButton \\\\\\n onClick={() => onPageChange(currentPage + 1)}\\\\\\n disabled={currentPage === totalPages}\\\\\\n >\\\\\\n Next\\\\\\n </PageButton>\\\\n \\\\\\n <span style={{ marginLeft: '16px' }}>Rows per page:</span>\\\\\\n <RowsPerPageSelect \\\\\\n value={rowsPerPage}\\\\\\n onChange={(e) => onRowsPerPageChange(Number(e.target.value))}\\\\\\n >\\\\\\n {rowsPerPageOptions.map(option => (\\\\n <option key={option} value={option}>{option}</option>\\\\n ))}\\\\\\n </RowsPerPageSelect>\\\\\\n </PageControls>\\\\\\n </PaginationContainer>\\\\n );\\\\n}\\\\n```\\\\n\\\\n## Usage Example\\\\n\\\\n```tsx\\\\nimport React from 'react';\\\\nimport { DataTable } from './components/DataTable';\\\\n\\\\ninterface User {\\\\n id: number;\\\\n name: string;\\\\n email: string;\\\\n role: string;\\\\n status: 'active' | 'inactive';\\\\n lastLogin: string;\\\\n}\\\\n\\\\nconst users: User[] = [\\\\n { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', lastLogin: '2023-05-15T10:30:00Z' },\\\\n { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'active', lastLogin: '2023-05-14T09:15:00Z' },\\\\n // Add more users as needed\\\\n];\\\\n\\\\nfunction UserTable() {\\\\n const columns = [\\\\n { key: 'id', header: 'ID', sortable: true },\\\\n { key: 'name', header: 'Name', sortable: true, filterable: true },\\\\n { key: 'email', header: 'Email', filterable: true },\\\\n { key: 'role', header: 'Role', sortable: true, filterable: true },\\\\n { \\\\\\n key: 'status', \\\\\\n header: 'Status', \\\\\\n sortable: true,\\\\\\n renderCell: (user: User) => (\\\\n <span style={{ \\\\\\n color: user.status === 'active' ? 'green' : 'red',\\\\\\n fontWeight: 'bold'\\\\\\n }}>\\\\\\n {user.status}\\\\\\n </span>\\\\n )\\\\n },\\\\n { \\\\\\n key: 'lastLogin', \\\\\\n header: 'Last Login', \\\\\\n sortable: true,\\\\\\n renderCell: (user: User) => new Date(user.lastLogin).toLocaleString()\\\\n },\\\\n ];\\\\n\\\\n const handleRowClick = (user: User) => {\\\\n console.log('User clicked:', user);\\\\n // Navigate to user detail page or show modal\\\\n };\\\\n\\\\n return (\\\\n <div>\\\\n <h1>User Management</h1>\\\\n <DataTable \\\\\\n data={users}\\\\\\n columns={columns}\\\\\\n initialSortKey=\\\\\\\"id\\\\\\\"\\\\\\n initialRowsPerPage={10}\\\\\\n rowsPerPageOptions={[5, 10, 25, 50]}\\\\\\n onRowClick={handleRowClick}\\\\\\n />\\\\n </div>\\\\n );\\\\n}\\\\n\\\\nexport default UserTable;\\\\n```\\\\n\\\\n## Installation Instructions\\\\n\\\\nTo use this component, you'll need to have these dependencies installed:\\\\n\\\\n```bash\\\\nnpm install styled-components @types/styled-components\\\\n```\\\\n\\\\nor\\\\n\\\\n```bash\\\\nyarn add styled-components @types/styled-components\\\\n```\\\\n\\\\n## MCP Resources Used\\\\n\\\\n- `@file:///project/src/components/` - Examined your existing component structure to match the styling approach and component patterns\\\\n- `@memory://coding-preferences` - Retrieved your preference for functional components, React 18, and TypeScript\\\\n\\\\nThe component follows modern React best practices with proper TypeScript typing, modular structure, and optimized performance through memoization. The styled-components implementation ensures consistent styling that can be customized to match your application's design system.\\\"\\n }\\n ],\\n \\\"metadata\\\": {\\n \\\"created_at\\\": \\\"2023-05-15T12:00:00Z\\\",\\n \\\"updated_at\\\": \\\"2023-05-15T12:00:00Z\\\",\\n \\\"author\\\": \\\"MCP-Prompts Team\\\",\\n \\\"category\\\": \\\"development\\\",\\n \\\"mcp_requirements\\\": [\\n \\\"MCP Filesystem Server\\\",\\n \\\"MCP GitHub Server\\\",\\n \\\"MCP Sequential Thinking Server\\\",\\n \\\"MCP Memory Server" }