# Getting Started | React AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Getting Started guide for integrating the AI Autocomplete SDK with React. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/react/getting-started

---

Add AI Autocomplete to a React app in under five minutes. Works with React 17+, Next.js, Remix, and Vite.

## Install with an AI agent

Let your AI coding agent set up the integration and walk you through the two browser steps.

Paste this into your agent. It will scaffold the integration and tell you exactly what to do in the browser to finish setup.

**Agent prompt**

```bash
Install AI Autocomplete using the instructions at https://ai-autocomplete.com/install/react.md
```

Works with Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT — any agent that can read URLs and run shell commands. [View the prompt](https://ai-autocomplete.com/install/react.md)

## Install

Install the React SDK with your package manager:

**Terminal**

```bash
pnpm add @magicx-eng/ai-autocomplete-react
```

If your app doesn't already have React installed:

**Terminal**

```bash
pnpm add react react-dom
```

## Render the component

Drop the component into your app. Pass an apiConfig and an onSubmit — that's the whole minimal setup.

**App.tsx**

```tsx
import { AIAutocomplete } from "@magicx-eng/ai-autocomplete-react";

export function App() {
  return (
    <AIAutocomplete
      apiConfig={{ apiKey: import.meta.env.VITE_MAGICX_PUBLIC_KEY }}
      onSubmit={(result) => {
        console.log(result.query);            // "Create a email"
        console.log(result.raw_query);        // "Create a {{TASK_1}}"
        console.log(result.completed_params); // [{ placeholder, type, ... }]
      }}
      className="my-autocomplete"
    />
  );
}
```

## Authentication

Grab a [public key](https://ai-autocomplete.com/account/keys) from your account and set it as an environment variable. Public keys are safe to ship in client bundles.

**.env**

```bash
# Add to your .env — never commit this file
VITE_MAGICX_PUBLIC_KEY=pk_v1_your_public_key
```

Security

Public keys are scoped and safe in client bundles, but for production we recommend the secret key + access token flow — your server holds the secret key and mints short-lived tokens for the browser. See Authentication.

## What's next

Next, walk through the integration tiers to choose between the drop-in component and the headless hook, then explore the API reference.