Getting Started — React — AI Autocomplete Docs

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

Install

Install the React SDK with your package manager:

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

If your app doesn't already have React installed:

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.

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, ... }]
      }}
      placeholder="Create a"
      className="my-autocomplete"
    />
  );
}

Authentication

Grab a public key from your account and set it as an environment variable. Public keys are safe to ship in client bundles.

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

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.