### Quick Start: Agent Action Configuration

Source: https://www.sanity.io/docs/agent-actions/translate-cheatsheet

A quick start example demonstrating the basic configuration for an agent action, including ID, title, and protected phrases.

```javascript
self.__next_f.push([1,"33:[[\"$\",\"nav\",null,{\"className\":\"space-y-8 pl-12 pt-16\",\"children\":[[\"$\",\"h6\",null,{\"className\":\"text-interactive-lg py-8 !font-semibold\",\"children\":\"Agent Actions\"}], [\"$\",\"$L6f\",\"overview\",{\"item\":{\"_key\":\"overview\",\"articleId\":\"184f783c-d99a-4b83-865b-3767d3ae4cbb\",\"hidden\":null,\"primarySectionSlug\":\"agent-actions\",\"primarySectionTitle\":null,\"slug\":\"\",\"title\":\"Overview\",\"type\":\"article\"},\"sectionSlug\":\"agent-actions\"}], [\"$\",\"hr\",null,{\"className\":\"h-px border-border-hairline py-8\"}], [\"$\",\"ul\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"li\",\"6797bcfe589e\",{\"children\":[[\"$\",\"$L6f\",null,{\"item\":{\"_key\":\"6797bcfe589e\",\"articleId\":\"efee74ab-1136-44c3-8085-bb12bee3d16d\",\"hidden\":null,\"primarySectionSlug\":\"agent-actions\",\"primarySectionTitle\":\"Agent Actions\",\"slug\":\"introduction\",\"title\":\"Introduction\",\"type\":\"article\"},\"sectionSlug\":\"agent-actions\"}]], [\"$\",\"li\",\"18f90b212da7\",{\"children\":[[\"$\",\"$L6f\",null,{\"item\":{\"_key\":\"18f90b212da7\",\"articleId\":\"5ee515da-e61e-4df9-ab4a-e60d3dabd6f7\",\"hidden\":null,\"primarySectionSlug\":\"agent-actions\",\"primarySectionTitle\":\"Agent Actions\"}]}]}]}]}]})\n"])
```

--------------------------------

### Install Specific Package

Source: https://www.sanity.io/docs/help/cli-errors

Example of installing a specific package, which might fail due to permissions.

```bash
npm install next-sanity@7
```

--------------------------------

### Install Remix App with Live Preview Template

Source: https://www.sanity.io/guides/remix-run-live-preview

Use this command to create a new Remix application with the specified template and install dependencies. Navigate into the project directory and start the development server.

```sh
# from the command line
npx create-remix@latest remix-live-preview --template SimeonGriggs/remix-tailwind-typography --install

# enter the Remix application's directory
cd remix-live-preview

# run the development server
npm run dev
```

--------------------------------

### Basic Server Setup for Visual Editing

Source: https://www.sanity.io/docs/visual-editing/build-a-visual-editing-integration

This example demonstrates a basic server setup using Node.js's http module and the @portabletext/to-html package. It's a foundational piece for enabling visual editing functionalities.

```javascript
import { createServer } from 'node:http'
import { toHTML } from '@portabletext/to-html'
```

--------------------------------

### App SDK Quickstart Guide Card

Source: https://www.sanity.io/docs/app-sdk

Card linking to the App SDK Quickstart Guide. Use this to get started quickly with the Sanity App SDK.

