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

# NextJS

> Langtrace can be easily integrated with NextJS applications with just two steps.

<Note>
  Langtrace can be initialized only in the server-side code of NextJS
  applications. This includes `app/api/` pages for app router and `pages/api/`
  for pages router. You can also initialize Langtrace in server side rendered
  pages.
</Note>

# Get Started

<Steps>
  <Step title="First Step">
    Install the Langtrace SDK in your NextJS application.

    ```bash theme={null}
    npm install @langtrase/typescript-sdk
    ```

    Update the next.config.(m)js file.

    ```typescript next.config.(m)js theme={null}
    import { ModuleAlias } from '@langtrase/typescript-sdk/dist/webpack/plugins/ModuleAlias.js'
    const nextConfig = {
      webpack: (config, { isServer }) => {
        if (isServer) {
            config.resolve.plugins = [
            ...(config.resolve.plugins || []),
            new ModuleAlias(process.cwd())
          ];
          config.module.rules.push({
            loader: "node-loader",
            test: /\.node$/,
          });
          config.ignoreWarnings = [{ module: /opentelemetry/ }];
        }
      return config;
      },
    };
    ```
  </Step>

  <Step title="Second Step">
    Initialize langtrace in your API routes like so:. Replace `<API_KEY>` with your Langtrace API key.

    <CodeGroup>
      ```typescript App Router theme={null}
      // api/chat/route.ts
      import { NextResponse, NextRequest } from 'next/server';
      import * as Langtrace from '@langtrase/typescript-sdk';
      import * as openai from 'openai';
      import { OpenAI } from 'openai';

      Langtrace.init({instrumentations: {openai}, api_key: '<API_KEY>'});

      export async function GET(req: NextRequest) {
        try {
          const openAi = new OpenAI()
          const response = await openAi.chat.completions.create({
            model: 'gpt-3.5-turbo',
            messages: [
              {
                role: 'system',
                content: 'You are a helpful assistant.',
              },
              {
                role: 'user',
                content: "What do sharks eat?",
              },
            ],
          })
          return NextResponse.json({response: response.choices[0]})
        } catch (err) {
          return NextResponse.json({
            error: err,
          });
        }
      }
      ```

      ```typescript Pages Router theme={null}
      // pages/api/chat.ts
      import { NextApiRequest, NextApiResponse } from 'next';
      import * as Langtrace from '@langtrase/typescript-sdk';
      import * as openai from 'openai';
      import { OpenAI } from 'openai';

      Langtrace.init({instrumentations: {openai}, api_key: '<API_KEY>'});

      export default async function handler(req: NextApiRequest, res: NextApiResponse) {
        try {
          const openAi = new OpenAI();
          const response = await openAi.chat.completions.create({
            model: 'gpt-3.5-turbo',
            messages: [
              {
                role: 'system',
                content: 'You are a helpful assistant.',
              },
              {
                role: 'user',
                content: "What do sharks eat?",
              },
            ],
          });
          res.status(200).json({ response: response.choices[0] });
        } catch (err: any) {
          res.status(500).json({
            error: err.message,
          });
        }
      }
      ```
    </CodeGroup>
  </Step>
</Steps>

## Instrumentations

Langtrace supports instrumentations for different LLMs, VectorDBs and Frameworks. The instrumentations object is a key-value pair where the key is the name of the LLM, VectorDB or Framework and the value is the imported module.

<Note>
  You can instrument multiple vendors in your application. For example, you can instrument OpenAI and LlamaIndex in the same application. See **LlamaIndex** instrumentation for an example.
</Note>

**See initalization for all supported instrumentations below**

Replace `<API_KEY>` with your Langtrace API key.

<AccordionGroup>
  <Accordion title="Vercel AI SDK">
    ```typescript theme={null}
    import * as Langtrace from '@langtrase/typescript-sdk';
    import * as ai from 'ai';
    Langtrace.init({
    api_key: '<API_KEY>',
    instrumentations: {
      ai: ai,
    },
    });
    ```
  </Accordion>

  <Accordion title="LlamaIndex">
    ```typescript theme={null}
    import * as Langtrace from '@langtrase/typescript-sdk';
    import * as llamaindex from 'llamaindex';
    import * as openai from 'openai';
    Langtrace.init({
    api_key: '<API_KEY>',
    instrumentations: {
      llamaindex: llamaindex,
      openai: openai,
    },
    });
    ```
  </Accordion>

  <Accordion title="Anthropic">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as anthropic from "@anthropic-ai/sdk";
    /**
    * Ensure you have ANTHROPIC_API_KEY in your environment variables and LANGTRACE_API_KEY in your environment variables
    */
    Langtrace.init({
    api_key: '<API_KEY>',
    instrumentations: {
      anthropic: anthropic,
    },
    });
    ```
  </Accordion>

  <Accordion title="OpenAI">
    ```typescript Typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as openai from "openai";
    /**
     * Ensure you have OPENAI_API_KEY in your environment variables and LANGTRACE_API_KEY in your environment variables
     */
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        openai: openai,
      },
    });
    ```
  </Accordion>

  <Accordion title="Pinecone">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as pinecone from "@pinecone-database/pinecone";
    import * as openai from "openai";

    /**
     * Ensure you have PINECONE_API_KEY in your environment variables and LANGTRACE_API_KEY in your environment variables
     */
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        pinecone: pinecone,
        openai: openai,
      },
    });
    ```
  </Accordion>

  <Accordion title="ChromaDB">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as chroma from "chromadb";
    import * as openai from "openai";
    /**
     * Ensure you have installed chromadb
     * Make sure you have pipx installed.
     * python3 -m venv ./app/api/chroma/chromaenv
     * source ./app/api/chroma/chromaenv/bin/activate
     * pipx install chromadb
     * chroma run --path ./app/api/chroma/db
     * Ensure you have OPENAI_API_KEY in your environment variables and LANGTRACE_API_KEY in your environment variables
     */
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        openai: openai,
        chromadb: chroma,
      },
    });
    ```
  </Accordion>

  <Accordion title="Cohere">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as cohere from 'cohere-ai'
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        cohere: cohere
      },
    });
    ```
  </Accordion>

  <Accordion title="groq">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as groq from 'groq-sdk'
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        groq: groq
      },
    });
    ```
  </Accordion>

  <Accordion title="pg">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as pg from 'pg'
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        pg: pg
      },
    });
    ```
  </Accordion>

  <Accordion title="qdrant">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as qdrant from '@qdrant/js-client-rest'
    /**
    * To run qdrant locally using docker.
    * 1. docker pull qdrant/qdrant
    * 2. docker run -p 6333:6333 -p 6334:6334 \
        -v $(pwd)/qdrant_storage:/qdrant/storage:z \
        qdrant/qdrant
    **/
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        qdrant: qdrant
      },
    });
    ```
  </Accordion>

  <Accordion title="weaviate">
    ```typescript theme={null}
    import * as Langtrace from "@langtrase/typescript-sdk";
    import * as weaviate from 'weaviate-ts-client'
    Langtrace.init({
      api_key: '<API_KEY>',
      instrumentations: {
        weaviate: weaviate
      },
    });
    ```
  </Accordion>
</AccordionGroup>

## Recipes

<Note>
  To get started with integrating Langtrace in your NextJS application, you can refer to these NextJS examples in our recipes repository:
  [NextJS Integration Examples](https://github.com/Scale3-Labs/langtrace-recipes/tree/main/integrations/web-framework/nextjs)
</Note>