Nodit MCP Boilerplate

A modern React boilerplate for integrating blockchain data analysis through Nodit's Model Context Protocol with live AI chat and real-time tool discovery.

Comment

Inspiration

The blockchain development ecosystem is fragmented, with developers struggling to integrate AI-powered data analysis into their applications. While Model Context Protocol (MCP) promises to bridge AI and external tools, there was no comprehensive boilerplate for blockchain-specific integrations. We were inspired by the potential to democratize blockchain data analysis by creating a ready-to-use template that combines modern web development with cutting-edge AI capabilities.

The vision was simple: enable any developer to build blockchain-aware AI applications in minutes, not months.

What it does

The Nodit MCP Boilerplate is a comprehensive web application template that provides:

🔗 Live MCP Integration

  • Real-time connection to Nodit's MCP server via Server-Sent Events
  • Dynamic discovery and categorization of 15+ blockchain analysis tools
  • Automatic tool status monitoring and connection recovery

💬 AI-Powered Chat Interface

  • OpenRouter API integration supporting 100+ AI models
  • Intelligent tool calling with automatic blockchain data retrieval
  • Markdown rendering with syntax highlighting for technical responses

🛠️ Dynamic Tool Dashboard

  • Live listing of available MCP tools (Blockchain APIs, Data Services, Node Access)
  • Real-time search and filtering capabilities
  • Interactive tool documentation with example parameters and responses

📦 GitHub Template Distribution

  • One-click project creation via GitHub CLI
  • Comprehensive documentation and setup guides
  • Production-ready configuration with modern tooling

🎨 Modern Developer Experience

  • React 19 with TypeScript for type safety
  • Vite for lightning-fast development
  • shadcn/ui components with dark/light theme support
  • Comprehensive testing suite with Vitest

How we built it

Architecture & Tech Stack:

  • Frontend: React 19 + TypeScript + Vite for modern development experience
  • UI Framework: shadcn/ui built on Radix UI primitives for accessibility
  • Styling: Tailwind CSS with custom green gradient theme
  • MCP Integration: use-mcp React hook for real-time server communication
  • AI Integration: OpenRouter API for multi-model AI capabilities
  • Backend Ready: Supabase integration for authentication and data persistence
  • Testing: Vitest + React Testing Library for comprehensive coverage

Key Implementation Challenges:

  1. Real-time MCP Connection Management

    • Implemented robust connection state handling (loading, ready, failed)
    • Added automatic reconnection with exponential backoff
    • Created user-friendly error recovery options

  2. Dynamic Tool Discovery & Categorization

    • Built intelligent categorization system based on tool names and descriptions
    • Implemented real-time search and filtering
    • Created interactive tool cards with live status indicators

  3. AI Chat with Tool Calling

    • Integrated OpenRouter API with MCP tool calling capabilities
    • Implemented conversation flow with tool execution results
    • Added markdown rendering for technical blockchain data

  4. Developer Experience Optimization

    • Created comprehensive GitHub template configuration
    • Built modular component architecture for easy customization
    • Implemented proper error boundaries and loading states

Challenges we ran into

1. MCP Protocol Integration Complexity The Model Context Protocol specification was relatively new, requiring deep understanding of Server-Sent Events and tool calling patterns. We had to build robust connection management from scratch.

2. Real-time Tool State Management Managing the state of 15+ blockchain tools with different connection states, capabilities, and error conditions required careful state architecture and error handling.

3. AI Model Integration Integrating multiple AI models through OpenRouter while maintaining tool calling capabilities required understanding different model capabilities and response formats.

4. Blockchain Data Visualization Presenting complex blockchain data (transaction hashes, smart contract calls, token transfers) in a user-friendly format while maintaining technical accuracy.

5. Performance Optimization Ensuring smooth real-time updates while handling large amounts of blockchain data without overwhelming the UI or causing memory leaks.

Accomplishments that we're proud of

🚀 Technical Achievements:

  • Zero-config MCP Integration: Developers can connect to blockchain data with just one line of code
  • 15+ Live Blockchain Tools: Real-time access to Ethereum, Polygon, Aptos, and more
  • Sub-second Response Times: Optimized tool calling and data retrieval
  • 100% TypeScript Coverage: Full type safety across the entire application
  • Comprehensive Testing: 90%+ code coverage with unit and integration tests