```jsx
self.____next_f.push([
  1,
  "4f:[
    [
      \"$\",
      \"div\",
      \"caa8945240b4\",
      {
        \"className\": \"my-24 @container\",
        \"children\": [
          [
            \"$\",
            \"$L53\",
            null,
            {
              \"className\": \"mb-24\",
              \"id\": \"caa8945240b4\",
              \"children\": [
                [
                  \"$\",
                  \"div\",
                  null,
                  {
                    \"className\": \"_eyebrow_129xv_1\",
                    \"children\": [
                      [
                        \"$\",
                        \"span\",
                        null,
                        {
                          \"className\": \"_eyebrowInner_129xv_5\",
                          \"children\": \"Get started\"
                        }
                      ],
                      false
                    ]
                  }
                ]
              ]
            }
          ],
          [
            \"$\",
            \"div\",
            null,
            {
              \"className\": \"grid gap-24 @lg:grid-cols-2 @2xl:grid-cols-3 @7xl:grid-cols-4\",
              \"children\": [
                [
                  \"$\",
                  \"$L54\",
                  \"078b0cb5c921\",
                  {
                    \"href\": \"/docs/app-sdk/sdk-quickstart\",
                    \"prefetch\": \"$undefined\",
                    \"className\": \"grid overflow-hidden rounded-lg bg-bg-base transition-colors hover:!bg-bg-dim\",
                    \"data-card\": true,
                    \"target\": \"$undefined\",
                    \"children\": [
                      false,
                      [
                        \"$\",
                        \"div\",
                        null,
                        {
                          \"className\": \"flex flex-col p-24\",
                          \"children\": [
                            [
                              \"$\",
                              \"h4\",
                              null,
                              {
                                \"className\": \"component-heading-sm mb-8\",
                                \"children\": \"App SDK Quickstart Guide\"
                              }
                            ],
                            [
                              \"$\",
                              \"p\",
                              null,
                              {
                                \"className\": \"text-description line-clamp-2 text-fg-dim\",
                                \"children\": \"Get up and running quickly with the Sanity App SDK .\"
                              }
                            ]
                          ]
                        }
                      ]
                    ]
                  }
                ],
                [
                  \"$\",
                  \"$L54\",
                  \"91a19f281954\",
                  {
                    \"href\": \"/docs/app-sdk/sdk-introduction\",
                    \"prefetch\": \"$undefined\",
                    \"className\": \"grid overflow-hidden rounded-lg bg-bg-base transition-colors hover:!bg-bg-dim\",
                    \"data-card\": true,
                    \"target\": \"$undefined\",
                    \"children\": [
                      false,
                      [
                        \"$\",
                        \"div\",
                        null,
                        {
                          \"className\": \"flex flex-col p-24\",
                          \"children\": [
                            [
                              \"$\",
                              \"h4\",
                              null,
                              {
                                \"className\": \"component-heading-sm\"
                              }
                            ]
                          ]
                        }
                      ]
                    ]
                  }
                ]
              ]
            }
          ]
        ]
      }
    ]
  ]
])
```

--------------------------------

### Welcome Event Example

Source: https://www.sanity.io/docs/content-lake/realtime-updates

This event is sent when a listener is successfully set up. It can be used to trigger initial data fetching or other setup tasks.

```text
event: welcome
data: { "listenerName": "Ua6BR3GwQ14cnZXrgwCdsF" }

```

--------------------------------

### Define a simple document action component

Source: https://www.sanity.io/docs/studio/document-actions

This component displays an alert when clicked. It's a basic example to get started with custom actions.

```javascript
import { DocumentAction } from 'sanity';

export const HelloWorldAction: DocumentAction = {
  name: 'hello-world',
  useAction: (context) => {
    return {
      label: 'Hello World',
      onAction: () => {
        alert('Hello World!');
      },
    };
  },
};
```

--------------------------------

### Server-side Setup with createQueryStore

Source: https://www.sanity.io/docs/visual-editing/live-preview-content-updates

Demonstrates the server-side setup required for live preview, including importing `createQueryStore` from '@sanity/core-loader'. It also shows how to initialize the query store with `client: false` when SSR is enabled.

```javascript
// Server-side setup
import { createQueryStore } from '@sanity/core-loader'

// When ssr is true, pass client: false (passing a client throws an error)
const queryStore = createQueryStore
```

--------------------------------

### Sanity Functions Navigation Structure

Source: https://www.sanity.io/docs/functions/function-quickstart

