<div align="center">
  <img src="https://datashows.ai/logo-dark.svg" alt="DataShows" width="120" />
  
  # datashows-sdk
  
  **AI-Powered Chart Generation for JavaScript & TypeScript**
  
  [![npm version](https://img.shields.io/npm/v/datashows-sdk.svg)](https://www.npmjs.com/package/datashows-sdk)
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  
  Transform your data into stunning visualizations with natural language prompts. One AI-powered API call generates production-ready charts instantly.
  
  [Website](https://datashows.ai) · [Documentation](https://app.datashows.ai/docs) · [Playground](https://app.datashows.ai/docs/playground) · [API Reference](https://app.datashows.ai/docs/api-reference/authentication)
</div>

---

## 🚀 Quick Start

### Installation

```bash
npm install datashows-sdk
```

**One package for everything** - works for both server-side (Node.js) and client-side (React) usage with different import paths.

### Server-Side Usage (Node.js, Next.js API routes)

```typescript
import { generateChart } from "datashows-sdk";

const chart = await generateChart({
  data: [
    { month: "Jan", sales: 4200 },
    { month: "Feb", sales: 5100 },
    { month: "Mar", sales: 4800 },
  ],
  prompt: "Show sales by month as a bar chart",
  apiKey: process.env.DATASHOWS_API_KEY,
});

console.log(chart.dataUrl); // PNG/SVG data URL
```

### Client-Side Usage (React)

```typescript
import { useGenerateChart } from "datashows-sdk/react";

function MyComponent() {
  const { mutate, data, isLoading } = useGenerateChart({
    onSuccess: (result) => {
      console.log("Chart generated!", result.dataUrl);
    },
  });

  const handleGenerate = () => {
    mutate({
      data: salesData,
      prompt: "Bar chart of sales by region",
      apiKey: "your-api-key",
    });
  };

  return (
    <div>
      <button onClick={handleGenerate} disabled={isLoading}>
        Generate Chart
      </button>
      {data && <img src={data.dataUrl} alt="Generated chart" />}
    </div>
  );
}
```

## ✨ Features

- 🤖 **AI-Powered** - Natural language prompts automatically create the perfect visualization
- 📊 **Multiple Output Formats** - Generate PNG, SVG charts or get data for external chart libraries (shadcn/ui, ApexCharts, Chart.js)
- 💬 **Conversational** - Build upon previous charts with contextual follow-up queries
- 🎨 **Beautiful by Default** - Professional styling and responsive design
- ⚡ **Lightning Fast** - Optimized infrastructure with smart caching
- 🔒 **Type-Safe** - Full TypeScript support with comprehensive types

## 📦 Output Formats

### Image Output (Default)

```typescript
const chart = await generateChart({
  data: myData,
  prompt: "Line chart showing trends",
  fileType: "png", // or 'svg'
  apiKey: "your-api-key",
});

// Returns: { kind: "image", fileType: "png", dataUrl: "data:image/..." }
```

### External Chart Libraries (NEW)

Use with shadcn/ui, ApexCharts, Chart.js, Recharts, and any chart library want:

```typescript
const result = await generateChart({
  data: myData,
  prompt: "Interactive bar chart",
  outputFormat: "chartData",
  apiKey: "your-api-key",
});

// Returns: {
//   kind: "chartData",
//   library: "shadcn",
//   data: [...],
//   config: {...}
// }
```

```typescript
// Node.js environments (Vercel serverless, etc.)
// Importing directly datashows-sdk will auto detect the environment
import { generateChart } from "datashows-sdk/node";

// Edge runtime environments
import { generateChart } from "datashows-sdk/edge";

// Browser environments
import { generateChart } from "datashows-sdk/browser";
```

## 🎯 Use Cases

- 📈 **Analytics Dashboards** - Generate charts for SaaS metrics, e-commerce analytics
- 📊 **Reports & Presentations** - Create visualizations for business reports
- 🤖 **AI Applications** - Add chart generation to your AI-powered apps
- 📱 **Mobile Apps** - Generate charts on-demand for mobile applications
- 🔄 **Data Pipelines** - Visualize data transformations and pipeline outputs

## 🆘 Support

- 📧 Email: karavelx@gmail.com

## 📄 License

MIT © [Alperen Karavelioglu](https://github.com/Alpovka)

---

<div align="center">
  <strong>Built with ❤️ by <a href="https://github.com/Alpovka">DataShows</a></strong>
</div>