mirror of
https://github.com/hanzoai/mcp.git
synced 2026-10-15 12:30:12 +00:00
zeekay
075661c92e
Major Features: - Complete GitHub API integration for fetching UI components - Support for 5 frameworks: Hanzo (default), React, Svelte, Vue, React Native - 13 new MCP tools for comprehensive UI component management - Full parity with shadcn-ui-mcp-server functionality New Tools: - ui_get_component - Fetch component source code - ui_get_component_demo - Get component usage examples - ui_get_component_metadata - Extract dependencies and registry info - ui_list_components - List all available components - ui_get_block - Fetch UI blocks (complex compositions) - ui_list_blocks - List blocks with categories - ui_get_directory_structure - Browse repository structure - ui_set_framework - Switch between frameworks - ui_get_framework - Get current framework - ui_set_github_token - Configure GitHub authentication - ui_get_rate_limit - Check API rate limit status Framework Support: - Hanzo UI (hanzoai/ui) - Default framework - React/shadcn (shadcn-ui/ui) - Svelte (huntabyte/shadcn-svelte) - Vue (unovue/shadcn-vue) - React Native (founded-labs/react-native-reusables) Technical Improvements: - GitHub API client with rate limiting and caching - Circuit breaker pattern for resilience - 15-minute cache TTL for API responses - Automatic authentication detection - Support for blocks with multiple files - Tree view directory browsing
80 lines
2.9 KiB
JavaScript
80 lines
2.9 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Example of using the GitHub UI API integration
|
|
* This demonstrates fetching components from various UI frameworks
|
|
*/
|
|
|
|
import { GitHubAPIClient } from '../src/tools/ui-github-api.js';
|
|
|
|
async function main() {
|
|
const client = new GitHubAPIClient();
|
|
|
|
console.log('GitHub UI Component Fetcher Example\n');
|
|
console.log('====================================\n');
|
|
|
|
try {
|
|
// Example 1: List components from Hanzo UI
|
|
console.log('1. Listing Hanzo UI components...');
|
|
const hanzoComponents = await client.listComponents('hanzo');
|
|
console.log(' Available components:', hanzoComponents.slice(0, 5).join(', '), '...\n');
|
|
|
|
// Example 2: Fetch a button component from React (shadcn/ui)
|
|
console.log('2. Fetching button component from shadcn/ui...');
|
|
try {
|
|
const buttonCode = await client.fetchComponent('button', 'react');
|
|
console.log(' Button component size:', buttonCode.length, 'characters');
|
|
console.log(' First 200 chars:', buttonCode.substring(0, 200), '...\n');
|
|
} catch (error: any) {
|
|
console.log(' Error:', error.message, '\n');
|
|
}
|
|
|
|
// Example 3: List blocks from Hanzo UI
|
|
console.log('3. Listing Hanzo UI blocks...');
|
|
const hanzoBlocks = await client.listBlocks('hanzo');
|
|
if (hanzoBlocks.length > 0) {
|
|
console.log(' Available blocks:', hanzoBlocks.slice(0, 5).join(', '), '...\n');
|
|
} else {
|
|
console.log(' No blocks found or blocks path not configured\n');
|
|
}
|
|
|
|
// Example 4: Get component metadata
|
|
console.log('4. Getting component metadata for card...');
|
|
const metadata = await client.fetchComponentMetadata('card', 'hanzo');
|
|
console.log(' Metadata:', JSON.stringify(metadata, null, 2), '\n');
|
|
|
|
// Example 5: Check rate limit status
|
|
console.log('5. GitHub API Rate Limit Status:');
|
|
const rateLimit = client.getRateLimitInfo();
|
|
console.log(' Remaining requests:', rateLimit.remaining);
|
|
console.log(' Reset time:', rateLimit.reset.toISOString(), '\n');
|
|
|
|
// Example 6: Multi-framework support
|
|
console.log('6. Multi-framework component fetching:');
|
|
const frameworks = ['hanzo', 'react', 'svelte', 'vue', 'react-native'] as const;
|
|
|
|
for (const framework of frameworks) {
|
|
try {
|
|
const components = await client.listComponents(framework);
|
|
console.log(` ${framework}: ${components.length} components available`);
|
|
} catch (error: any) {
|
|
console.log(` ${framework}: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
console.log('\n====================================');
|
|
console.log('Example completed successfully!');
|
|
console.log('\nNote: To use authenticated requests, set GITHUB_TOKEN or GITHUB_PERSONAL_ACCESS_TOKEN environment variable.');
|
|
|
|
} catch (error: any) {
|
|
console.error('Error:', error.message);
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
// Run if executed directly
|
|
if (import.meta.url === `file://${process.argv[1]}`) {
|
|
main().catch(console.error);
|
|
}
|
|
|
|
export { main }; |