This snippet outlines the navigation structure for Sanity Functions documentation, including sections for getting started, concepts, guides, and reference.

```json
self.__next_f.push([
  1,
  "93:[\"$\",\"$Lc5\",null,{\"navigationData\":{\"_id\":\"056ce0f0-7233-49f0-ab0b-abe3f8fc98c3\",\"_type\":\"docsNavSection\",\"disableArticleIndexing\":false,\"items\":[\"$33:0:props:children:3:props:children:0:props:children:props:item\",{\"_key\":\"b89ab9f28809\",\"children\":[\"$33:0:props:children:3:props:children:1:props:children:props:children:1:0:props:item\",\"$33:0:props:children:3:props:children:1:props:children:props:children:1:1:props:item\",\"$33:0:props:children:3:props:children:1:props:children:props:children:1:2:props:item\",\"$33:0:props:children:3:props:children:1:props:children:props:children:1:3:props:item\",\"$33:0:props:children:3:props:children:1:props:children:props:children:1:4:props:item\"],\"title\":\"Get started\",\"type\":\"section\"},{\"_key\":\"66bc870bcbc1\",\"children\":[\"$33:0:props:children:3:props:children:2:props:children:props:children:1:0:props:item\",\"$33:0:props:children:3:props:children:2:props:children:props:children:1:1:props:item\"],\"title\":\"Concepts\",\"type\":\"section\"},{\"_key\":\"4f72e3eada8a\",\"children\":[\"$33:0:props:children:3:props:children:3:props:children:props:children:1:0:props:item\",\"$33:0:props:children:3:props:children:3:props:children:props:children:1:1:props:item\",\"$33:0:props:children:3:props:children:3:props:children:props:children:1:2:props:item\",\"$90:props:item\"],\"title\":\"Guides\",\"type\":\"section\"},{\"_key\":\"9ecb86619aa0\",\"children\":[\"$92:props:children:props:children:1:0:props:item\",\"$92:props:children:props:children:1:1:props:item\"],\"title\":\"Reference\",\"type\":\"section\"}],\"overview\":{\"_id\":\"97ec9e17-90bd-4d59-bcaf-5c04aabcee8f\",\"articleId\":\"97ec9e17-90bd-4d59-bcaf-5c04aabcee8f\",\"slug\":\"functions\",\"title\":\"Deploy custom functions to automate content\"}]}

```

--------------------------------

### HTTP GET Request Example

Source: https://www.sanity.io/docs/platform-management/reference-api-request-tags

Demonstrates a basic HTTP GET request structure, likely used within the Sanity.io Reference API context. This snippet shows the initial part of a request, indicating the HTTP method and potentially the start of a resource path.

```http
GET 
```

--------------------------------

### Start Preview Server (Custom Host)

Source: https://www.sanity.io/docs/llms-full.txt

Starts a local server to preview a production build, listening on a specified host.

```sh
sanity preview --host=0.0.0.0
```

--------------------------------

### Basic AI Assist Field Actions Setup

Source: https://www.sanity.io/docs/studio/field-actions-patterns

This is the basic configuration for adding custom field actions to AI Assist. Ensure you have installed and configured AI Assist and reviewed the field action guide.

```typescript
import {
  defineConfig
} from 'sanity'
import { assist } from '@sanity/assist'

export default defineConfig({
  // ... rest of your config
  plugins: [
    // ... rest of plugins,
    assist({
      fieldActions: {
        title: "My Actions",
        useFieldActions: (props) => {
          // add field action setup here
        }
      }
    })
  ]
})
```

--------------------------------

### Initialize Sanity App with Quickstart Template

Source: https://reference.sanity.io/_sanity/sdk-react

Use this command to initialize a new Sanity project with the app-quickstart template. Navigate into the project directory and run the development server.

```bash
npx sanity@latest init --template app-quickstart
cd your-app
npm run dev
```

