datashows-sdk

AI-Powered Chart Generation for JavaScript & TypeScript

Transform your data into stunning visualizations with natural language prompts. One AI-powered API call generates production-ready charts instantly.

Website · Documentation · Playground · API Reference

🚀 Quick Start

Installation

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)

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)

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)

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:

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

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

// 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: [email protected]

📄 License

MIT © Alperen Karavelioglu