A web application designed for viewing and analyzing MCP (Model Context Protocol) server JSON files in a human-readable format. The application provides an intuitive interface for exploring both standard JSON and NDJSON (Newline Delimited JSON) formats, with special features tailored for MCP server data structures.
-
Smart Format Detection:
- Automatic detection of JSON and NDJSON formats
- Specialized parsing for MCP server data structures
- Support for nested entity relationships
-
Interactive Visualization:
- Hierarchical tree view with collapsible nodes
- Entity type grouping and filtering
- Relationship visualization between entities
- Search functionality within loaded data
-
User Experience:
- Drag-and-drop file upload
- Real-time parsing and validation
- Error highlighting with detailed messages
- Responsive design for all screen sizes
- Dark/Light theme support
- Clone the repository:
git clone https://github.com/tex447/json-viewer-app.git
cd json-viewer-app
- Start the application:
npm run start
The application will be available at http://localhost:3000 with hot-reload enabled.
- Clone and install dependencies:
git clone https://github.com/tex447/json-viewer-app.git
cd json-viewer-app
npm install
- Start development server:
npm run dev
{
"type": "entity",
"name": "example_entity",
"entityType": "example",
"observations": [
"observation 1",
"observation 2"
]
}
{"type":"entity","name":"entity1","entityType":"type1","observations":["obs1"]}
{"type":"entity","name":"entity2","entityType":"type2","observations":["obs2"]}
{"type":"relation","from":"entity1","to":"entity2","relationType":"connects"}
json-viewer-app/
├── src/
│ ├── components/
│ │ ├── ui/
│ │ │ ├── badge.jsx
│ │ │ ├── card.jsx
│ │ │ ├── scroll-area.jsx
│ │ │ ├── separator.jsx
│ │ │ └── tooltip.jsx
│ │ ├── TreeView.jsx
│ │ └── MCPStats.jsx
│ ├── lib/
│ │ └── utils.js
│ ├── utils/
│ │ ├── mcpValidator.js
│ │ └── formatters.js
│ ├── App.jsx
│ ├── App.css
│ ├── index.css
│ └── main.jsx
├── public/
├── docker/
│ └── Dockerfile.dev
├── docker-compose.yml
├── postcss.config.js
├── tailwind.config.js
├── package.json
└── vite.config.js
The application uses shadcn/ui components built on top of Radix UI primitives. Key components include:
TreeView
: Displays hierarchical JSON data with expandable nodesMCPStats
: Shows statistical overview of MCP data structureFileUpload
: Handles file input and format detection
tooltip.jsx
: Provides context-sensitive information on hoverseparator.jsx
: Visual dividers between content sectionsscroll-area.jsx
: Customizable scrollable containerscard.jsx
: Container components for content organizationbadge.jsx
: Label and tag components for metadata
- Frontend Framework: React 18 with Vite
- Styling:
- Tailwind CSS for utility classes
- Shadcn UI components
- Radix UI primitives
- State Management: React Context API
- Development Environment: Docker with hot-reload
- Build Tools:
- Vite for fast development and building
- PostCSS for CSS processing
- ESM modules for modern JavaScript
npm run dev
: Start development servernpm run build
: Build for productionnpm run preview
: Preview production buildnpm run lint
: Run ESLintnpm start
: Start Docker development environment
The Docker setup includes:
- Hot-reload for rapid development
- Volume mapping for instant code updates
- Automatic dependency installation
- Port 3000 exposed for local access
The application includes comprehensive theme support with:
- Light/Dark mode
- CSS variables for consistent styling
- Customizable color schemes
- Responsive design utilities
{
"dependencies": {
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"lucide-react": "^0.263.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.0",
"tailwindcss-animate": "^1.0.7"
}
}
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature
- Commit your changes:
git commit -m 'Add amazing feature'
- Push to the branch:
git push origin feature/amazing-feature
- Open a Pull Request
- Follow the established code style
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting PR
This project is licensed under the MIT License - see the LICENSE file for details.
- This project was inspired by the need for better MCP server data visualization
- Special thanks to all contributors who have helped shape the project