🎯 Developer Experience:

  • One-click Template Creation: GitHub CLI integration for instant project setup
  • Comprehensive Documentation: 200+ lines of setup and usage documentation
  • Modern Tooling: Vite, ESLint, Prettier, and automated workflows
  • Responsive Design: Mobile-first approach with dark/light theme support

🔧 Innovation:

  • Dynamic Tool Categorization: Automatic organization of MCP tools by functionality
  • Intelligent Error Recovery: User-friendly error handling with multiple recovery options
  • Real-time Status Monitoring: Live connection and tool status indicators
  • Multi-model AI Support: Seamless switching between different AI models

What we learned

Technical Insights:

  • Model Context Protocol is powerful but requires careful connection management
  • Real-time blockchain data requires efficient state management and caching strategies
  • AI tool calling works best with structured, well-documented APIs
  • TypeScript significantly improves developer experience in complex integrations

Development Process:

  • Comprehensive specifications (requirements, design, tasks) accelerate development
  • Component-driven architecture enables rapid feature iteration
  • Automated testing is crucial for real-time, stateful applications
  • Documentation quality directly impacts adoption and contribution

Blockchain Development:

  • Developers need abstraction layers for blockchain complexity
  • Real-time data visualization is crucial for blockchain applications
  • Error handling is critical when dealing with network-dependent services
  • Tool discoverability significantly impacts developer productivity

What's next for Nodit MCP Boilerplate

🔮 Short-term Roadmap (Next 3 months):

  • Enhanced AI Models: Integration with Claude, Gemini, and specialized blockchain models
  • Custom Tool Creation: Visual tool builder for custom MCP tool development
  • Advanced Analytics: Blockchain transaction analysis and visualization components
  • Multi-chain Support: Expanded support for Solana, Cosmos, and other ecosystems

🚀 Long-term Vision (6-12 months):

  • Collaborative Features: Multi-user blockchain analysis with real-time collaboration
  • Plugin Ecosystem: Marketplace for community-created MCP tools and components
  • Enterprise Features: Advanced authentication, role-based access, and audit logging
  • Mobile Applications: React Native version for mobile blockchain analysis

🌟 Community Goals:

  • Open Source Ecosystem: Build a community of blockchain developers using MCP
  • Educational Content: Tutorials, workshops, and documentation for MCP adoption
  • Integration Partners: Collaborate with other blockchain infrastructure providers
  • Developer Advocacy: Conference talks and technical blog posts about MCP benefits

Built with

Core Technologies:

  • React 19 - Latest React features with concurrent rendering
  • TypeScript - Full type safety and developer experience
  • Vite - Lightning-fast build tool and development server
  • Tailwind CSS - Utility-first styling with custom design system

UI & Components:

  • shadcn/ui - High-quality, accessible component library
  • Radix UI - Unstyled, accessible UI primitives
  • Lucide React - Beautiful, consistent icon system
  • React Router DOM - Client-side routing and navigation

Integration & APIs:

  • use-mcp - React hooks for Model Context Protocol integration
  • OpenRouter API - Access to 100+ AI models with unified interface
  • Supabase - Backend-as-a-Service for authentication and data
  • Privy - Web3 authentication and wallet integration

Development Tools:

  • Vitest - Fast, modern testing framework
  • React Testing Library - Component testing utilities
  • ESLint - Code quality and consistency
  • Prettier - Automated code formatting
  • GitHub Actions - CI/CD and automated workflows

Blockchain Infrastructure:

  • Nodit MCP Server - Real-time blockchain data and analysis tools
  • Ethereum/Polygon APIs - Multi-chain blockchain data access
  • Aptos GraphQL - Advanced query capabilities for Aptos blockchain
  • Webhook Services - Real-time blockchain event streaming

Ready to build the future of blockchain-AI integration? Get started with the Nodit MCP Boilerplate today!

Built With

  • kiro
Share this project:

Updates

Submission history