> ## Documentation Index
> Fetch the complete documentation index at: https://vij.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get VIJ up and running in under 5 minutes

This guide will help you set up VIJ error monitoring in your application. You'll deploy the dashboard, integrate the SDK, and start tracking errors in production.

## Prerequisites

Before you begin, ensure you have:

* **Node.js 18+** installed
* **MongoDB** instance (local or cloud like MongoDB Atlas)
* **npm** or **bun** package manager
* A Google Gemini API key (optional, for AI features)

## Step 1: Deploy VIJ Admin Dashboard

<Steps>
  <Step title="Clone the repository">
    Clone the VIJ Admin repository to your local machine:

    ```bash theme={null}
    git clone https://github.com/asengupta07/vij-admin.git
    cd vij-admin
    ```
  </Step>

  <Step title="Install dependencies">
    Install the required npm packages:

    ```bash theme={null}
    npm install
    ```

    <Tip>
      You can also use `bun install` if you prefer Bun as your package manager.
    </Tip>
  </Step>

  <Step title="Configure environment variables">
    Create a `.env.local` file in the root directory:

    ```bash .env.local theme={null}
    MONGODB_URI=mongodb://localhost:27017/vij
    NEXT_PUBLIC_BASE_URL=http://localhost:3000
    GEMINI_API_KEY=your_gemini_api_key_here
    ```

    <Warning>
      `MONGODB_URI` is required. Without it, the application will not start. `GEMINI_API_KEY` is optional but recommended for AI-powered error analysis.
    </Warning>

    [Learn more about environment variables →](/dashboard/environment-variables)
  </Step>

  <Step title="Start the development server">
    Run the Next.js development server:

    ```bash theme={null}
    npm run dev
    ```

    Open [http://localhost:3000](http://localhost:3000) to see your dashboard.

    <Check>
      Your VIJ Admin dashboard is now running! You should see an empty dashboard ready to receive error logs.
    </Check>
  </Step>
</Steps>

## Step 2: Integrate vij-sdk in Your Application

<Steps>
  <Step title="Install the SDK">
    Install `vij-sdk` in your application:

    <CodeGroup>
      ```bash npm theme={null}
      npm install vij-sdk
      ```

      ```bash yarn theme={null}
      yarn add vij-sdk
      ```

      ```bash pnpm theme={null}
      pnpm add vij-sdk
      ```

      ```bash bun theme={null}
      bun add vij-sdk
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Add VIJ initialization code to your application entry point:

    <Tabs>
      <Tab title="Browser (React/Vue/etc)">
        ```javascript main.js theme={null}
        import { init } from "vij-sdk";

        init({
          endpoint: "http://localhost:3000/api/logs",
          appId: "my-app",
          environment: "production",
          batch: true,
          flushIntervalMs: 3000,
          maxBatchSize: 20
        });
        ```

        For React apps, add this to your `main.jsx` or `index.js` before rendering your app.
      </Tab>

      <Tab title="Node.js (Express/Next.js)">
        ```javascript server.js theme={null}
        import { init } from "vij-sdk";

        init({
          endpoint: "http://localhost:3000/api/logs",
          appId: "my-backend-api",
          environment: "production",
          batch: true
        });

        // Your server code
        app.listen(3000);
        ```

        Add this at the very top of your server entry point.
      </Tab>

      <Tab title="Next.js App Router">
        Create an initialization file and import it in your root layout:

        ```javascript lib/vij.js theme={null}
        "use client";
        import { init } from "vij-sdk";

        if (typeof window !== "undefined") {
          init({
            endpoint: "http://localhost:3000/api/logs",
            appId: "my-nextjs-app",
            environment: "production"
          });
        }
        ```

        Then import in `app/layout.js`:

        ```javascript app/layout.js theme={null}
        import "./lib/vij";
        ```
      </Tab>
    </Tabs>

    <Tip>
      Use different `appId` values for frontend and backend to track them separately in the dashboard.
    </Tip>
  </Step>

  <Step title="Test error tracking">
    Trigger a test error to verify integration:

    ```javascript theme={null}
    import { captureException, captureMessage } from "vij-sdk";

    // Test with a custom error
    try {
      throw new Error("Test error from VIJ quickstart");
    } catch (error) {
      captureException(error, { feature: "quickstart" });
    }

    // Or log a message
    captureMessage("VIJ is working!", { test: true }, "info");
    ```

    <Check>
      Check your dashboard at [http://localhost:3000/logs](http://localhost:3000/logs) — you should see your test error appear within a few seconds!
    </Check>
  </Step>
</Steps>

## Step 3: Explore the Dashboard

Now that errors are flowing in, explore the dashboard features:

<CardGroup cols={2}>
  <Card title="Dashboard Home" icon="chart-line" href="/dashboard/features#dashboard-overview">
    View error trends, severity distribution, and recent events
  </Card>

  <Card title="Logs View" icon="list" href="/dashboard/features#logs-view">
    Browse all errors with filtering and search capabilities
  </Card>

  <Card title="Error Details" icon="magnifying-glass" href="/dashboard/features#error-details">
    Inspect stack traces, metadata, and AI analysis
  </Card>

  <Card title="Error Groups" icon="layer-group" href="/advanced/error-grouping">
    View grouped errors and occurrence counts
  </Card>
</CardGroup>

## Next Steps

<Steps>
  <Step title="Configure SDK options">
    Customize batching, queue size, and other SDK settings for your use case.

    [SDK Configuration →](/sdk/configuration)
  </Step>

  <Step title="Enable AI features">
    Set up Google Gemini for automatic error analysis and fix suggestions.

    [AI Integration →](/advanced/ai-integration)
  </Step>

  <Step title="Deploy to production">
    Learn how to deploy VIJ Admin to Vercel, Docker, or your own infrastructure.

    [Deployment Guide →](/dashboard/deployment)
  </Step>

  <Step title="Explore advanced filtering">
    Use advanced filters, search, and grouping to find errors faster.

    [Filtering & Search →](/advanced/filtering-and-search)
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Errors not appearing in dashboard">
    **Check the following:**

    * Ensure MongoDB is running and accessible
    * Verify `MONGODB_URI` in `.env.local` is correct
    * Check that `endpoint` in SDK `init()` points to your VIJ Admin URL
    * Look for network errors in browser console or server logs
    * Ensure CORS is not blocking requests (VIJ Admin allows all origins by default)
  </Accordion>

  <Accordion title="Dashboard shows connection error">
    **Common causes:**

    * MongoDB is not running. Start it with `mongod` or check your cloud connection
    * `MONGODB_URI` environment variable is missing or incorrect
    * Firewall blocking MongoDB port (default: 27017)
  </Accordion>

  <Accordion title="AI analysis not showing">
    **Verify:**

    * `GEMINI_API_KEY` is set in `.env.local`
    * API key is valid and has quota available
    * Check Next.js server logs for AI-related errors

    <Note>
      AI features are optional. VIJ works perfectly without them — you just won't see AI-generated summaries and fix suggestions.
    </Note>
  </Accordion>
</AccordionGroup>

## What You've Accomplished

You've successfully:

* Deployed the VIJ Admin dashboard locally
* Integrated vij-sdk into your application
* Sent your first error to the monitoring system
* Explored the dashboard features

<Check>
  Your self-hosted error monitoring is now live! Continue reading to learn about advanced features and production deployment.
</Check>