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

# Zite Developer Docs

> Zite is agent-native. Agents build your apps and answer questions on your data — and so can you. Ship apps and workflows on one database.

<div className="zx">
  <section className="zx-bleed zx-hero">
    <div className="zx-hero-grid" />

    <div className="zx-wrap zx-hero-inner">
      <input className="zx-ag-radio" type="radio" name="zx-ag" id="zx-ag-paste" defaultChecked />

      <input className="zx-ag-radio" type="radio" name="zx-ag" id="zx-ag-claude" />

      <input className="zx-ag-radio" type="radio" name="zx-ag" id="zx-ag-gpt" />

      <input className="zx-ag-radio" type="radio" name="zx-ag" id="zx-ag-cursor" />

      <input className="zx-ag-radio" type="radio" name="zx-ag" id="zx-ag-other" />

      <div className="zx-hero-copy">
        <p className="zx-kicker">For agents and developers</p>
        <h1 className="zx-h1">Build with Zite</h1>

        <p className="zx-lede">
          Connect an agent through the Zite MCP, or build with the framework and APIs.
        </p>

        <div className="zx-cta-row">
          <a className="zx-btn zx-btn-primary" href="/quickstart">Start building</a>
        </div>

        <div className="zx-agents">
          <span className="zx-agents-label">Connect your agent</span>

          <div className="zx-agents-row">
            <label className="zx-agent" htmlFor="zx-ag-claude"><img src="https://mintcdn.com/zite-js/jms34fXEIhS5q3-F/images/agents/claude.svg?fit=max&auto=format&n=jms34fXEIhS5q3-F&q=85&s=e0bb82ce0215a6c3870744eb1ca32209" alt="" width="24" height="24" data-path="images/agents/claude.svg" />Claude</label>
            <label className="zx-agent" htmlFor="zx-ag-gpt"><img src="https://mintcdn.com/zite-js/jms34fXEIhS5q3-F/images/agents/chatgpt.svg?fit=max&auto=format&n=jms34fXEIhS5q3-F&q=85&s=94b10fc5ea7210ca2a64d0a71b59afb6" alt="" width="485" height="480" data-path="images/agents/chatgpt.svg" />ChatGPT</label>
            <label className="zx-agent" htmlFor="zx-ag-cursor"><img src="https://mintcdn.com/zite-js/jms34fXEIhS5q3-F/images/agents/cursor.svg?fit=max&auto=format&n=jms34fXEIhS5q3-F&q=85&s=e6b61548711dc569414eca2564db95dc" alt="" width="467" height="532" data-path="images/agents/cursor.svg" />Cursor</label>
            <label className="zx-agent" htmlFor="zx-ag-other">Other agents</label>
          </div>

          <p className="zx-agents-hint">
            Zite is an approved Claude connector and ChatGPT app. Pick your agent — setup is one
            sign-in, no keys to manage.
          </p>
        </div>
      </div>

      <div className="zx-hero-panels">
        <div className="zx-ag-panel zx-ag-paste-panel">
          ```text title="Paste this into your agent" icon="sparkles" theme={null}
          Add the Zite MCP server (HTTP transport) at
          https://mcp.zite.com/mcp

          Then read the docs and help me build an app:
          https://developers.zite.com/llms.txt
          ```
        </div>

        <div className="zx-ag-panel zx-ag-claude-panel">
          <div className="zx-ag-card">
            <div className="zx-ag-head">
              <span className="zx-ag-title">Claude<span className="zx-ag-pill">Approved connector</span></span>

              <span className="zx-ag-actions">
                <a className="zx-ag-link" href="/mcp/connect#claude">Full guide →</a>
                <label className="zx-ag-close" htmlFor="zx-ag-paste" title="Close">✕</label>
              </span>
            </div>

            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># In claude.ai or Claude Desktop</span>
              <span className="zx-cn-line">Settings → Connectors → <span className="zx-cn-cmd">Zite</span> → <span className="zx-cn-cmd">Connect</span></span>
              <span className="zx-cn-line zx-cn-c"># Sign in with your Zite account — that's it</span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Build me a CRM for my team."</span></span>
            </div>
          </div>
        </div>

        <div className="zx-ag-panel zx-ag-gpt-panel">
          <div className="zx-ag-card">
            <div className="zx-ag-head">
              <span className="zx-ag-title">ChatGPT<span className="zx-ag-pill">Approved app</span></span>

              <span className="zx-ag-actions">
                <a className="zx-ag-link" href="/mcp/connect#chatgpt">Full guide →</a>
                <label className="zx-ag-close" htmlFor="zx-ag-paste" title="Close">✕</label>
              </span>
            </div>

            <div className="zx-cn-code">
              <span className="zx-cn-line zx-ag-btn-row"><a className="zx-ag-btn" href="https://chatgpt.com/plugins/plugin_asdk_app_6a0dfddea830819180d3eaf355793e42" target="_blank" rel="noreferrer"><img src="https://mintcdn.com/zite-js/jms34fXEIhS5q3-F/images/agents/chatgpt.svg?fit=max&auto=format&n=jms34fXEIhS5q3-F&q=85&s=94b10fc5ea7210ca2a64d0a71b59afb6" alt="" width="485" height="480" data-path="images/agents/chatgpt.svg" />Open Zite in ChatGPT ↗</a></span>
              <span className="zx-cn-line zx-cn-c"># Click Connect and authorize with your Zite account</span>
              <span className="zx-cn-line zx-cn-c"># Available on paid ChatGPT plans</span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Build me a CRM for my team."</span></span>
            </div>
          </div>
        </div>

        <div className="zx-ag-panel zx-ag-cursor-panel">
          <div className="zx-ag-card">
            <div className="zx-ag-head">
              <span className="zx-ag-title">Cursor</span>

              <span className="zx-ag-actions">
                <a className="zx-ag-link" href="/mcp/connect#cursor">Full guide →</a>
                <label className="zx-ag-close" htmlFor="zx-ag-paste" title="Close">✕</label>
              </span>
            </div>

            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># Cursor Settings → Tools & Integrations → MCP → Add</span>
              <span className="zx-cn-line"><span className="zx-cn-u">[https://mcp.zite.com/mcp](https://mcp.zite.com/mcp)</span></span>
              <span className="zx-cn-line zx-cn-c"># OAuth sign-in opens in your browser</span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Build me a CRM for my team."</span></span>
            </div>
          </div>
        </div>

        <div className="zx-ag-panel zx-ag-other-panel">
          <div className="zx-ag-card">
            <div className="zx-ag-head">
              <span className="zx-ag-title">Other MCP clients</span>

              <span className="zx-ag-actions">
                <a className="zx-ag-link" href="/mcp/connect">All guides →</a>
                <label className="zx-ag-close" htmlFor="zx-ag-paste" title="Close">✕</label>
              </span>
            </div>

            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># Any client that speaks MCP — HTTP transport, OAuth</span>
              <span className="zx-cn-line"><span className="zx-cn-u">[https://mcp.zite.com/mcp](https://mcp.zite.com/mcp)</span></span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line zx-cn-c"># Step-by-step guides for Claude Code, VS Code,</span>
              <span className="zx-cn-line zx-cn-c"># Codex, Windsurf, and Zed in the connect docs</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section className="zx-bleed zx-section zx-section-alt">
    <div className="zx-wrap">
      <p className="zx-eyebrow">Zite.js</p>
      <h2 className="zx-h2">The framework for business apps</h2>

      <p className="zx-sub">
        Portals, consoles, and the workflows behind them — in one monorepo, on one database, with roles
        and row-level rules defined once.
      </p>

      <a className="zx-inline-link" href="/framework/overview">Explore Zite.js →</a>

      <div className="zx-os">
        <input className="zx-os-radio" type="radio" name="zx-os-tab" id="zx-os-apps" defaultChecked />

        <input className="zx-os-radio" type="radio" name="zx-os-tab" id="zx-os-data" />

        <input className="zx-os-radio" type="radio" name="zx-os-tab" id="zx-os-roles" />

        <div className="zx-os-bar">
          <div className="zx-os-tabs">
            <label className="zx-os-tab" htmlFor="zx-os-apps">Apps</label>
            <label className="zx-os-tab" htmlFor="zx-os-data">Database</label>
            <label className="zx-os-tab" htmlFor="zx-os-roles">Roles</label>
          </div>
        </div>

        <div className="zx-os-body">
          <div className="zx-os-panel zx-os-apps-panel">
            <div className="zx-os-code">
              ```text title="acme-ops/" icon="folder-tree" theme={null}
              zite.schema.json          # the database
              zite.permissions.json     # roles + row-level rules
              apps/
              ├── customer-portal/      # public
              │   └── src/
              │       ├── App.tsx       # screens
              │       └── api/          # workflows
              ├── admin-console/        # internal
              └── reporting/            # dashboards
              ```
            </div>

            <div className="zx-os-viz">
              <div className="zx-surfaces">
                <div className="zx-surface">
                  <span className="zx-surface-ico">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="4" width="20" height="16" rx="2" />

                      <path d="M2 9h20" />

                      <path d="M7 4v5" />
                    </svg>
                  </span>

                  <span className="zx-surface-t">Customer portal</span>
                  <span className="zx-surface-s">Public</span>
                </div>

                <div className="zx-surface">
                  <span className="zx-surface-ico">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="3" y="3" width="18" height="18" rx="2" />

                      <path d="m7 9 3 3-3 3" />

                      <path d="M13 15h4" />
                    </svg>
                  </span>

                  <span className="zx-surface-t">Admin console</span>
                  <span className="zx-surface-s">Internal</span>
                </div>

                <div className="zx-surface">
                  <span className="zx-surface-ico">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M3 3v18h18" />

                      <path d="M18 17V9" />

                      <path d="M13 17V5" />

                      <path d="M8 17v-3" />
                    </svg>
                  </span>

                  <span className="zx-surface-t">Reporting</span>
                  <span className="zx-surface-s">Dashboards</span>
                </div>

                <div className="zx-surface">
                  <span className="zx-surface-ico">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="3" y="3" width="8" height="8" rx="2" />

                      <path d="M7 11v4a2 2 0 0 0 2 2h4" />

                      <rect x="13" y="13" width="8" height="8" rx="2" />
                    </svg>
                  </span>

                  <span className="zx-surface-t">Workflows</span>
                  <span className="zx-surface-s">Automation</span>
                </div>
              </div>
            </div>
          </div>

          <div className="zx-os-panel zx-os-data-panel">
            <div className="zx-os-code">
              ```typescript title="src/api/listTickets.ts" theme={null}
              import { createEndpoint } from 'zitejs/backend';
              import { zite } from 'zitejs/db';

              export default createEndpoint({
                authenticated: true,
                execute: async () => zite.Tickets.findAll({
                  filter: { status: 'open' },
                }),
              });
              ```
            </div>

            <div className="zx-os-viz">
              <div className="zx-db">
                <div className="zx-db-head">
                  <span className="zx-db-title"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" /><path d="M3 12a9 3 0 0 0 18 0" /></svg>Workspace database</span>
                  <span className="zx-db-pill">3 tables</span>
                </div>

                <div className="zx-db-tabs">
                  <span className="zx-db-tab zx-db-tab-on">Tickets</span>
                  <span className="zx-db-tab">Customers</span>
                  <span className="zx-db-tab">Comments</span>
                </div>

                <div className="zx-db-table">
                  <div className="zx-db-row zx-db-hd"><span>Ticket</span><span>Status</span><span>Owner</span></div>

                  <div className="zx-db-row">
                    <span className="zx-db-c1">Login button broken</span>
                    <span><span className="zx-badge zx-badge-open">Open</span></span>
                    <span className="zx-av zx-av-amber">JS</span>
                  </div>

                  <div className="zx-db-row">
                    <span className="zx-db-c1">Billing question</span>
                    <span><span className="zx-badge zx-badge-prog">In progress</span></span>
                    <span className="zx-av zx-av-green">MJ</span>
                  </div>

                  <div className="zx-db-row">
                    <span className="zx-db-c1">Password reset</span>
                    <span><span className="zx-badge zx-badge-done">Done</span></span>
                    <span className="zx-av zx-av-gray">HS</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="zx-os-panel zx-os-roles-panel">
            <div className="zx-os-code">
              ```json title="zite.permissions.json" theme={null}
              {
                "version": "1.0",
                "defaultPolicy": "deny",
                "roles": [{ "id": "role_agent", "name": "Agent" }],
                "tables": {
                  "Tickets": {
                    "rules": [{
                      "roles": ["Agent"],
                      "operations": ["read", "update"],
                      "rowFilter": {
                        "type": "comparison",
                        "field": "assigneeEmail",
                        "operator": "eq", "userField": "email"
                      }
                    }]
                  }
                }
              }
              ```
            </div>

            <div className="zx-os-viz">
              <div className="zx-db">
                <div className="zx-db-head">
                  <span className="zx-db-title"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg>Tickets</span>
                  <span className="zx-db-pill">Default: deny</span>
                </div>

                <div className="zx-db-table">
                  <div className="zx-db-row zx-db-hd zx-role-row"><span>Role</span><span>Can</span><span>Which rows</span></div>

                  <div className="zx-db-row zx-role-row">
                    <span className="zx-role-name"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>Agent</span>
                    <span className="zx-role-ops">read · update</span>
                    <span className="zx-role-scope">Assigned to them</span>
                  </div>

                  <div className="zx-db-row zx-role-row zx-role-off">
                    <span className="zx-role-name"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="m4.9 4.9 14.2 14.2" /></svg>Everyone else</span>
                    <span className="zx-role-ops">—</span>
                    <span className="zx-role-scope">No access</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section className="zx-bleed zx-section">
    <div className="zx-wrap zx-feature">
      <div className="zx-feature-text">
        <p className="zx-eyebrow">Programmatic access</p>
        <h2 className="zx-h2">APIs for everything</h2>

        <p className="zx-sub">
          REST, an official JavaScript SDK, and MCP data tools — read and write from anywhere. The Build API
          does the same for creating and deploying apps.
        </p>

        <div className="zx-feature-links">
          <a className="zx-inline-link" href="/api/overview">Database API reference →</a>
          <a className="zx-inline-link" href="/build-api/overview">Build API reference →</a>
        </div>
      </div>

      ```typescript theme={null}
      import { Zite } from 'zitejs';

      const zite = new Zite(process.env.ZITE_API_KEY);

      const { records } = await zite.record.list(dbId, tableId, {
        filter: { status: 'open' },
      });
      ```
    </div>
  </section>

  <section className="zx-bleed zx-section zx-section-alt">
    <div className="zx-wrap">
      <p className="zx-eyebrow">The platform</p>
      <h2 className="zx-h2">Four surfaces, one platform</h2>

      <div className="zx-grid zx-grid-4">
        <a className="zx-card zx-card-sm" href="/mcp/overview">
          <div className="zx-card-title">Build MCP →</div>
          <div className="zx-card-desc">Agents build and ship apps from Claude, ChatGPT, or Cursor.</div>
        </a>

        <a className="zx-card zx-card-sm" href="/framework/overview">
          <div className="zx-card-title">Zite.js →</div>
          <div className="zx-card-desc">The <code>zitejs</code> surface: DB client, workflows, auth, schedules.</div>
        </a>

        <a className="zx-card zx-card-sm" href="/api/overview">
          <div className="zx-card-title">Database API →</div>
          <div className="zx-card-desc">REST + SDK to read, write, and query your data.</div>
        </a>

        <a className="zx-card zx-card-sm" href="/build-api/overview">
          <div className="zx-card-title">Build API →</div>
          <div className="zx-card-desc">Create, build, and deploy apps programmatically.</div>
        </a>
      </div>
    </div>
  </section>

  <section className="zx-bleed zx-cta">
    <div className="zx-wrap zx-cta-inner">
      <h2 className="zx-h2">Start building on Zite</h2>

      <p className="zx-sub">
        Connect the Zite MCP and build in a cloud sandbox with your own model — no Zite credits.
      </p>

      <div className="zx-cn">
        <input className="zx-cn-radio" type="radio" name="zx-cn-tab" id="zx-cn-cc" defaultChecked />

        <input className="zx-cn-radio" type="radio" name="zx-cn-tab" id="zx-cn-claude" />

        <input className="zx-cn-radio" type="radio" name="zx-cn-tab" id="zx-cn-gpt" />

        <input className="zx-cn-radio" type="radio" name="zx-cn-tab" id="zx-cn-cursor" />

        <div className="zx-cn-bar">
          <div className="zx-cn-tabs">
            <label className="zx-cn-tab" htmlFor="zx-cn-cc">Claude Code</label>
            <label className="zx-cn-tab" htmlFor="zx-cn-claude">Claude</label>
            <label className="zx-cn-tab" htmlFor="zx-cn-gpt">ChatGPT</label>
            <label className="zx-cn-tab" htmlFor="zx-cn-cursor">Cursor</label>
          </div>
        </div>

        <div className="zx-cn-body">
          <div className="zx-cn-panel zx-cn-cc-panel">
            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># Connect the Zite MCP, then just ask</span>
              <span className="zx-cn-line"><span className="zx-cn-cmd">claude</span> mcp add --transport http zite <span className="zx-cn-u">[https://mcp.zite.com/mcp](https://mcp.zite.com/mcp)</span></span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Add a priority field and a filter, then publish."</span></span>
            </div>
          </div>

          <div className="zx-cn-panel zx-cn-claude-panel">
            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># Zite is an approved connector on claude.ai</span>
              <span className="zx-cn-line zx-cn-c"># Settings → Connectors → Zite → Connect</span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Add a priority field and a filter, then publish."</span></span>
            </div>
          </div>

          <div className="zx-cn-panel zx-cn-gpt-panel">
            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># Open the Zite app from the ChatGPT apps directory</span>
              <span className="zx-cn-line zx-cn-c"># Click Connect, then authorize</span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Add a priority field and a filter, then publish."</span></span>
            </div>
          </div>

          <div className="zx-cn-panel zx-cn-cursor-panel">
            <div className="zx-cn-code">
              <span className="zx-cn-line zx-cn-c"># MCP settings → add a server (HTTP transport, OAuth)</span>
              <span className="zx-cn-line"><span className="zx-cn-u">[https://mcp.zite.com/mcp](https://mcp.zite.com/mcp)</span></span>

              <span className="zx-cn-line zx-cn-gap" />

              <span className="zx-cn-line"><span className="zx-cn-arrow">></span> <span className="zx-cn-q">"Add a priority field and a filter, then publish."</span></span>
            </div>
          </div>
        </div>
      </div>

      <div className="zx-cta-row">
        <a className="zx-btn zx-btn-primary" href="/quickstart">Start building</a>
        <a className="zx-btn zx-btn-ghost" href="/mcp/connect">Connect an agent</a>
      </div>
    </div>

    <div className="zx-wrap zx-footer-grid">
      <div className="zx-footer-brand">
        <div className="zx-footer-logo">Zite</div>

        <div className="zx-footer-socials">
          <a href="https://x.com/zite" target="_blank" rel="noreferrer">X</a>
          <a href="https://www.linkedin.com/company/zitecom" target="_blank" rel="noreferrer">LinkedIn</a>
          <a href="https://github.com/zite/zitejs" target="_blank" rel="noreferrer">GitHub</a>
        </div>
      </div>

      <div className="zx-footer-col">
        <span className="zx-footer-h">Documentation</span>
        <a href="/quickstart">Quickstart</a>
        <a href="/mcp/overview">Build with agents</a>
        <a href="/ai-skill">For AI agents</a>
        <a href="/framework/overview">Zite.js</a>
        <a href="/api/overview">Database API</a>
        <a href="/build-api/overview">Build API</a>
      </div>

      <div className="zx-footer-col">
        <span className="zx-footer-h">Product</span>
        <a href="https://zite.com">Zite.com</a>
        <a href="https://app.zite.com">Dashboard</a>
        <a href="https://zite.com/database">Databases</a>
        <a href="https://zite.com/help">Help center</a>
      </div>

      <div className="zx-footer-col">
        <span className="zx-footer-h">Company</span>
        <a href="https://recruiting.zite.com/join-us">Careers</a>
        <a href="https://zite.com/enterprise">Enterprise</a>
        <a href="https://zite.com/blog">Blog</a>
      </div>
    </div>

    <div className="zx-wrap zx-footer-legal">
      <span>© 2026 Zite</span>

      <span className="zx-footer-legal-links">
        <a href="https://zite.com/privacy">Privacy</a>
        <a href="https://zite.com/terms">Terms</a>
      </span>
    </div>
  </section>
</div>