Claude Artifact Viewer Template

Claude Artifact Viewer - Template

A modern web application for viewing and interacting with Claude-generated artifacts. This project provides an automatic navigation system for artifacts uploaded to the `src/artifacts` folder, making it easy to showcase and interact with AI-generated content.

Features

• Automatic Navigation: Components added to the src/artifacts folder are automatically included in the navigation
• Modern UI: Built with React, TypeScript, Tailwind CSS, and shadcn/ui components
• Data Visualization: Integration with Recharts for beautiful data visualizations
• Responsive Design: Fully responsive layout that works well on all devices

Tech Stack

• Frontend Framework: React 18
• Router: React Router 7
• Runtime: Bun
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui (with Radix UI primitives)
• Charting: Recharts
• Build Tool: Vite

Getting Started

Prerequisites

• Bun (latest version)
• Node.js (v18 or higher recommended)

Installation

1. Clone the repository:

   git clone 
   cd claude-artifact-viewer

2. Install dependencies:

   bun install

3. Start the development server:

   bun run dev

4. Build for production:

   bun run build

Authentication

The application includes HTTP Basic Authentication via Cloudflare Pages Functions middleware. To configure authentication:

1. Copy `.env.example` to `.env`:

   cp .env.example .env

2. Modify the username and password in the `.env` file (defaults are `claude`/`claude2025`)

The authentication middleware in `functions/_middleware.js` validates these credentials before allowing access to the application.

Project Structure

claude-artifact-viewer/
├── public/           # Static assets
├── src/
│   ├── artifacts/    # Claude-generated artifacts (add your components here)
│   ├── components/   #