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

# VS Code + AI

> Install the Xano Developer MCP in VS Code with GitHub Copilot or any AI CLI agent

export const YouTube = props => {
  const {id, url, title = "YouTube video player", maxWidth = 820, start, className = ""} = props || ({});
  const extractId = value => {
    if (!value) return "";
    if ((/^[A-Za-z0-9_-]{6,}$/).test(value) && !value.includes("/")) {
      return value;
    }
    try {
      const u = new URL(value);
      if (u.hostname.includes("youtu.be")) {
        return u.pathname.split("/").filter(Boolean)[0] || "";
      }
      const v = u.searchParams.get("v");
      if (v) return v;
      const parts = u.pathname.split("/").filter(Boolean);
      const idx = parts.findIndex(p => ["embed", "shorts", "live", "v"].includes(p));
      if (idx !== -1 && parts[idx + 1]) return parts[idx + 1];
      return parts[parts.length - 1] || "";
    } catch {
      const m = value.match(/[A-Za-z0-9_-]{11}/);
      return m ? m[0] : "";
    }
  };
  const videoId = extractId(id || url);
  if (!videoId) return null;
  const params = new URLSearchParams();
  if (start) params.set("start", String(start));
  const query = params.toString();
  const src = `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
  const style = typeof maxWidth === "number" ? {
    maxWidth: `${maxWidth}px`,
    margin: "16px 0"
  } : {
    maxWidth,
    margin: "16px 0"
  };
  return <div className={`youtube-embed ${className}`.trim()} style={style}>
      <iframe style={{
    width: "100%",
    aspectRatio: "16 / 9",
    border: "0",
    borderRadius: "12px"
  }} src={src} title={title} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />
    </div>;
};

export const InstallButton = props => {
  const {href, src, alt = "", height = 32, newTab = false} = props || ({});
  const target = newTab ? "_blank" : undefined;
  const rel = newTab ? "noopener noreferrer" : undefined;
  return <a href={href} target={target} rel={rel} style={{
    display: "inline-block",
    lineHeight: 0,
    textDecoration: "none",
    borderBottom: "none",
    cursor: "pointer"
  }}>
      <img src={src} alt={alt} style={{
    height: `${height}px`,
    width: "auto",
    maxWidth: "none",
    pointerEvents: "none"
  }} />
    </a>;
};

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>;
};

<YouTube url="https://youtu.be/j8zcj7b1lLw" />

This page covers using the Xano Developer MCP inside VS Code. The primary path is **GitHub Copilot**, since it's the AI assistant built into VS Code itself. Other AI CLI agents (Claude Code, Codex, Gemini CLI) work just as well from VS Code's integrated terminal — quick-setup instructions for each are at the bottom of the page.

## Prerequisites

* [Node.js](https://nodejs.org/) 18 or later
* [VS Code](https://code.visualstudio.com/) with the [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) extensions installed
* An active GitHub Copilot subscription

## Installation

### 1. Install the MCP Server

**Method 1: Click to install**

<InstallButton href="vscode:mcp/install?%7B%22name%22%3A%22Xano%20Developer%20MCP%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40xano%2Fdeveloper-mcp%22%5D%7D" src="https://img.shields.io/badge/VS_Code-Install_the_Xano_Developer_MCP-0098FF?style=flat&logo=visualstudiocode&logoColor=ffffff" alt="Install the Xano Developer MCP in VS Code" height={20} />

**Method 2: Manual install**

1. Open the Command Palette by pressing <span class="ui-bubble">⌘ / Ctrl + P</span> and type MCP. Click **MCP: Add Server**
2. Choose **Command (stdio)** and provide the command `npx -y @xano/developer-mcp`
3. Give the server a name, such as *Xano Developer MCP*
4. Choose whether to enable the MCP in the open workspace only, or for the entire profile

### 2. Install the XanoScript Language Server extension

The Language Server extension is required for the best AI-assisted XanoScript experience — it provides code completion, syntax highlighting, and inline diagnostics that every AI tool on this page (Copilot, Claude Code, Codex, Gemini CLI) reads from.

Install it from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=xano.xanoscript-language-server).

![XanoScript Language Server](https://storage.googleapis.com/xanoscript-vscode/inline-help.gif)

### 3. Verify Setup

In Copilot Chat, ask:

> "What version of the Xano Developer MCP is installed?"

Copilot should call `mcp_version` and return the current version number.

<img src="https://mintcdn.com/xano-997cb9ee/yEOpOinJ6jTNozta/images/vs-code-copilot-20260508-114032.png?fit=max&auto=format&n=yEOpOinJ6jTNozta&q=85&s=2b2baabf0995a0b372136a671b60b534" alt="vs-code-copilot-20260508-114032" width="869" height="580" data-path="images/vs-code-copilot-20260508-114032.png" />

## Using Copilot

The Developer MCP lets Copilot write and validate XanoScript using your local Xano workspace as context.

Before asking Copilot to make changes, pull a workspace locally with the Xano CLI. If you haven't installed and authenticated with the CLI yet, [do that now](/xano-cli/get-started) before continuing. Then select or create a workspace and run:

```bash theme={null}
xano workspace pull
```

Once your workspace is available locally, you can ask Copilot to help with XanoScript tasks, from building a complete workspace:

```bash theme={null}
Create a small backend for advisor client intake. It should include a `clients` table with fields for name, email, phone, risk tolerance, investment objective, and advisor notes. Add API endpoints to create a client, list clients, get a single client by ID, and update client details. Include validation for required fields and valid risk tolerance values.
```

<Expandable title="See the result">
  Copilot creates a small advisor client intake backend for storing and managing client profile details.

  The generated backend includes a `clients` table with fields for the client's name, email, phone number, risk tolerance, investment objective, advisor notes, and timestamps. The email field is stored as a unique value, so duplicate client records cannot be created with the same email address.

  It also adds a `clients` API group with endpoints to:

  * Create a new client
  * List clients with pagination and sorting
  * Get a single client by ID
  * Update an existing client

  The generated XanoScript includes validation for required fields, supported risk tolerance values, duplicate email addresses, and missing client records. Before pushing the changes, Copilot validates the generated XanoScript with the Developer MCP and the XanoScript Language Server, and fixes any issues it finds.
</Expandable>

You can also ask it to expand or iterate on existing backends.

```bash theme={null}
Add a follow-up task feature to the advisor client intake backend. Create a `client_tasks` table linked to clients, with fields for task title, due date, status, and notes. Add API endpoints to create a task for a client, list all tasks for a client, and mark a task as complete.
```

<Expandable title="See the result">
  Copilot extends the advisor client intake backend with a follow-up task feature for managing next steps after a client profile is created.

  The updated backend keeps the existing `clients` table and API endpoints for creating, listing, retrieving, and updating client records. It also adds a new `client_tasks` table linked to the `clients` table, so each task belongs to a specific client.

  The `client_tasks` table includes fields for the related client, task title, due date, status, notes, and timestamps. Task status supports values like `pending`, `in_progress`, and `completed`, making it possible to track where each follow-up task stands.

  The backend also adds new API endpoints to:

  * Create a follow-up task for a client
  * List all follow-up tasks for a client
  * Mark a follow-up task as complete

  The generated XanoScript includes checks for missing clients, missing task titles, valid task statuses, and missing task records. Before pushing the changes, Copilot validates the updated XanoScript with the Developer MCP and fixes any issues it finds.
</Expandable>

Check out the [full example backend](https://github.com/xano-community/client-intake) on Github.

Once you're ready, push the changes to your sandbox so you can review them in the browser before promoting to your live workspace:

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

`xano sandbox review` opens your sandbox in the browser — verify everything looks right, then promote the changes to production from there.

***

## Using Claude Code, Gemini, Codex, or another CLI

Prefer a CLI agent over Copilot? Each of these runs in VS Code's integrated terminal (`View → Terminal`). Setup is identical to the standalone install — the sections below cover the quick install plus VS Code-specific quirks. Full guides for each agent are linked at the end of every section.

<Note>
  Install the [XanoScript Language Server extension](#2-install-the-xanoscript-language-server-extension) (Step 2 above) before continuing. Every CLI agent on this page depends on it for inline syntax help and diagnostics — don't skip it.
</Note>

### <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/claude-ai-icon.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=b9de3a97860e4296c6d48664852a8e16" width="256" height="257" data-path="images/icons/claude-ai-icon.svg" /> Claude Code

In the integrated terminal:

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

Add `--scope user` to make the server available across every project rather than just the open workspace.

→ Full guide: [Claude Code](/developer-mcp/clients/claude-code)

### <Icon icon="https://mintcdn.com/xano-997cb9ee/aZQYcxhIvSDTNEim/images/icons/OpenAI_light.svg?fit=max&auto=format&n=aZQYcxhIvSDTNEim&q=85&s=8c4486c571ab4c35fe7843ed31718c04" 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" width="256" height="260" data-path="images/icons/OpenAI_dark.svg" /> Codex

Install Codex if you don't already have it, then add the MCP — both run in the integrated terminal:

<BrowserFrame url="Terminal">
  ```bash theme={null}
  npm install -g @openai/codex
  codex mcp add xano -- npx -y @xano/developer-mcp
  ```
</BrowserFrame>

→ Full guide: [Codex](/developer-mcp/clients/codex)

### <Icon icon="https://mintcdn.com/xano-997cb9ee/iFWc-RFvMkYTid3P/images/icons/gemini.svg?fit=max&auto=format&n=iFWc-RFvMkYTid3P&q=85&s=b1868b87c460669c476c1d136ef95ebe" width="24" height="24" data-path="images/icons/gemini.svg" /> Gemini CLI

Edit `~/.gemini/settings.json` (user-wide) or `.gemini/settings.json` at the workspace root (project-only) and add:

```json theme={null}
{
  "mcpServers": {
    "xano": {
      "command": "npx",
      "args": ["-y", "@xano/developer-mcp"]
    }
  }
}
```

Then start `gemini` from the integrated terminal.

→ Full guide: [Gemini CLI](/developer-mcp/clients/gemini-cli)

***

## FAQ & Troubleshooting

<Steps>
  <Step title="The AI is writing invalid XanoScript, or you keep having to validate manually.">
    Make sure you installed the [XanoScript Language Server](https://marketplace.visualstudio.com/items?itemName=xano.xanoscript-language-server) extension. It applies to every AI tool on this page.
  </Step>

  <Step title="The AI doesn't seem to know about the Xano tools.">
    Confirm the `xano` MCP server is registered and connected:

    * **Copilot:** check the MCP servers list in VS Code's settings.
    * **Claude Code:** run `/mcp` inside a session, or `claude mcp list` in the terminal.
    * **Codex:** run `codex mcp list`.
    * **Gemini CLI:** run `/mcp` inside a session.

    If the server isn't registered, re-run the install step. If it is registered but disconnected, restart the session — newly added servers don't take effect until a fresh start.
  </Step>

  <Step title="I asked the AI to write a fresh backend, but it did it in something other than XanoScript.">
    1. Did you install the Language Server extension?
    2. Did you authenticate with the CLI and pull a workspace (even a new, blank workspace)?
  </Step>

  <Step title="I want this MCP available across every project, not just one workspace.">
    Each tool scopes differently:

    * **Copilot:** during MCP install, choose the profile-wide option instead of workspace-only.
    * **Claude Code:** add `--scope user` to the install command.
    * **Codex:** the `codex mcp add` command registers the server user-wide by default.
    * **Gemini CLI:** put the `mcpServers` block in `~/.gemini/settings.json` rather than `.gemini/settings.json` at the project root.
  </Step>
</Steps>

***

## What's Next

<CardGroup cols={2}>
  <Card title="Tools Reference" icon="wrench" href="/developer-mcp/tools">
    Explore all 6 tools available in the Developer MCP
  </Card>

  <Card title="Resources & Library" icon="book" href="/developer-mcp/resources">
    Access MCP resources and use the package as an npm library
  </Card>
</CardGroup>