---
title: Llm Pricing
emoji: 📊
colorFrom: green
colorTo: green
sdk: docker
pinned: true
license: apache-2.0
---

# LLM Comparison React App

## Overview

This React application, developed in collaboration with Anthropic Claude 3.5, is designed to compare hosted Large Language Models (LLMs) using Shadcn UI. The comparison data is based on a sheet that we have created. You can access the sheet [here]([pseudo-link](https://docs.google.com/spreadsheets/d/1NX8ZW9Jnfpy88PC2d6Bwla87JRiv3GTeqwXoB4mKU_s/edit?gid=0#gid=0)).

## Features

- **Compare LLM Providers**: Easily compare different LLM providers and their pricing.
- **User-friendly Interface**: Built using Shadcn UI for a seamless and intuitive user experience.
- **Dynamic Data**: Data is dynamically fetched and displayed, making it easy to update and compare new models and providers.

## Getting Started

1. **Clone the repository**:
    ```bash
    git clone https://huggingface.co/spaces/philschmid/llm-pricing
    cd llm-comparison-react-app
    ```

2. **Install dependencies**:
    ```bash
    npm install
    ```

3. **Run the app**:
    ```bash
    npm start
    ```

4. **Open your browser**: Navigate to `http://localhost:5173` to see the app in action.

## Contributing

We welcome contributions! If you want to add a new provider, please follow these steps:

1. **Navigate to the data file**: Open the file where `mockData` array is located.
2. **Add your provider**: Add a new object to the `mockData` array with the provider details.

Here is an example of how to add a new provider:

```javascript
export const mockData: Provider[] = [
  {
    provider: 'OpenAI',
    uri: 'https://openai.com/api/pricing/',
    models: [
      { name: 'GPT-4', inputPrice: 5.0, outputPrice: 15.0 },
      { name: 'GPT-4 (8K)', inputPrice: 30.0, outputPrice: 60.0 },
      { name: 'GPT-4 Turbo', inputPrice: 10.0, outputPrice: 30.0 },
      { name: 'GPT-3.5-turbo', inputPrice: 0.5, outputPrice: 1.5 },
    ],
  },
  {
    provider: 'NewProvider',
    uri: 'https://newprovider.com/api/pricing/',
    models: [
      { name: 'Model-A', inputPrice: 4.0, outputPrice: 12.0 },
      { name: 'Model-B', inputPrice: 25.0, outputPrice: 50.0 },
    ],
  },
  // Add more providers here
];
```