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

# Custom Coded Apps

> Connect your Xano backend to a custom-coded frontend using the JS SDK, standard REST calls, or AI-assisted development with your Swagger docs.

If you're building a frontend with a framework like **Next.js**, **React**, **Vue**, **Svelte**, or any other language/framework, you can connect to Xano using standard REST API calls, the official JS SDK, or by leveraging AI coding assistants with your auto-generated Swagger docs.

***

## Option 1: AI-Assisted Development with Swagger Docs

The fastest way to integrate Xano into a custom-coded app is to provide your auto-generated Swagger/OpenAPI spec to an AI coding assistant. The AI can then generate type-safe API clients, data fetching hooks, and full integration code based on your actual endpoints.

### Enabling Combined Swagger Documentation

<Snippet file="enable-combined-swagger.mdx" />

### Using with AI Coding Assistants

<AccordionGroup>
  <Accordion title="Claude Code">
    [Claude Code](https://docs.anthropic.com/en/docs/claude-code) is Anthropic's CLI tool for AI-assisted development. You can provide your Swagger spec directly to Claude Code for it to generate integration code, API clients, and types.

    1. Download your combined Swagger JSON spec from Xano and save it in your project (e.g., `docs/xano-api.json`).
    2. Reference the spec when asking Claude Code to build your integration:

    ```
    # Example: Ask Claude Code to generate an API client
    "Using the OpenAPI spec in docs/xano-api.json, generate a TypeScript
    API client with functions for each endpoint."
    ```

    Claude Code will read the spec and generate accurate code matching your actual API endpoints, request bodies, and response types.
  </Accordion>

  <Accordion title="Cursor">
    [Cursor](https://cursor.sh/) is an AI-powered IDE that can use your API documentation as context.

    1. Download your combined Swagger JSON spec and save it in your project directory.
    2. Add the spec file to your Cursor project context so the AI can reference it.
    3. Ask Cursor to generate API calls, hooks, or full pages — it will use the spec to produce accurate code.

    ```
    # Example prompt in Cursor
    "Using the OpenAPI spec, create a React hook that fetches
    the list of products with pagination support."
    ```
  </Accordion>

  <Accordion title="GitHub Copilot">
    [GitHub Copilot](https://github.com/features/copilot) can use your Swagger spec as context when generating code.

    1. Download your combined Swagger JSON spec and save it in your project.
    2. Open the spec file alongside the file you're working in, or reference it in Copilot Chat.
    3. Copilot will use the endpoint definitions to generate accurate API calls.
  </Accordion>
</AccordionGroup>

***

## Option 2: Xano JS SDK

The [Xano JS SDK](https://gitlab.com/xano/js-sdk) provides helpers for authentication, API calls, and real-time features. It works in any JavaScript/TypeScript environment (browser, Node.js, etc.).

### Installation

```bash theme={null}
npm install @xano/js-sdk
```

### Basic Usage

```ts theme={null}
import XanoClient from '@xano/js-sdk';

const xano = new XanoClient({
  instanceBaseUrl: 'https://your-instance.xano.io',
  // Optionally set a default API group
  // realtimeConnectionHash: 'your-hash' // for realtime features
});

// Make an authenticated request
xano.setAuthToken('your-jwt-token');

const response = await xano.get('/api:your-group/endpoint');
console.log(response.getBody());
```

### Authentication Flow Example

```ts theme={null}
// Sign up
const signupResponse = await xano.post('/api:your-group/auth/signup', {
  email: 'user@example.com',
  password: 'securepassword',
});
const token = signupResponse.getBody().authToken;
xano.setAuthToken(token);

// Access protected endpoint
const me = await xano.get('/api:your-group/auth/me');
console.log(me.getBody());
```

For full SDK documentation, see the [Xano JS SDK on GitLab](https://gitlab.com/xano/js-sdk).

***

## Option 3: Standard REST Calls (fetch / axios)

Xano APIs are standard REST endpoints. You can call them with `fetch`, `axios`, or any HTTP client in any language.

### Fetch Example (TypeScript)

```ts theme={null}
const XANO_BASE = 'https://your-instance.xano.io/api:your-group';

async function getProducts(page = 1) {
  const res = await fetch(`${XANO_BASE}/products?page=${page}`, {
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
  });

  if (!res.ok) throw new Error(`Xano error: ${res.status}`);
  return res.json();
}
```

### POST Example

```ts theme={null}
async function createProduct(data: { name: string; price: number }) {
  const res = await fetch(`${XANO_BASE}/products`, {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

  if (!res.ok) throw new Error(`Xano error: ${res.status}`);
  return res.json();
}
```

***

## Tips

* **Environment variables** — Store your Xano base URL and API group paths in environment variables rather than hardcoding them.
* **Authentication** — Most Xano APIs use JWT-based auth. Call your `auth/login` or `auth/signup` endpoint to get a token, then pass it in the `Authorization: Bearer <token>` header.
* **Branching** — Use [Xano branches](/team-collaboration/branching-and-merging) to develop and test backend changes without affecting your production frontend.
* **CORS** — Xano handles CORS automatically. If you run into issues, check your API group's CORS settings.