API Result Visualizer

Transform any cURL command into beautiful, interactive visualizations powered by AI. Paste a cURL command and instantly get structured views, charts, and custom AI-generated visualizations with version management and sharing capabilities.

✨ Features

• 🔄 cURL Command Execution - Execute any cURL command directly in the browser
• 📊 Smart Data Analysis - Automatically detect data patterns (lists, objects, statistics, etc.)
• 🎨 AI-Powered Visualizations - Generate custom HTML visualizations using AI
• 📚 Version Management - Keep multiple versions of AI-generated visualizations
• 🔗 Easy Sharing - Generate shareable links or download standalone HTML files
• 💾 Persistent Storage - User preferences and versions saved locally
• 🎯 Template Matching - Automatically match API responses to visualization templates

🚀 Getting Started

1. Install Dependencies

npm install
# or
yarn install

2. Configure Environment

Create a .env.local file in the project root:

# OpenRouter API Key for AI visualizations
OPENROUTER_API_KEY=your_openrouter_api_key_here

How to get OpenRouter API Key:

1. Visit OpenRouter.ai
2. Sign up/login and go to "Keys" section
3. Create a new API key
4. Copy and paste it in your .env.local file

3. Start Development Server

npm run dev

Open http://localhost:3000 in your browser.

🎯 Usage

1. Paste cURL Command - Enter any cURL command in the input field

2. View Results - See structured data visualization in multiple tabs:

   • Structured: Automatic table/chart views based on data type
   • Raw Data: Original JSON response
   • AI Visualization: Custom AI-generated interactive visualizations

3. AI Features:

   • Generate custom visualizations with natural language descriptions
   • Modify existing visualizations ("make it dark theme", "add charts", etc.)
   • Version management - keep multiple versions, switch between them
   • Share visualizations via links or download HTML files

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Styling: Tailwind CSS + shadcn/ui components
• AI: OpenRouter API (Claude, GPT models)
• Storage: localStorage for client-side persistence
• Language: TypeScript

📁 Project Structure

src/
├── app/                 # Next.js App Router
│   ├── api/            # API endpoints
│   └── page.tsx        # Main application page
├── components/         # React components
│   ├── ui/            # shadcn/ui components
│   └── ...            # Feature components
├── types/             # TypeScript type definitions
└── styles/            # CSS and theme files

public/
└── shared/            # Generated shareable HTML files (gitignored)

data/
└── templates/         # AI-generated templates (gitignored)

🔧 Development

The app automatically creates necessary directories (public/shared, data/templates) on first run. These are gitignored as they contain user-generated content.

📄 License

MIT License