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

# AI-Assisted Development

> Use Claude Code with the Xano Developer MCP and the Xano CLI to build your backend with AI.

export const BrowserFrame = props => {
  const {url = "xano.run", maxWidth = 820, className = "", lightSrc, darkSrc, alt = "", children} = props || ({});
  const style = typeof maxWidth === "number" ? {
    maxWidth: `${maxWidth}px`,
    margin: "16px 0"
  } : {
    maxWidth,
    margin: "16px 0"
  };
  const hasSwapImages = Boolean(lightSrc && darkSrc);
  return <div className={`browser-frame ${className}`.trim()} style={style}>
      <div className="browser-frame__top">
        <div className="browser-frame__controls" aria-hidden="true">
          <span className="browser-frame__dot browser-frame__dot--red" />
          <span className="browser-frame__dot browser-frame__dot--yellow" />
          <span className="browser-frame__dot browser-frame__dot--green" />
        </div>
        <div className="browser-frame__address">{url}</div>
      </div>

      <div className="browser-frame__body">
        {hasSwapImages ? <>
            <img className="browser-frame__img--light" src={lightSrc} alt={alt} />
            <img className="browser-frame__img--dark" src={darkSrc} alt={alt} />
          </> : children}
      </div>
    </div>;
};

The following guide walks you through setting up an AI-powered [XanoScript](xanoscript/introduction) development workflow in **VS Code** using **Claude Code**, the **Xano Developer MCP**, and the **Xano CLI**.