--------------------------------

### Navigate to Project Directory

Source: https://www.sanity.io/docs/visual-editing/build-a-visual-editing-integration

Change into the newly created project directory to begin installing dependencies and configuring your integration.

```bash
cd visual-editing-demo
```

--------------------------------

### Get Robot - HTTP Request Example

Source: https://www.sanity.io/docs/http-reference/access-api

An example of an HTTP GET request to retrieve robot metadata from the Sanity.io API.

```http
GET /v2025-07-11/access/{resourceType}/{resourceId}/robots/{robotId} HTTP/1.1
Host: api.sanity.io
Authorization: Bearer <your_api_token>

https://api.sanity.io/v2025-07-11/access/{resourceType}/{resourceId}/robots/{robotId}
```

--------------------------------

### Start Preview Server (Custom Output Directory)

Source: https://www.sanity.io/docs/llms-full.txt

Starts a local server to preview a production build located in a specific output directory.

```sh
sanity preview some/build-output-dir
```

--------------------------------

### Example Studio Setup for Shopify

Source: https://www.sanity.io/docs/apis-and-sdks/sanity-connect-for-shopify

This repository contains an example studio setup for Shopify integration. It showcases customizations implemented when creating a new studio with the 'shopify' template.

```link
https://github.com/sanity-io/cli/tree/main/packages/%40sanity/cli/templates/shopify
```

--------------------------------

### Initialize project with template, project ID, dataset, and path

Source: https://www.sanity.io/docs/cli-reference/init

Initializes a new project using a specific template ('moviedb') with a given project ID, dataset, and output path, all in unattended mode.

```bash
$ sanity init -y --project abc123 --dataset staging --template moviedb --output-path .
```

--------------------------------

### Fetch Content Using HTTP GET

Source: https://www.sanity.io/docs/apis-and-sdks/content-releases-cheat-sheet

This example shows how to fetch content from Sanity using an HTTP GET request. It includes the necessary endpoint structure and an example of an Authorization header.

```http
GET
```

--------------------------------

### Get Dataset Grants Example

Source: https://www.sanity.io/docs/http-reference/roles

Example JSON response for retrieving all grants for a dataset.

```json
{
  "sanity.document.filter.mode": [
    {
      "grants": [
        {
          "name": "mode",
          "params": {
            "mode": "publish",
            "history": true,
            "datasetPolicyName": "default"
          }
        }
      ],
      "config": {
        "filter": "_id in path(\"**\")"
      }
    }
  ]
}
```

--------------------------------

### Start Preview Server (Default Host/Port)

Source: https://www.sanity.io/docs/llms-full.txt

Starts a local server to preview a production build on the default host (localhost) and port (3333).

```sh
sanity preview
```

--------------------------------

### Navigate and Bootstrap Project

Source: https://www.sanity.io/agent-context-ecommerce

Change into the project directory and run the bootstrap command to install dependencies and set up the project.

```bash
cd your-project

pnpm bootstrap
```

--------------------------------

### String Length Example in GROQ

Source: https://www.sanity.io/docs/specifications/groq-functions

Provides an example of `string::length` to get the character count of a string.

```groq
string::length("Sanity.io")
// Returns 8
```

--------------------------------

### Navigate to Project Directory

Source: https://www.sanity.io/agent-context-ecommerce

Change into the newly created project directory to begin development.

```bash
cd your-project
```

--------------------------------

### Get Dataset ACL Example

Source: https://www.sanity.io/docs/http-reference/roles

Example JSON response for retrieving a dataset's access control list.

```json
[
  {
    "filter": "_id in path(\"**\")",
    "grants": [
      "read",
      "update",
      "create",
      "history"
    ]
  }
]
```

--------------------------------

### Start Development Playground

Source: https://www.sanity.io/docs/functions/functions-local-testing

Run this command from your blueprint directory to start a local server for testing functions. You can specify a port using the `--port` flag.

