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

# Vercel AI SDK Integration

> Use Nordlys with the Vercel AI SDK for streamlined AI applications

## Get Your Nordlys API Key

[Sign up here](https://nordlyslabs.com/api-platform/orgs) to create an account and generate your API key.

## Overview

The Vercel AI SDK works seamlessly with Nordlys through two methods:

* **Nordlys SDK (Recommended):** Use the native `@nordlys-llm/nordlys-ai-provider` package.
* **OpenAI-Compatible Client:** Use Nordlys via `@ai-sdk/openai` with a custom base URL.

***

## Method 1: Nordlys SDK

### Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install ai @nordlys-llm/nordlys-ai-provider
  ```

  ```bash yarn theme={null}
  yarn add ai @nordlys-llm/nordlys-ai-provider
  ```

  ```bash pnpm theme={null}
  pnpm add ai @nordlys-llm/nordlys-ai-provider
  ```

  ```bash bun theme={null}
  bun add ai @nordlys-llm/nordlys-ai-provider
  ```
</CodeGroup>

### Basic Setup

<CodeGroup>
  ```javascript Basic Configuration theme={null}
  import { nordlys } from "@nordlys-llm/nordlys-ai-provider";

  // Use default configuration
  const model = nordlys();
  ```

  ```javascript Custom Configuration theme={null}
  import { createNordlys } from "@nordlys-llm/nordlys-ai-provider";

  const customNordlys = createNordlys({
    baseURL: "https://api.nordlyslabs.com/v1",
    apiKey: process.env.NORDLYS_API_KEY,
    headers: {
      "User-Agent": "MyApp/1.0",
    },
  });
  ```
</CodeGroup>

***

## Method 2: OpenAI-Compatible Client

### Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install ai @ai-sdk/openai
  ```

  ```bash yarn theme={null}
  yarn add ai @ai-sdk/openai
  ```

  ```bash pnpm theme={null}
  pnpm add ai @ai-sdk/openai
  ```

  ```bash bun theme={null}
  bun add ai @ai-sdk/openai
  ```
</CodeGroup>

### Configuration

<CodeGroup>
  ```javascript JavaScript/Node.js theme={null}
  import { openai } from '@ai-sdk/openai';
  import { generateText } from 'ai';

  const nordlysOpenAI = openai({
    apiKey: process.env.NORDLYS_API_KEY,
    baseURL: 'https://api.nordlyslabs.com/v1',
  });

  const { text } = await generateText({
    model: nordlysOpenAI('nordlys/hypernova'),
    prompt: 'Explain quantum computing simply',
  });
  ```

  ```typescript TypeScript theme={null}
  import { openai } from '@ai-sdk/openai';
  import { generateText } from 'ai';

  const nordlysOpenAI = openai({
    apiKey: process.env.NORDLYS_API_KEY!,
    baseURL: 'https://api.nordlyslabs.com/v1',
  });

  const { text } = await generateText({
    model: nordlysOpenAI('nordlys/hypernova'),
    prompt: 'Explain quantum computing simply',
  });

  console.log(text);
  ```
</CodeGroup>

***

## Text Generation

<CodeGroup>
  ```javascript Nordlys Provider theme={null}
  import { generateText } from 'ai';
  import { nordlys } from '@nordlys-llm/nordlys-ai-provider';

  const { text } = await generateText({
    model: nordlys(),
    prompt: 'Write a vegetarian lasagna recipe for 4 people.',
  });
  ```

  ```javascript OpenAI Provider theme={null}
  import { generateText } from 'ai';

  const { text } = await generateText({
    model: nordlysOpenAI('nordlys/hypernova'),
    prompt: 'Write a vegetarian lasagna recipe for 4 people.',
  });
  ```
</CodeGroup>

***

## Streaming

<CodeGroup>
  ```javascript Nordlys Provider theme={null}
  import { streamText } from 'ai';
  import { nordlys } from '@nordlys-llm/nordlys-ai-provider';

  const { textStream } = await streamText({
    model: nordlys(),
    prompt: 'Explain machine learning step by step',
  });

  for await (const delta of textStream) {
    process.stdout.write(delta);
  }
  ```

  ```javascript OpenAI Provider theme={null}
  import { streamText } from 'ai';

  const { textStream } = await streamText({
    model: nordlysOpenAI('nordlys/hypernova'),
    prompt: 'Explain machine learning step by step',
  });

  for await (const delta of textStream) {
    process.stdout.write(delta);
  }
  ```
</CodeGroup>

***

## React Chat Component

<CodeGroup>
  ```javascript useChat Hook theme={null}
  import { useChat } from 'ai/react';

  export default function Chat() {
    const { messages, input, handleInputChange, handleSubmit } = useChat({
      api: '/api/chat', // Your API route using Nordlys
    });

    return (
      <div>
        {messages.map(m => (
          <div key={m.id}>
            <strong>{m.role}: </strong>
            {m.content}
          </div>
        ))}
        
        <form onSubmit={handleSubmit}>
          <input
            value={input}
            placeholder="Say something..."
            onChange={handleInputChange}
          />
          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
  ```

  ```javascript API Route - Nordlys Provider theme={null}
  // pages/api/chat.js or app/api/chat/route.js
  import { nordlys } from '@nordlys-llm/nordlys-ai-provider';
  import { streamText } from 'ai';

  export async function POST(req) {
    const { messages } = await req.json();

    const result = await streamText({
      model: nordlys(),
      messages,
    });

    return result.toDataStreamResponse();
  }
  ```

  ```javascript API Route - OpenAI Provider theme={null}
  // pages/api/chat.js or app/api/chat/route.js
  import { openai } from '@ai-sdk/openai';
  import { streamText } from 'ai';

  const nordlysOpenAI = openai({
    apiKey: process.env.NORDLYS_API_KEY,
    baseURL: 'https://api.nordlyslabs.com/v1',
  });

  export async function POST(req) {
    const { messages } = await req.json();

    const result = await streamText({
      model: nordlysOpenAI('nordlys/hypernova'),
      messages,
    });

    return result.toDataStreamResponse();
  }
  ```
</CodeGroup>

***

## Configuration

<Info>
  Nordlys keeps advanced tuning internal. Use a Nordlys model ID and focus on your product logic.
</Info>

***

## Tool/Function Calling

<CodeGroup>
  ```javascript Nordlys Provider theme={null}
  import { generateText, tool } from 'ai';
  import { z } from 'zod';
  import { nordlys } from '@nordlys-llm/nordlys-ai-provider';

  const { text } = await generateText({
    model: nordlys(),
    prompt: "What's the weather in New York?",
    tools: {
      getWeather: tool({
        description: 'Get weather for a location',
        parameters: z.object({
          location: z.string(),
        }),
        execute: async ({ location }) => {
          return `Weather in ${location} is sunny and 72°F`;
        },
      }),
    },
  });
  ```

  ```javascript OpenAI Provider theme={null}
  import { generateText, tool } from 'ai';
  import { z } from 'zod';

  const { text } = await generateText({
    model: nordlysOpenAI('nordlys/hypernova'),
    prompt: "What's the weather in New York?",
    tools: {
      getWeather: tool({
        description: 'Get weather for a location',
        parameters: z.object({
          location: z.string(),
        }),
        execute: async ({ location }) => {
          return `Weather in ${location} is sunny and 72°F`;
        },
      }),
    },
  });
  ```
</CodeGroup>

***

## Environment Variables

```bash Environment Setup theme={null}
# .env.local
NORDLYS_API_KEY=your-nordlys-api-key
```

***

## Error Handling

Nordlys retries transient errors automatically. For comprehensive error handling patterns, see the [Error Handling Guide](/guides/error-handling).

```typescript theme={null}
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, error, reload } = useChat({
    api: '/api/chat',
    onError: (error) => {
      console.error('Nordlys chat error:', error);
    },
  });

  return (
    <div>
      {/* Your chat UI */}
      {error && (
        <div className="error">
          {error.message}
          <button onClick={() => reload()}>Retry</button>
        </div>
      )}
    </div>
  );
}
```

***

## What You Get

<CardGroup cols={2}>
  <Card title="Mixture of Models Activation" icon="brain">
    The right specialists activate per prompt
  </Card>

  <Card title="Built-in Streaming" icon="zap">
    Real-time response streaming with React components
  </Card>

  <Card title="Cost Optimization" icon="dollar-sign">
    Significant cost savings through lab‑tuned models
  </Card>

  <Card title="Response Metadata" icon="eye">
    Inspect latency and quality signals per request
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="More Examples" href="/examples/streaming-chat" icon="code">
    See complete working examples
  </Card>

  <Card title="API Reference" href="/api-reference/chat-completions" icon="book">
    Explore all available options and parameters
  </Card>
</CardGroup>