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

# Connecting a Frontend

> Connect your Xano backend to any frontend — whether you're writing code, using an AI app builder, or building with a no-code platform.

Xano works with any frontend that can make HTTP requests. How you connect depends on how you're building your app.

<Card title="Custom Coded Apps" icon="code" href="/connecting-to-a-frontend/custom-coded-apps">
  Building with Next.js, React, Vue, or another framework? Use the Xano JS SDK, standard REST calls, or let AI coding assistants like Claude Code and Cursor generate your integration from your Swagger docs.
</Card>

<Card title="AI App Builders" icon="wand-magic-sparkles" href="/connecting-to-a-frontend/ai-app-builders">
  Using Lovable, Bolt, or Replit? Import your auto-generated Swagger/OpenAPI spec and let the AI builder wire everything up for you.
</Card>

<Card title="No-Code Builders" icon="puzzle-piece" href="/connecting-to-a-frontend/no-code-builders">
  Using WeWeb, Bubble, or another no-code platform? Connect with native Xano plugins or standard REST API calls.
</Card>

***

## Xano's Auto-Generated Swagger Docs

No matter which approach you choose, Xano's auto-generated [Swagger/OpenAPI documentation](/the-function-stack/building-with-visual-development/apis/swagger-openapi-documentation) is your best friend. Every API you build is automatically documented with endpoints, request/response schemas, and authentication requirements.

<Tip>
  We recommend enabling **workspace-level (combined) Swagger documentation** so you have a single URL that covers all of your API groups. This is the easiest way to share your full API surface with any frontend tool, AI builder, or team member. See [Swagger/OpenAPI Docs](/the-function-stack/building-with-visual-development/apis/swagger-openapi-documentation) for setup instructions.
</Tip>

## Other Ways to Connect

* **[Static Hosting](/xano-features/static-hosting)** — Host your frontend directly in Xano alongside your backend.
* **[Realtime (WebSockets)](/realtime/realtime-in-xano)** — Add real-time features using the Xano JS SDK or WebSocket connections.