daviz

Daviz — AI-powered data visualizer React component

Small reusable component that exposes Daviz (primary component) and SimpleChartView. Built with TypeScript. Designed to be published to npm and used by React apps.

Installation

1. Install the package (after publishing):

npm install daviz
# daviz

Daviz — AI-powered data visualizer React component

Small reusable component that exposes `Daviz` (primary component) and `SimpleChartView`. Built with TypeScript. Designed to be published to npm and used by React apps.

Installation

Install the package from npm (after publishing):

```bash
npm install daviz

Also install peer dependencies in your app:

npm install react react-dom @mui/x-charts

Usage

import { Daviz } from "daviz";

export default function Page() {
  return (
    <Daviz dbUri={"sqlite:///path/to.db"} model={"gpt-4"} apiKey={process.env.API_KEY} />
  );
}

Build / Publish (for package authors)

In this repo:

npm install
npm run build
# then `npm publish` (after bumping version and logging in)

Notes

• The package declares react, react-dom and @mui/x-charts as peer dependencies.
• The build uses tsup to emit ESM/CJS bundles plus type declarations.

Server action (how to integrate in your app)

The Daviz UI component intentionally does not include any server-side code. To execute queries with the LangChain SQL agent, create a server action in the host application and pass a client-side wrapper to the component via the onExecuteQuery prop.

Example (Next.js server action file) — create src/actions/runQuery.ts in your application and paste the following:

"use server";

import { createSQLAgent } from "../lib/ReAct";
import { HumanMessage } from "langchain";

export async function runQueryAction(
  userQuery: string,
  dbUri: string,
  model: string,
  apiKey: string
) {
  try {
    const agent = await createSQLAgent(dbUri, model, apiKey);
    
    const stream = await agent.stream(
      { messages: [new HumanMessage(userQuery)] },
      { streamMode: "values" }
    );

    let finalResult = null;
    for await (const step of stream) {
      const message = step.messages.at(-1);
      
      if (message) {
        const role = message.constructor.name;
        console.log(`${role}: ${JSON.stringify(message.content, null, 2)}`);
        
        if (typeof message.content === "string") {
          finalResult = message.content;
        } else if (Array.isArray(message.content)) {
          const textBlocks = message.content
            .filter((block: any) => typeof block === "string" || (block.type === "text" && block.text))
            .map((block: any) => typeof block === "string" ? block : block.text)
            .join("");
          
          if (textBlocks) {
            finalResult = textBlocks;
          }
        }
      }
    }
    
    return finalResult ? JSON.stringify(finalResult, null, 2) : "{}";
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : "Unknown error";
    console.error("Query execution error:", errorMessage);
    throw error;
  }
}

Then, on the client side (or server component that renders the client component), pass a wrapper to Daviz:

import { Daviz } from "daviz";
import { runQueryAction } from "../actions/runQuery"; // server action in your app

export default function Page() {
  const handleExecute = async (query: string) => {
    // forward parameters from the component to the server action
    return await runQueryAction(query, "your-db-uri", "gpt-4", process.env.OPENAI_API_KEY!);
  };

  return <Daviz dbUri={"your-db-uri"} model={"gpt-4"} apiKey={process.env.OPENAI_API_KEY} onExecuteQuery={handleExecute} />;
}

This keeps the npm package free of server-side code and lets each consuming app implement its own server integrations and secrets management.

Compatibility and troubleshooting

• React versions: daviz declares react/react-dom as peer dependencies and now supports React 17, 18 and 19. The components themselves don't use React 18/19-only APIs, but consuming apps should ensure their other dependencies (for example @mui/* and @emotion/*) also support the React version used in the project.
• If you see peer dependency resolution errors when installing (ERESOLVE), try one of the following:
  • Upgrade the conflicting dependency in the consuming app (for example @mui/material, @emotion/react) to a version that supports React 19.
  • Temporarily install with --legacy-peer-deps if you understand and accept the risk:

npm install daviz --legacy-peer-deps

• Prefer the long-term fix: align the consuming app's MUI / emotion versions with the React version in use.

• If you maintain a public package registry or CI, consider adding a small consumer test that installs the package with the target React version to catch regressions early.