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

# TanStack AI

> Generate images and videos with Decart using TanStack AI.

The Decart adapter for [TanStack AI](https://tanstack.com/ai) adds image and video generation to any TanStack project.

<Tip>
  Decart is listed as an [official community adapter](https://tanstack.com/ai/latest/docs/community-adapters/decart) on the TanStack AI docs.
</Tip>

## Prerequisites

* A [Decart API key](/getting-started/authentication)
* Node.js 18+

## Installation

Install both the Decart adapter and TanStack AI:

<CodeGroup>
  ```bash npm theme={null}
  npm install @decartai/tanstack-ai-adapter @tanstack/ai
  ```

  ```bash pnpm theme={null}
  pnpm add @decartai/tanstack-ai-adapter @tanstack/ai
  ```

  ```bash yarn theme={null}
  yarn add @decartai/tanstack-ai-adapter @tanstack/ai
  ```
</CodeGroup>

## Setup

Set your Decart API key as an environment variable:

```bash theme={null}
export DECART_API_KEY="your-api-key"
```

Get your API key from [platform.decart.ai](https://platform.decart.ai). See [authentication](/getting-started/authentication) for details.

Or pass your API key directly when creating adapters:

```typescript theme={null}
import { createDecartImage } from '@decartai/tanstack-ai-adapter';

const adapter = createDecartImage('lucy-pro-t2i', 'your-api-key');
```

## Image generation

Generate images with `generateImage()` and the `decartImage()` adapter:

```typescript theme={null}
import { generateImage } from '@tanstack/ai';
import { decartImage } from '@decartai/tanstack-ai-adapter';

const result = await generateImage({
  adapter: decartImage('lucy-pro-t2i'),
  prompt: 'A serene mountain landscape at sunset, cinematic lighting',
});

console.log(result.images[0].b64Json); // Base64-encoded image data
```

### With explicit API key

Use `createDecartImage()` to pass your API key directly:

```typescript theme={null}
import { generateImage } from '@tanstack/ai';
import { createDecartImage } from '@decartai/tanstack-ai-adapter';

const result = await generateImage({
  adapter: createDecartImage('lucy-pro-t2i', 'your-api-key'),
  prompt: 'A serene mountain landscape at sunset, cinematic lighting',
});
```

## Video generation

Video generation uses an async job and polling pattern — you submit a job, then poll for the result.

<Info>
  Unlike `generateImage()`, video generation is asynchronous. You submit a generation job with `generateVideo()`, then poll its status with `getVideoJobStatus()` until it completes.
</Info>

```typescript theme={null}
import { setTimeout } from 'node:timers/promises';
import { generateVideo, getVideoJobStatus } from '@tanstack/ai';
import { decartVideo } from '@decartai/tanstack-ai-adapter';

const { jobId } = await generateVideo({
  adapter: decartVideo('lucy-pro-t2v'),
  prompt: 'A cat walking through a miniature lego city',
});

let videoUrl: string | undefined;
while (true) {
  const status = await getVideoJobStatus({
    adapter: decartVideo('lucy-pro-t2v'),
    jobId,
  });

  if (status.status === 'failed') {
    throw new Error('Video generation failed');
  }

  if (status.status === 'completed') {
    videoUrl = status.url;
    break;
  }

  await setTimeout(2000);
}

console.log('Video ready:', videoUrl);
```

## Models

| Model          | Type          | Description                        |
| -------------- | ------------- | ---------------------------------- |
| `lucy-pro-t2i` | Text-to-image | High-quality image generation      |
| `lucy-pro-t2v` | Text-to-video | Video generation from text prompts |

## Options

<ParamField body="seed" type="number">
  Seed value for reproducible results.
</ParamField>

<ParamField body="resolution" type={'"720p" | "480p"'}>
  Output resolution. Defaults to `720p`.
</ParamField>

## Next steps

<CardGroup cols={3}>
  <Card title="Models overview" icon="layer-group" href="/getting-started/models">
    Explore all available Decart models.
  </Card>

  <Card title="JavaScript SDK" icon="js" href="/sdks/javascript">
    Use Decart's native SDK for full API access.
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/DecartAI/tanstack-ai-adapter">
    View source code and contribute.
  </Card>
</CardGroup>