```bash
npx sanity@latest functions dev
```

```bash
pnpx sanity@latest functions dev
```

--------------------------------

### Start Server with bunx

Source: https://www.sanity.io/docs/visual-editing/build-a-visual-editing-integration

Execute the server script using bunx.

```bash
bunx tsx server.ts
```

--------------------------------

### Function Dependency Installation Example

Source: https://www.sanity.io/docs/functions/function-dependencies

Shows the location for installing dependencies for a specific function, 'my-function', within the Sanity.io project.

```bash
marketing_site/
├─ studio/
├─ next-app/
├─ functions/
│ ├─ my-function/
│ │ ├─ index.ts
│ │ ├─ package.json <-- Install dependencies here, alongside the blueprint configuration file
│ │ ├─ node_modules/
```

--------------------------------

### Install User Select Input Plugin

Source: https://www.sanity.io/plugins/sanity-plugin-user-select-input

Install the plugin using npm. This command is used for both initial setup and updates.

```bash
npm i sanity-plugin-user-select-input
```

--------------------------------

### Initialize with Template and Path

Source: https://www.sanity.io/docs/cli-reference/init

Initializes a project using a specific template (e.g., 'moviedb') with a given project ID and dataset, specifying the output path.

```bash
sanity init -y --project abc123 --dataset staging --template moviedb --output-path .
```

--------------------------------

### Installing React Icons

Source: https://www.sanity.io/docs/studio/icons-for-data-types

To use icons from the react-icons library, install it using your preferred package manager. This example uses yarn.

```bash
yarn add react-icons
```

--------------------------------

### Get Role Example

Source: https://www.sanity.io/docs/http-reference/roles

This example demonstrates how to retrieve the details of a specific role, including its name, title, description, and associated grants.

```json
{
 "name": "administrator",
 "title": "Administrator",
 "description": "Administrate projects",
 "isCustom": false,
 "projectId": "3do82whm",
 "grants": {
 "sanity.document.filter.mode": [
 {
 "grants": [
 {
 "name": "mode",
 "params": {
 "mode": "publish",
 "history": true,
 "datasetPolicyName": "default"
 }
 }
 ],
 "config": {
 "filter": "_id in path(\"**\")"
 }
 }
 ]
 }
}
```

--------------------------------

### Minimal Studio Configuration Example

Source: https://www.sanity.io/docs/studio/configuration

A basic example demonstrating the structure of a minimal Sanity Studio configuration.

```javascript
import { defineConfig } from 'sanity'

export default defineConfig({
  // ... your configuration options
})
```

--------------------------------

### Client Implementation Example

Source: https://www.sanity.io/docs/agent-actions/translate-cheatsheet

This is an example of how to create and configure the Sanity client for use with Agent Actions. Ensure you have `@sanity/client` v7.1.0 or higher installed.

```typescript
import { createClient } from "@sanity/client";
export const client = createClient({
  projectId: '<project-id>',
  dataset: '<dataset-name>',
  useCdn: 'true',
  apiVersion: 'vX',
  token: '<read-write-token>'
})
```

--------------------------------

### Navigate and Run Development Server

Source: https://www.sanity.io/guides/remix-run-live-preview

Change into the newly created project directory and start the development server to see your Remix application in action.

```bash
# enter the Remix application's directory
cd remix-live-preview

# run the development server
npm run dev
```

--------------------------------

### String Lowercase Sentence Example in GROQ

Source: https://www.sanity.io/docs/specifications/groq-functions

Shows an example of `string::lowerSentence` for ensuring the first word of a sentence starts with a lowercase letter.

```groq
string::lowerSentence("Sanity IO is great")
// Returns "Sanity IO is great"
```

--------------------------------

### Basic Sanity Client Setup and Fetching

Source: https://www.sanity.io/docs/apis-and-sdks/js-client-querying