**Prerequisites:** [Node.js](https://nodejs.org/) 18+, [VS Code](https://code.visualstudio.com/), and [Git](https://git-scm.com/downloads) installed.

<Note>
  This guide uses Claude Code, but the Developer MCP works with Cursor, Codex, Windsurf, VS Code Copilot, and other MCP-compatible AI tools. See the [Developer MCP guide](/developer-mcp/get-started) for platform-specific setup.
</Note>

<Steps>
  <Step title="Install Claude Code">
    Install [Claude Code](https://docs.anthropic.com/en/docs/claude-code/overview) — the AI assistant you'll use to write and modify XanoScript locally.

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      npm install -g @anthropic-ai/claude-code
      ```
    </BrowserFrame>
  </Step>

  <Step title="Install the Xano CLI and pull your workspace">
    Open your terminal and install the [Xano CLI](/xano-cli/get-started) globally using npm:

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      npm install -g @xano/cli
      ```
    </BrowserFrame>

    Then authenticate and pull your workspace:

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      xano auth
      xano workspace pull -d ./my-workspace
      ```
    </BrowserFrame>

    This creates a `my-workspace` folder in your current directory and downloads your workspace into it. You can also pull into the current folder with `xano workspace pull .`

    <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/githublogo_light.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=7dca4ac53d7714c0be1c31479bf09a64" size={16} width="1024" height="1024" data-path="images/icons/githublogo_light.svg" /><Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/githublogo_dark.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=f7cbc0394ba9e71c3ec33e07c86b85ae" size={16} width="1024" height="1024" data-path="images/icons/githublogo_dark.svg" /> Next, we recommend initializing a Git repository in your workspace folder so you can track and review the details of what changed before each push.

    See the [CLI Get Started](/xano-cli/get-started) guide for full details.
  </Step>

  <Step title="Open the workspace in VS Code">
    Open the pulled workspace folder in VS Code, then install the [XanoScript Language Server](https://marketplace.visualstudio.com/items?itemName=xano.xanoscript-language-server) extension. This provides syntax highlighting, inline validation, and autocomplete for `.xs` files — without it, they appear as plain text with no error feedback.

    <Warning>
      **Already using the full XanoScript extension?** If you want to keep it for push/pull, that's fine — but delete any `agents.md` or other `.md` artifact files it created in your workspace root, as these can conflict with the Developer MCP and confuse AI assistants. For the best experience, we recommend using the [XanoScript Language Server](https://marketplace.visualstudio.com/items?itemName=xano.xanoscript-language-server) extension alongside the CLI for push/pull.
    </Warning>
  </Step>

  <Step title="Install the Developer MCP with Claude Code">
    The [Developer MCP](/developer-mcp/get-started) gives AI tools direct access to XanoScript documentation and real-time code validation, significantly improving AI-generated XanoScript quality.

    In the VS Code terminal, add the Developer MCP to your project:

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      claude mcp add xano -- npx -y @xano/developer-mcp
      ```
    </BrowserFrame>

    <Tip>
      Not using Claude Code? See the [Developer MCP guide](/developer-mcp/get-started) for setup instructions for Cursor, Windsurf, Codex, VS Code Copilot, and other AI tools.
    </Tip>
  </Step>

  <Step title="Ask Claude Code to make a change">
    Launch Claude Code in VS Code and ask it to make a change. For example:

    > Add a step to the auth/signup endpoint that sends a welcome email after a successful registration.

    Claude Code will read your existing XanoScript, plan the change, and write the updated code — with the Developer MCP providing documentation and validation along the way.
  </Step>

  <Step title="Review your changes">
    Before pushing, review what the AI changed against your local repository. Pay attention to any table schema changes — renamed or removed columns can affect existing data.

    The CLI is safe by default: objects deleted locally won't be removed from your Xano workspace unless you explicitly use the `--delete` flag. If any changes would result in data loss — like dropping a column or deleting a table — the push preview will call them out as destructive operations before you confirm. See [Push & Pull](/xano-cli/push-pull#push-preview) for a full breakdown of what each operation means.

    <Tip>
      Work on a [development branch](/xano-cli/workspaces-and-branches#create-a-branch) to keep your changes separate from the live branch, or use a **secondary workspace** as your development environment to keep your data schema isolated before promoting to production.
    </Tip>
  </Step>

  <Step title="Sync to Xano">
    Once you've reviewed your changes, head back to your terminal and run the push yourself — we recommend **not** asking the AI agent to push for you, so you stay in control of what gets applied. See [Using the CLI with AI Agents](/xano-cli/get-started#using-the-cli-with-ai-agents) for tips on managing agent permissions and keeping pushes safe.

    <Note>
      **On paid plans**, `xano workspace push` is blocked by default and prompts you to first push to a [Sandbox](/xano-cli/sandbox) — an ephemeral tenant environment where you can test changes, inspect the snapshot diff, and promote them to your workspace. Use `xano sandbox push -d ./my-workspace` and `xano sandbox review` before running the workspace push below.
    </Note>

    Start with a dry run to preview what the push will do without applying anything:

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      xano workspace push -d ./my-workspace --dry-run
      ```
    </BrowserFrame>

    Review the output carefully, especially any destructive operations or schema changes. When you're ready, run the actual push:

    <BrowserFrame url="Terminal">
      ```bash theme={null}
      xano workspace push -d ./my-workspace
      ```
    </BrowserFrame>

    The CLI shows the same preview again and prompts for confirmation before applying anything.

    <img src="https://mintcdn.com/xano-997cb9ee/kSICa8T_Xd1c9B9B/images/CLI-push-preview-changes.png?fit=max&auto=format&n=kSICa8T_Xd1c9B9B&q=85&s=ef502d2d5f1fd1bc720d4a380678ea1c" alt="CLI push preview — remote only" width="1311" height="1188" data-path="images/CLI-push-preview-changes.png" />
  </Step>

  <Step title="Call the modified API">
    Send a POST request to your auth/signup endpoint and review the results.

    ```bash theme={null}
    curl -X POST "https://your-xano-instance.xano.io/api:abcD123/auth/signup" \
    -H "Content-Type: application/json" \
    -d '{
      "name": "John Doe",
      "email": "john.doe@example.com",
      "password": "super_secure_password"
    }'
    ```

    You should receive a welcome email shortly after the request completes.
  </Step>

  <Step title="Visually validate the change in Xano">
    *This step is optional, but you can quickly see the parity between your code and the visual representation.*

    Head into Xano, and navigate to your `auth/signup` API by clicking <span class="ui-bubble">API</span> in the sidebar, choose the **Authentication** group, and click `auth/signup`.

    You should see the *Send Email* step at the end of the logic, right after the *Create Authentication Token* step.

    <img src="https://mintcdn.com/xano-997cb9ee/TxMj3xizKt6xZHgd/images/getting-started-code-20260112-103534.png?fit=max&auto=format&n=TxMj3xizKt6xZHgd&q=85&s=8326b1977574207c7fc71298d4771041" alt="getting-started-code-20260112-103534" width="1428" height="434" data-path="images/getting-started-code-20260112-103534.png" />
  </Step>
</Steps>

## <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/Cursor_light.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=c42cd27f6fa1b802cadd5a3514d7ff46" size={24} width="467" height="532" data-path="images/icons/Cursor_light.svg" /><Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/Cursor_dark.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=1f452577be9e9670a609608506ab5895" size={24} width="467" height="532" data-path="images/icons/Cursor_dark.svg" /> <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/OpenAI_light.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=8c4486c571ab4c35fe7843ed31718c04" size={24} width="256" height="260" data-path="images/icons/OpenAI_light.svg" /><Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/OpenAI_dark.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=21a3306ede3f58c2015e3451bc111529" size={24} width="256" height="260" data-path="images/icons/OpenAI_dark.svg" /> <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/vscode.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=bb6c91058fcbe6ee28fcda04e03de2e6" size={24} width="100" height="100" data-path="images/icons/vscode.svg" /> <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/Windsurf_light.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=ad7fc1569a810d534939040c60c6cc78" size={24} width="1024" height="1024" data-path="images/icons/Windsurf_light.svg" /><Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/Windsurf_dark.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=2980a14b21d7c580ffac4b5493d2102c" size={24} width="1024" height="1024" data-path="images/icons/Windsurf_dark.svg" /> Using a different AI tool?

The Developer MCP isn't limited to Claude Code — it works with any AI tool that supports the Model Context Protocol. See the [Developer MCP guide](/developer-mcp/get-started) for platform-specific setup instructions.

* **[Cursor](/developer-mcp/get-started#cursor)** — Add the MCP server via Settings > Tools & Integrations.
* **[Windsurf](/developer-mcp/get-started#windsurf)** — Add the MCP server via Settings > Cascade > Manage Plugins.
* **[Codex](/developer-mcp/get-started#codex)** — Add a `.codex/mcp.json` file to your project.
* **[VS Code Copilot](/developer-mcp/get-started#vs-code)** — Add a `.vscode/mcp.json` file to your project.

***

## What's next

<CardGroup cols={2}>
  <Card title="Developer MCP" icon="plug" href="/developer-mcp/get-started">
    Explore the full set of tools and resources the Developer MCP exposes to your AI assistant.
  </Card>

  <Card title="CLI Reference" icon="terminal" href="/xano-cli/get-started">
    Learn about push, pull, branching, workflow tests, and more with the Xano CLI.
  </Card>

  <Card title="Logic & Workflows" icon="brain" href="/building/logic/logic">
    Dive deeper into the logic that powers your APIs, functions, and background tasks.
  </Card>

  <Card title="AI Agents" icon="robot" href="/ai-tools/agents">
    Build AI agents in Xano that can reason, use tools, and take actions.
  </Card>
</CardGroup>
