> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://usekeltra.vercel.app/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

# Getting Started \[Set keltra up in an existing project]

## Overview

This guide walks you through integrating Keltra into your existing project. In just a few minutes, you will install the package, configure your asset folders, and enable type-safe path autocomplete for all your web assets.

## Quick Prompt

You can get started with Keltra by asking your AI agent to read this guide and set up the project for you.

<Prompt className="vocs:w-full vocs:max-[700px]:w-full" value="Read https://usekeltra.vercel.app/introduction/getting-started and set up Keltra for my project." />

## Quick start

Run the setup command from your project root:

:::code-group
```bash [npm]
npx keltra init
```

```bash [pnpm]
pnpm dlx keltra init
```

```bash [yarn]
yarn dlx keltra init
```

```bash [bun]
bunx keltra init
```
:::

The CLI detects your framework, asks where your assets live, installs keltra if needed, writes a `keltra.config.ts`, adds `.keltra/` to your `.gitignore`, and generates the first manifest. Add `-y` to skip the questions and accept the detected defaults. See the [CLI reference](/reference/cli) for every option.

:::info
keltra supports Vite and Next.js today. See [Framework support](/guides/frameworks) for what is coming.
:::

## Manual setup

Prefer to do it yourself? These steps match what `keltra init` does.

::::steps
### Install the package

:::code-group
```bash [npm]
npm install keltra
```

```bash [pnpm]
pnpm add keltra
```

```bash [yarn]
yarn add keltra
```

```bash [bun]
bun add keltra
```
:::

### Create a config file

Tell keltra which folders hold your assets. Files in `public/` are served as-is by Vite, so that is the default.

```ts [keltra.config.ts]
import { defineConfig } from "keltra";

export default defineConfig({
  dirs: ["public"],
});
```

See [Configuration](/reference/config) for all options.

### Add the integration for your framework

:::code-group
```ts [vite.config.ts]
import { defineConfig } from "vite";
import keltra from "keltra/vite";

export default defineConfig({
  plugins: [keltra()],
});
```

```ts [next.config.ts]
import { withKeltra } from "keltra/next";

export default withKeltra({
  // your Next.js config
});
```
:::

### Include the generated types in tsconfig

```json [tsconfig.json]
{
  "include": ["src", ".keltra/*.d.ts"]
}
```

:::warning
Use `".keltra/*.d.ts"`, not just `".keltra"`. TypeScript skips folders that start with a dot when you list them by name, so the shorter form silently loads nothing and your paths stay plain strings.
:::

### Ignore the generated folder

```bash [.gitignore]
.keltra/
```

### Start your dev server

keltra generates the manifest when the server starts and keeps it up to date while it runs.
::::

## Use typed paths

```tsx [src/App.tsx]
import { assetPath } from "keltra";
import { Img } from "keltra/image";

export default function App() {
  return (
    <>
      <img src={assetPath("/logo.svg")} alt="Logo" />
      <Img src="/images/hero.png" alt="Hero" width={1200} height={600} />
    </>
  );
}
```

Both `assetPath` and `Image` autocomplete from the files in your asset folders. A path that doesn't exist fails the type check:

```ts
assetPath("/images/hreo.png");
// Error: Argument of type '"/images/hreo.png"' is not assignable to
// parameter of type '"/images/hero.png" | "/logo.svg"'.
```

## Next steps

* Learn how the integration behaves in the [Vite guide](/guides/vite) or the [Next.js guide](/guides/nextjs).
* Run the type check in CI with [Continuous integration](/guides/ci).
* Deploying under a sub-path? Read [Deployment](/guides/deployment).