A tool for visualizing, debugging, and validating AI agent cards. Built with Next.js and TypeScript, this application helps developers preview and debug agent card configurations.
🌐 Live Site: agent-card.io
- Preview your agent cards instantly as you edit
- Built-in validation for agent card schemas and formats
- Clear error messages and visual feedback for troubleshooting
- Full compatibility with Agent-to-Agent protocol specifications
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone the repository:
git clone https://github.com/samueljh1/agent-card-visualizer.git
cd agent-card-visualizer- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
We welcome contributions from the community! Here's how you can help:
- 🐛 Found a bug? Open an issue
- 🔧 Submit pull requests for bug fixes or new features
- 📖 Help improve our docs and examples
- 🧪 Add test cases or report edge cases
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run linting:
npm run lint - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Use TypeScript for all new code
- Follow the existing code style and conventions
- Ensure accessibility best practices
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Radix UI
- Icons: Lucide React
This project is licensed under the MIT License - see the LICENSE file for details.
- 🌐 Website: agent-card.io
- 🐞 Issues: GitHub Issues
Built with ❤️ by the open source community. Special thanks to all contributors who help make this tool better for developers working with AI agents.