Demonstrates how to initialize the Sanity client and perform basic GROQ queries to fetch all documents of a type, a single document by slug, and documents with specific projections.

```javascript
import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'YOUR_DATASET',
  useCdn: true,
  apiVersion: '2026-03-01',
})

try {
  // Fetch all documents of a given type
  const posts = await client.fetch('\*[_type == "post"]')

  // Fetch a single document by slug
  const post = await client.fetch(
    '\*[_type == "post" && slug.current == $slug][0]',
    {slug: 'hello-world'}
  )

  // Fetch with a projection to select specific fields
  const authors = await client.fetch(`
    *[_type == 
```

--------------------------------

### HTTP GET Request for Query

Source: https://www.sanity.io/docs/http-reference/query

Example of making an HTTP GET request to the Sanity query endpoint. This is the standard method for retrieving data.

```http
GET https://{projectId}.apicdn.sanity.io/v{YYYY-MM-DD}/data/query/{dataset}?query=*%5B_id%20%3D%3D%20%22missing%22%5D
```

--------------------------------

### Basic Client Setup and Query (Browser)

Source: https://www.sanity.io/docs/apis-and-sdks/js-client-getting-started

Demonstrates setting up the Sanity client and fetching content directly within an HTML file using a script tag.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sanity Client Example</title>
</head>
<body>
  <div id="posts"></div>
  
  <script type="module">
    import {createClient} from 'https://esm.sh/@sanity/client'
    
    const client = createClient({
      projectId: 'YOUR_PROJECT_ID',
      dataset: 'YOUR_DATASET',
      useCdn: true,
      apiVersion: '2026-03-01',
    })
    
    const posts = await client.fetch('*[_type == "post"]')
    document.getElementById('posts').innerHTML = posts
      .map(post => `<h2>${post.title}</h2>`)
      .join('')
  </script>
</body>
</html>
```

--------------------------------

### Sanity CLI dev command examples

Source: https://www.sanity.io/docs/cli-reference/dev

Examples of how to use the 'sanity dev' command with different flags. These examples demonstrate starting the development server with a specific host, port, or loading it directly into the dashboard.

```bash
$ sanity dev --host=0.0.0.0
```

```bash
$ sanity dev --port=1942
```

```bash
$ sanity dev --load-in-dashboard
```

--------------------------------

### Initialize Project with Default Dataset

Source: https://www.sanity.io/docs/cli-reference/init

Sets up a project with a public dataset named "production".

```bash
sanity init \
  --dataset-default "production" \
  Set up a project with a public dataset named "production"
```

--------------------------------

### Basic defineConfig Example

Source: https://www.sanity.io/docs/studio/document-actions

A minimal example demonstrating the use of defineConfig to configure a Sanity project. This is a common starting point for Sanity Studio configurations.

```javascript
export default defineConfig({
  // ... configuration options
})
```

--------------------------------

### Client Setup and Presentation Tool Configuration

Source: https://www.sanity.io/docs/visual-editing/configuring-the-presentation-tool

This snippet demonstrates the basic client setup for Sanity.io, including the necessary configuration for the presentation tool. It shows how to import and initialize the client with project details.

```javascript
import { createClient } from "@sanity/client";

const client = createClient({
  projectId: "your-project-id",
  dataset: "your-dataset-name",
  apiVersion: "2024-01-01",
  useCdn: true,
  // Add presentation tool configuration here
  // For example:
  // presentation: {
  //   // options for the presentation tool
  // }
});

export default client;
```

--------------------------------

### Specify Installer for Sanity Functions

Source: https://www.sanity.io/docs/functions/function-quickstart

When using a package manager other than npm, use the `--installer` flag to specify it. This example shows how to use `pnpm` or `yarn`.

```bash
sanity functions add --installer pnpm
```

```bash
sanity functions add --installer yarn
```

--------------------------------

### Basic Plugin Registration Example

Source: https://www.sanity.io/docs/studio/pte-plugins

A minimal example demonstrating how to return a plugin configuration for the Portable Text Editor. This is useful for simple plugin integrations.

```javascript
import type { PortableTextPluginsProps } from 'sanity'
import { AutoCloseBracketsBehaviorPlugin } from './auto-close-brackets-plugin'

export function PortableTextEditorPlugins({
  editor
}: PortableTextPluginsProps) {
  return [
    AutoCloseBracketsBehaviorPlugin()
  ]
}
```

--------------------------------

### Import App CSS and Start Development Server

Source: https://www.sanity.io/docs/app-sdk/tailwind-sdk

Import your application's CSS file and start the development server using npm, pnpm, yarn, or bun. This command initiates the build process and launches the local development environment.

```bash
import './App.css'
// Rest of your App.tsx here…
```

```bash
npm run dev
```

```bash
pnpm run dev
```

```bash
yarn run dev
```

```bash
bun run dev
```

--------------------------------

### Duration Input Component Example

Source: https://www.sanity.io/docs/developer-guides/create-a-time-duration-object-field

An example of an `onChange` handler for a duration input. It demonstrates how to update a specific field within an object, such as setting the 'start' field.

```javascript
// This onChange handler...
onChange(setValue, [name]))
// ...is saying "set the 'start' field in the object to 
```

--------------------------------

### Install Dependencies

Source: https://www.sanity.io/docs/cli-reference/install

Use this command to install all project dependencies. It's the most basic usage of the install command.

```bash
sanity install
```

--------------------------------

### Query Data using GET Method

Source: https://www.sanity.io/docs/http-reference/query

Example of how to query data from your Sanity dataset using the GET method. This snippet demonstrates a basic query structure.

```http
GET /query?query=*%5B_type%3D%3D%27movie%27%5D%7Btitle%2C%20releaseDate%2C%20directedBy%7D
```

--------------------------------

### Project Setup with pnpm

Source: https://www.sanity.io/agent-context-ecommerce

Commands to create a new Sanity project using the AI Shopping Assistant starter template with pnpm as the package manager.

```bash
pnpm create sanity@latest --template sanity-labs/starters/ai-shopping-assistant --package-manager pnpm
cd your-project
pnpm bootstrap
```

--------------------------------

### Setting up createQueryStore for Live Updates

Source: https://www.sanity.io/docs/visual-editing/visual-editing-with-react-native

Initialize `createQueryStore` to enable live mode and query data. It's recommended to call this only once and import it into components.

```tsx
const { useLiveMode, useQuery} = createQueryStore({ client, ssr:false }) 
```

--------------------------------

### Basic Sanity App Setup with React

Source: https://www.sanity.io/docs/app-sdk/sanity-ui-sdk

This example shows a basic setup for a Sanity app using React, including theme provider and SanityApp configuration.

```tsx
// App.tsx
    import {SanityApp, type SanityConfig} from '@sanity/sdk-react'
    
    // Sanity UI
    import {ThemeProvider} from '@sanity/ui'
    import {buildTheme} from '@sanity/ui/theme'
    
    import {ExampleComponent} from './ExampleComponent'
    
    // Build the Sanity UI theme
    const theme = buildTheme()
    
    export function App() {
      // apps can access many different projects or other sources of data
      const config: SanityConfig[] = [
        {
          projectId: 'project-id',
          dataset: 'dataset-name',
        },
      ]
    
      return (
        <ThemeProvider theme={theme}>
          <SanityApp config={config} fallback={<div>Loading...</div>}> 
            {/* add your own components here! */}
            <ExampleComponent />
          </SanityApp>
        </ThemeProvider>
      )
    }
    
    export default App
```

--------------------------------

### Start Preview Server (Custom Port)

Source: https://www.sanity.io/docs/llms-full.txt

Starts a local server to preview a production build on a specified TCP port.

```sh
sanity preview --port=1942
```