Skip to main content
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

​
Using with AI Coding Assistants

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.
Cursor 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."
GitHub 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.

​
Option 2: Xano JS SDK

The 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

npm install @xano/js-sdk

​
Basic Usage

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

// 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.

​
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)

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

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 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.