### Query Documentation Example

Source: https://developers.raycast.com/utilities/functions/showfailuretoast

This example shows how to query the documentation dynamically using an HTTP GET request with the `ask` query parameter. This is useful for retrieving specific information not immediately visible on the page.

```http
GET https://developers.raycast.com/utilities/functions/showfailuretoast.md?ask=<question>
```

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

### Install and Run Extension in Development Mode

Source: https://developers.raycast.com/ai/create-an-ai-extension

Use these commands to install dependencies and start your extension in development mode with hot reloading and error reporting.

```bash
npm install && npm run dev
```

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

### HTTP GET Request Example

Source: https://developers.raycast.com/api-reference/environment

Demonstrates how to perform an HTTP GET request to a URL with a query parameter. This is useful for querying documentation dynamically.

```http
GET https://developers.raycast.com/api-reference/environment.md?ask=<question>

```

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

### Agent Instructions: Querying Documentation

Source: https://developers.raycast.com/utilities/react-hooks/uselocalstorage

Provides an example of how to dynamically query documentation using an HTTP GET request with the 'ask' query parameter.

```http
GET https://developers.raycast.com/utilities/react-hooks/uselocalstorage.md?ask=<question>
```

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

### Query Documentation API Example

Source: https://developers.raycast.com/api-reference/tool

Demonstrates how to query Raycast documentation dynamically by making a GET request to the current page URL with an 'ask' query parameter containing the question.

```http
GET https://developers.raycast.com/api-reference/tool.md?ask=<question>

```

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

### Clone and Set Up Extension from Pull Request

Source: https://developers.raycast.com/basics/review-pullrequest

Clone a specific branch of an extension repository, set up sparse checkout for the extension directory, install dependencies, and start the development server. Ensure you replace BRANCH, FORK_URL, and EXTENSION_NAME with your specific values.

```bash
BRANCH="ext/soundboard"
FORK_URL="https://github.com/pernielsentikaer/raycast-extensions.git"
EXTENSION_NAME="soundboard"

git clone -n --depth=1 --filter=tree:0 -b ${BRANCH} ${FORK_URL}
cd raycast-extensions
git sparse-checkout set --no-cone "extensions/${EXTENSION_NAME}"
git checkout
cd "extensions/${EXTENSION_NAME}"
npm install && npm run dev
```

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

### Full Pagination Example in a Raycast Command

Source: https://developers.raycast.com/utilities/react-hooks/usefetch

This example demonstrates a complete Raycast command using `useFetch` for pagination, integrating with the `List` component.

```tsx
import { Icon, Image, List } from "@raycast/api";
import { useFetch } from "@raycast/utils";
import { useState } from "react";

type SearchResult = { companies: Company[]; page: number; totalPages: number };
type Company = { id: number; name: string; smallLogoUrl?: string };
export default function Command() {
  const [searchText, setSearchText] = useState("");
  const { isLoading, data, pagination } = useFetch(
    (options) =>
      "https://api.ycombinator.com/v0.1/companies?" +
      new URLSearchParams({ page: String(options.page + 1), q: searchText }).toString(),
    {
      mapResult(result: SearchResult) {
        return {
          data: result.companies,
          hasMore: result.page < result.totalPages,
        };
      },
      keepPreviousData: true,
      initialData: [],
    },
  );

  return (
    <List isLoading={isLoading} pagination={pagination} onSearchTextChange={setSearchText}>
      {data.map((company) => (
        <List.Item
          key={company.id}
          icon={{ source: company.smallLogoUrl ?? Icon.MinusCircle, mask: Image.Mask.RoundedRectangle }}
          title={company.name}
        />
      ))}
    </List>
  );
}

```

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

### OnAuthorize Callback Example

Source: https://developers.raycast.com/utilities/oauth/withaccesstoken

Example demonstrating the onAuthorize callback for setting up clients like LinearClient. Ensure necessary imports.

```typescript
import { OAuthService } from "@raycast/utils";
import { LinearClient, LinearGraphQLClient } from "@linear/sdk";

let linearClient: LinearClient | null = null;

const linear = OAuthService.linear({
  scope: "read write",
  onAuthorize({ token }) {
    linearClient = new LinearClient({ accessToken: token });
  },
});

function MyIssues() {
  return; // ...
}

export default withAccessToken(linear)(View);
```

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

### Execute Shell Command with useExec

Source: https://developers.raycast.com/utilities/react-hooks/useexec

Example of using the useExec hook to fetch installed formulae information from Homebrew. It parses the JSON output and displays the results in a List.

```tsx
import { List } from "@raycast/api";
import { useExec } from "@raycast/utils";
import { cpus } from "os";
import { useMemo } from "react";

const brewPath = cpus()[0].model.includes("Apple") ? "/opt/homebrew/bin/brew" : "/usr/local/bin/brew";

export default function Command() {
  const { isLoading, data } = useExec(brewPath, ["info", "--json=v2", "--installed"]);
  const results = useMemo<{ id: string; name: string }[]>(() => JSON.parse(data || "{}").formulae || [], [data]);

  return (
    <List isLoading={isLoading}>
      {results.map((item) => (
        <List.Item key={item.id} title={item.name} />
      ))}
    </List>
  );
}
```

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

### Toast Usage Examples

Source: https://developers.raycast.com/api-reference/feedback/toast

Examples demonstrating how to use the showToast function for different scenarios, including basic usage, handling success/failure, and updating animated toasts.

```APIDOC
## Basic Toast Example

```typescript
import { showToast, Toast } from "@raycast/api";

export default async function Command() {
  await showToast({ title: "Hello, Raycast!" });
}
```

## Toast with Style and Message

```typescript
import { showToast, Toast } from "@raycast/api";

export default async function Command() {
  const success = false;

  if (success) {
    await showToast({ title: "Dinner is ready", message: "Pizza margherita" });
  } else {
    await showToast({
      style: Toast.Style.Failure,
      title: "Dinner isn't ready",
      message: "Pizza dropped on the floor",
    });
  }
}
```

## Updating an Animated Toast

```typescript
import { showToast, Toast } from "@raycast/api";
import { setTimeout } from "timers/promises";

export default async function Command() {
  const toast = await showToast({
    style: Toast.Style.Animated,
    title: "Uploading image",
  });

  try {
    // upload the image
    await setTimeout(1000);

    toast.style = Toast.Style.Success;
    toast.title = "Uploaded image";
  } catch (err) {
    toast.style = Toast.Style.Failure;
    toast.title = "Failed to upload image";
    if (err instanceof Error) {
      toast.message = err.message;
    }
  }
}
```
```

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

### useForm Example

Source: https://developers.raycast.com/utilities/react-hooks/useform

A practical example demonstrating how to use the useForm hook with various form fields and validation rules.

```APIDOC
## Example Usage of useForm

```tsx
import { Action, ActionPanel, Form, showToast, Toast } from "@raycast/api";
import { useForm, FormValidation } from "@raycast/utils";

interface SignUpFormValues {
  firstName: string;
  lastName: string;
  birthday: Date | null;
  password: string;
  number: string;
  hobbies: string[];
}

export default function Command() {
  const { handleSubmit, itemProps } = useForm<SignUpFormValues>({
    onSubmit(values) {
      showToast({
        style: Toast.Style.Success,
        title: "Yay!",
        message: `${values.firstName} ${values.lastName} account created`,
      });
    },
    validation: {
      firstName: FormValidation.Required,
      lastName: FormValidation.Required,
      password: (value) => {
        if (value && value.length < 8) {
          return "Password must be at least 8 symbols";
        } else if (!value) {
          return "The item is required";
        }
      },
      number: (value) => {
        if (value && value !== "2") {
          return "Please select '2'";
        }
      },
    },
  });
  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm title="Submit" onSubmit={handleSubmit} />
        </ActionPanel>
      }
    >
      <Form.TextField title="First Name" placeholder="Enter first name" {...itemProps.firstName} />
      <Form.TextField title="Last Name" placeholder="Enter last name" {...itemProps.lastName} />
      <Form.DatePicker title="Date of Birth" {...itemProps.birthday} />
      <Form.PasswordField
        title="Password"
        placeholder="Enter password at least 8 characters long"
        {...itemProps.password}
      />
      <Form.Dropdown title="Your Favorite Number" {...itemProps.number}>
        {[1, 2, 3, 4, 5, 6, 7].map((num) => {
          return <Form.Dropdown.Item value={String(num)} title={String(num)} key={num} />;
        })}
      </Form.Dropdown>
    </Form>
  );
}
```
```

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

### Execute AppleScript Example

Source: https://developers.raycast.com/utilities/functions/runapplescript

Example demonstrating how to execute an AppleScript with arguments and display the result using showHUD. Ensure you have the necessary imports for runAppleScript and showHUD.

```typescript
import { showHUD } from "@raycast/api";
import { runAppleScript } from "@raycast/utils";

export default async function () {
  const res = await runAppleScript(
    `
on run argv
  return "hello, " & item 1 of argv & "."
end run
`,
    ["world"],
  );
  await showHUD(res);
}
```

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

### Example Tool Confirmation

Source: https://developers.raycast.com/api-reference/tool

An example of a Tool.Confirmation function that prompts the user to confirm a greeting action, displaying the name to be greeted.

```typescript
import { Tool } from "@raycast/api";

type Input = {
  /**
   * The first name of the user to greet
   */
  name: string;
};

export const confirmation: Tool.Confirmation<Input> = (input) => {
  return {
    message: `Are you sure you want to greet ${input.name}?`,
  };
};

```

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

### List.Item Usage Example

Source: https://developers.raycast.com/api-reference/user-interface/list

An example demonstrating how to use the List.Item component within a List.

```APIDOC
## List.Item Usage Example

### Description
An example demonstrating the usage of the `List.Item` component within a `List`.

### Method
None

### Endpoint
None

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
```typescript
import { Icon, List } from "@raycast/api";

export default function Command() {
  return (
    <List>
      <List.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" accessories={[{ text: "Germany" }]} />
    </List>
  );
}
```
```

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

### Query Documentation with GET Request

Source: https://developers.raycast.com/utilities/react-hooks/usecachedpromise

Demonstrates how to perform an HTTP GET request to query documentation dynamically using the 'ask' query parameter. This is useful for retrieving specific information not explicitly present on the page.

```http
GET https://developers.raycast.com/utilities/react-hooks/usecachedpromise.md?ask=<question>
```

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

### Full Todo List Implementation

Source: https://developers.raycast.com/examples/todo-list

A comprehensive implementation of a todo list extension for Raycast, including all necessary components and actions for managing todos. This example demonstrates initial state setup and all CRUD operations.

```typescript
import { Action, ActionPanel, Form, Icon, List, useNavigation } from "@raycast/api";
import { useState } from "react";

interface Todo {
  title: string;
  isCompleted: boolean;
}

export default function Command() {
  const [todos, setTodos] = useState<Todo[]>([
    { title: "Write a todo list extension", isCompleted: false },
    { title: "Explain it to others", isCompleted: false },
  ]);

  function handleCreate(todo: Todo) {
    const newTodos = [...todos, todo];
    setTodos(newTodos);
  }

  function handleToggle(index: number) {
    const newTodos = [...todos];
    newTodos[index].isCompleted = !newTodos[index].isCompleted;
    setTodos(newTodos);
  }

  function handleDelete(index: number) {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  }

  return (
    <List
      actions={
        <ActionPanel>
          <CreateTodoAction onCreate={handleCreate} />
        </ActionPanel>
      }
    >
      {todos.map((todo, index) => (
        <List.Item
          key={index}
          icon={todo.isCompleted ? Icon.Checkmark : Icon.Circle}
          title={todo.title}
          actions={
            <ActionPanel>
              <ActionPanel.Section>
                <ToggleTodoAction todo={todo} onToggle={() => handleToggle(index)} />
              </ActionPanel.Section>
              <ActionPanel.Section>
                <CreateTodoAction onCreate={handleCreate} />
                <DeleteTodoAction onDelete={() => handleDelete(index)} />
              </ActionPanel.Section>
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}

function CreateTodoForm(props: { onCreate: (todo: Todo) => void }) {
  const { pop } = useNavigation();

  function handleSubmit(values: { title: string }) {
    props.onCreate({ title: values.title, isCompleted: false });
    pop();
  }

  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm title="Create Todo" onSubmit={handleSubmit} />
        </ActionPanel>
      }
    >
      <Form.TextField id="title" title="Title" />
    </Form>
  );
}

function CreateTodoAction(props: { onCreate: (todo: Todo) => void }) {
  return (
    <Action.Push
      icon={Icon.Pencil}
      title="Create Todo"
      shortcut={{ modifiers: ["cmd"], key: "n" }}
      target={<CreateTodoForm onCreate={props.onCreate} />}
    />
  );
}

function ToggleTodoAction(props: { todo: Todo; onToggle: () => void }) {
  return (
    <Action
      icon={props.todo.isCompleted ? Icon.Circle : Icon.Checkmark}
      title={props.todo.isCompleted ? "Uncomplete Todo" : "Complete Todo"}
      onAction={props.onToggle}
    />
  );
}

function DeleteTodoAction(props: { onDelete: () => void }) {
  return (
    <Action
      icon={Icon.Trash}
      title="Delete Todo"
      shortcut={{ modifiers: ["ctrl"], key: "x" }}
      onAction={props.onDelete}
    />
  );
}

```

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

### API Query Example

Source: https://developers.raycast.com/api-reference/user-interface/detail

To get additional information not directly present on the page, perform an HTTP GET request on the current page URL with the 'ask' query parameter. The question should be specific and self-contained.

```http
GET https://developers.raycast.com/api-reference/user-interface/detail.md?ask=<question>
```

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

### Query Documentation with HTTP GET

Source: https://developers.raycast.com/basics/getting-started

Use this HTTP GET request to query the documentation dynamically. Include your question in the 'ask' query parameter for specific answers and relevant excerpts.

```http
GET https://developers.raycast.com/basics/getting-started.md?ask=<question>
```

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

### Querying Documentation via API

Source: https://developers.raycast.com/api-reference/user-interface/action-panel

Perform a GET request to the documentation URL with an 'ask' query parameter to get dynamic answers and relevant excerpts.

```http
GET https://developers.raycast.com/api-reference/user-interface/action-panel.md?ask=<question>
```

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

### Basic useAI Example

Source: https://developers.raycast.com/utilities/react-hooks/useai

Demonstrates a basic implementation of the useAI hook to fetch and display AI-generated content. Ensure the 'useAI' hook is imported from '@raycast/utils'.

```tsx
import { Detail } from "@raycast/api";
import { useAI } from "@raycast/utils";

export default function Command() {
  const { data, isLoading } = useAI("Suggest 5 jazz songs");

  return <Detail isLoading={isLoading} markdown={data} />;
}
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/ai/write-evals-for-your-ai-extension

To get information not present on the current page, make an HTTP GET request to the page URL with an `ask` query parameter. The response will include a direct answer and relevant documentation excerpts.

```http
GET https://developers.raycast.com/ai/write-evals-for-your-ai-extension.md?ask=<question>
```

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

### Querying Documentation with GET Request

Source: https://developers.raycast.com/utilities/functions/withcache

Illustrates how to dynamically query documentation content by making an HTTP GET request to the current page URL with an `ask` query parameter. This is useful for retrieving specific information not explicitly present on the page.

```http
GET https://developers.raycast.com/utilities/functions/withcache.md?ask=<question>
```

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

### Detail Component Usage Example

Source: https://developers.raycast.com/api-reference/user-interface/detail

Example of how to use the Detail component with markdown content and metadata.

```APIDOC
## Detail Component Example

### Description
This example demonstrates rendering a Detail view with markdown content and metadata, including labels and a separator.

### Method
GET

### Endpoint
/websites/developers_raycast

### Request Body
```typescript
import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Label title="Height" text={`1' 04"`} />
          <Detail.Metadata.Separator />
          <Detail.Metadata.Label title="Weight" text="13.2 lbs" />
        </Detail.Metadata>
      }
    />
  );
}
```

### Response
#### Success Response (200)
- **Detail Component**: Renders the UI with provided markdown and metadata.

#### Response Example
(Visual representation of the Detail component with Pikachu information and metadata)
```

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

### Install @raycast/utils Package

Source: https://developers.raycast.com/utilities/getting-started

Install the @raycast/utils package using npm. This package has a peer dependency on @raycast/api.

```bash
npm install --save @raycast/utils
```

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

### List All Installed Applications

Source: https://developers.raycast.com/api-reference/utilities

This snippet retrieves and logs the names of all applications installed on the user's Mac. Ensure the @raycast/api is imported.

```typescript
import { getApplications } from "@raycast/api";

export default async function Command() {
  const installedApplications = await getApplications();
  console.log("The following applications are installed on your Mac:");
  console.log(installedApplications.map((a) => a.name).join(", "));
}
```

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

### Example: Creating Extension Deeplinks

Source: https://developers.raycast.com/utilities/functions/createdeeplink

Demonstrates creating deeplinks for both internal and external extension commands within a Raycast List component.

```tsx
import { Action, ActionPanel, LaunchProps, List } from "@raycast/api";
import { createDeeplink, DeeplinkType } from "@raycast/utils";

export default function Command(props: LaunchProps<{ launchContext: { message: string } }>) {
  console.log(props.launchContext?.message);

  return (
    <List>
      <List.Item
        title="Extension Deeplink"
        actions={
          <ActionPanel>
            <Action.CreateQuicklink
              title="Create Deeplink"
              quicklink={{
                name: "Extension Deeplink",
                link: createDeeplink({
                  command: "create-deeplink",
                  context: {
                    message: "Hello, world!",
                  },
                }),
              }}
            />
          </ActionPanel>
        }
      />
      <List.Item
        title="External Extension Deeplink"
        actions={
          <ActionPanel>
            <Action.CreateQuicklink
              title="Create Deeplink"
              quicklink={{
                name: "Create Triage Issue for Myself",
                link: createDeeplink({
                  ownerOrAuthorName: "linear",
                  extensionName: "linear",
                  command: "create-issue-for-myself",
                  arguments: {
                    title: "Triage new issues",
                  },
                }),
              }}
            />
          </ActionPanel>
        }
      />
      <List.Item
        title="Script Command Deeplink"
        actions={
          <ActionPanel>
            <Action.CreateQuicklink
              title="Create Deeplink"
              quicklink={{
                name: "Deeplink with Arguments",
                link: createDeeplink({
                  type: DeeplinkType.ScriptCommand,
                  command: "count-chars",
                  arguments: ["a b+c%20d"],
                }),
              }}
            />
          </ActionPanel>
        }
      />
    </List>
  );
}
```

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

### Query Documentation with 'ask' Parameter

Source: https://developers.raycast.com/api-reference/cache

Demonstrates how to query the documentation dynamically by appending an 'ask' query parameter to the GET request URL.

```http
GET https://developers.raycast.com/api-reference/cache.md?ask=<question>
```

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

### useLocalStorage Example Usage

Source: https://developers.raycast.com/utilities/react-hooks/uselocalstorage

An example demonstrating how to use the useLocalStorage hook in a React component to manage a list of todos.

```APIDOC
## Example Usage

```tsx
import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";
import { useLocalStorage } from "@raycast/utils";

const exampleTodos = [
  { id: "1", title: "Buy milk", done: false },
  { id: "2", title: "Walk the dog", done: false },
  { id: "3", title: "Call mom", done: false },
];

export default function Command() {
  const { value: todos, setValue: setTodos, isLoading } = useLocalStorage("todos", exampleTodos);

  async function toggleTodo(id: string) {
    const newTodos = todos?.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo)) ?? [];
    await setTodos(newTodos);
  }

  return (
    <List isLoading={isLoading}>
      {todos?.map((todo) => (
        <List.Item
          icon={todo.done ? { source: Icon.Checkmark, tintColor: Color.Green } : Icon.Circle}
          key={todo.id}
          title={todo.title}
          actions={
            <ActionPanel>
              <Action title={todo.done ? "Uncomplete" : "Complete"} onAction={() => toggleTodo(todo.id)} />
              <Action title="Delete" style={Action.Style.Destructive} onAction={() => toggleTodo(todo.id)} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}
```
```

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

### Making an HTTP GET Request with `ask` Parameter

Source: https://developers.raycast.com/examples/hacker-news

To query documentation dynamically, perform an HTTP GET request to the page URL with an `ask` query parameter. The question should be specific and self-contained. The response will include an answer and relevant excerpts.

```http
GET https://developers.raycast.com/examples/hacker-news.md?ask=<question>
```

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

### Query Documentation via GET Request

Source: https://developers.raycast.com/utilities/react-hooks/useexec

To get additional information not present on the current page, perform an HTTP GET request to the current URL with the 'ask' query parameter. The question should be specific and in natural language.

```http
GET https://developers.raycast.com/utilities/react-hooks/useexec.md?ask=<question>
```

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

### Query Documentation Dynamically - GET Request

Source: https://developers.raycast.com/api-reference/user-interface/navigation

To get additional information not directly on the page, perform an HTTP GET request to the current page URL with the `ask` query parameter. The question should be specific and in natural language.

```http
GET https://developers.raycast.com/api-reference/user-interface/navigation.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/utilities/react-hooks/useform

Perform an HTTP GET request to the current page URL with the `ask` query parameter to dynamically query the documentation. The question should be specific and self-contained.

```http
GET https://developers.raycast.com/utilities/react-hooks/useform.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/information/developer-tools/vscode

Perform an HTTP GET request to a specific URL with an 'ask' query parameter to dynamically query documentation. Use this when information is not explicitly present or for clarification.

```http
GET https://developers.raycast.com/information/developer-tools/vscode.md?ask=<question>
```

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

### Basic ActionPanel Example

Source: https://developers.raycast.com/api-reference/user-interface/action-panel

Demonstrates a simple ActionPanel with OpenInBrowser and CopyToClipboard actions for a List item. Ensure necessary imports are included.

```typescript
import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
            <Action.CopyToClipboard
              title="Copy Pull Request URL"
              content="https://github.com/raycast/extensions/pull/1"
            />
          </ActionPanel>
        }
      />
    </List>
  );
}
```

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

### Full Example: Paginated List Component

Source: https://developers.raycast.com/utilities/react-hooks/usecachedpromise

This example demonstrates a complete Raycast List component that utilizes useCachedPromise with pagination. It includes state management for search text and rendering list items.

```tsx
import { setTimeout } from "node:timers/promises";
import { useState } from "react";
import { List } from "@raycast/api";
import { useCachedPromise } from "@raycast/utils";

export default function Command() {
  const [searchText, setSearchText] = useState("");

  const { isLoading, data, pagination } = useCachedPromise(
    (searchText: string) => async (options: { page: number }) => {
      await setTimeout(200);
      const newData = Array.from({ length: 25 }, (_v, index) => ({
        index,
        page: options.page,
        text: searchText,
      }));
      return { data: newData, hasMore: options.page < 10 };
    },
    [searchText],
  );

  return (
    <List isLoading={isLoading} onSearchTextChange={setSearchText} pagination={pagination}>
      {data?.map((item) => (
        <List.Item
          key={`${item.page} ${item.index} ${item.text}`}
          title={`Page ${item.page} Item ${item.index}`}
          subtitle={item.text}
        />
      ))}
    </List>
  );
}
```

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

### Form with useForm Hook Example

Source: https://developers.raycast.com/utilities/react-hooks/useform

A complete example demonstrating the use of the useForm hook to create a sign-up form with various input fields and custom validations. It shows how to integrate with Raycast's Form and Action components.

```typescript
import { Action, ActionPanel, Form, showToast, Toast } from "@raycast/api";
import { useForm, FormValidation } from "@raycast/utils";

interface SignUpFormValues {
  firstName: string;
  lastName: string;
  birthday: Date | null;
  password: string;
  number: string;
  hobbies: string[];
}

export default function Command() {
  const { handleSubmit, itemProps } = useForm<SignUpFormValues>({
    onSubmit(values) {
      showToast({
        style: Toast.Style.Success,
        title: "Yay!",
        message: `${values.firstName} ${values.lastName} account created`,
      });
    },
    validation: {
      firstName: FormValidation.Required,
      lastName: FormValidation.Required,
      password: (value) => {
        if (value && value.length < 8) {
          return "Password must be at least 8 symbols";
        } else if (!value) {
          return "The item is required";
        }
      },
      number: (value) => {
        if (value && value !== "2") {
          return "Please select '2'";
        }
      },
    },
  });
  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm title="Submit" onSubmit={handleSubmit} />
        </ActionPanel>
      }
    >
      <Form.TextField title="First Name" placeholder="Enter first name" {...itemProps.firstName} />
      <Form.TextField title="Last Name" placeholder="Enter last name" {...itemProps.lastName} />
      <Form.DatePicker title="Date of Birth" {...itemProps.birthday} />
      <Form.PasswordField
        title="Password"
        placeholder="Enter password at least 8 characters long"
        {...itemProps.password}
      />
      <Form.Dropdown title="Your Favorite Number" {...itemProps.number}>
        {[1, 2, 3, 4, 5, 6, 7].map((num) => {
          return <Form.Dropdown.Item value={String(num)} title={String(num)} key={num} />;
        })}
      </Form.Dropdown>
    </Form>
  );
}
```

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

### Install React Developer Tools globally

Source: https://developers.raycast.com/basics/debug-an-extension

Install react-devtools globally to use the standalone DevTools app. Raycast will automatically connect to it for debugging.

```bash
npm install -g react-devtools@6.1.1
```

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

### Query Documentation with GET Request

Source: https://developers.raycast.com/basics/review-pullrequest

To get additional information not present on the current page, perform an HTTP GET request to the page URL with an 'ask' query parameter containing your question in natural language.

```http
GET https://developers.raycast.com/basics/review-pullrequest.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/api-reference/ai

Perform an HTTP GET request to the current page URL with the `ask` query parameter to dynamically query documentation. Use this when the answer is not explicitly present, for clarification, or to retrieve related sections.

```http
GET https://developers.raycast.com/api-reference/ai.md?ask=<question>
```

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

### Example: Managing Todos with useLocalStorage

Source: https://developers.raycast.com/utilities/react-hooks/uselocalstorage

Demonstrates how to use the useLocalStorage hook to manage a list of todos. It initializes the list from local storage, allows toggling todo completion, and updates the storage.

```tsx
import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";
import { useLocalStorage } from "@raycast/utils";

const exampleTodos = [
  { id: "1", title: "Buy milk", done: false },
  { id: "2", title: "Walk the dog", done: false },
  { id: "3", title: "Call mom", done: false },
];

export default function Command() {
  const { value: todos, setValue: setTodos, isLoading } = useLocalStorage("todos", exampleTodos);

  async function toggleTodo(id: string) {
    const newTodos = todos?.map((todo) => (todo.id === id ? { ...todo, done: !todo.done } : todo)) ?? [];
    await setTodos(newTodos);
  }

  return (
    <List isLoading={isLoading}>
      {todos?.map((todo) => (
        <List.Item
          icon={todo.done ? { source: Icon.Checkmark, tintColor: Color.Green } : Icon.Circle}
          key={todo.id}
          title={todo.title}
          actions={
            <ActionPanel>
              <Action title={todo.done ? "Uncomplete" : "Complete"} onAction={() => toggleTodo(todo.id)} />
              <Action title="Delete" style={Action.Style.Destructive} onAction={() => toggleTodo(todo.id)} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}
```

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

### useFetch Hook Documentation

Source: https://developers.raycast.com/utilities/react-hooks/usefetch

Detailed documentation for the useFetch hook, including its signature, arguments, return values, and an example.

```APIDOC
## useFetch Hook

Hook which fetches the URL and returns the [AsyncState](#asyncstate) corresponding to the execution of the fetch.

It follows the `stale-while-revalidate` cache invalidation strategy popularized by [HTTP RFC 5861](https://tools.ietf.org/html/rfc5861). `useFetch` first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again.

The last value will be kept between command runs.

### Signature

```ts
export function useFetch<V, U, T = V>(
  url: RequestInfo,
  options?: RequestInit & {
    parseResponse?: (response: Response) => Promise<V>;
    mapResult?: (result: V) => { data: T };
    initialData?: U;
    keepPreviousData?: boolean;
    execute?: boolean;
    onError?: (error: Error) => void;
    onData?: (data: T) => void;
    onWillExecute?: (args: [string, RequestInit]) => void;
    failureToastOptions?: Partial<Pick<Toast.Options, "title" | "primaryAction" | "message">>;
  },
): AsyncState<T> & { revalidate: () => void; mutate: MutatePromise<T | U | undefined>; };
```

### Arguments

* `url` is the string representation of the URL to fetch.

With a few options:

* `options` extends [`RequestInit`](https://github.com/nodejs/undici/blob/v5.7.0/types/fetch.d.ts#L103-L117) allowing you to specify a body, headers, etc. to apply to the request.
* `options.parseResponse` is a function that accepts the Response as an argument and returns the data the hook will return. By default, the hook will return `response.json()` if the response has a JSON `Content-Type` header or `response.text()` otherwise.
* `options.mapResult` is an optional function that accepts whatever `options.parseResponse` returns as an argument, processes the response, and returns an object wrapping the result, i.e. `(response) => { return { data: response> } };`.

Including the [useCachedPromise](https://developers.raycast.com/utilities/react-hooks/usecachedpromise)'s options:

* `options.keepPreviousData` is a boolean to tell the hook to keep the previous results instead of returning the initial value if there aren't any in the cache for the new arguments. This is particularly useful when used for data for a List to avoid flickering. See [Argument dependent on List search text](#argument-dependent-on-list-search-text) for more information.

Including the [useCachedState](https://developers.raycast.com/utilities/react-hooks/usecachedstate)'s options:

* `options.initialData` is the initial value of the state if there aren't any in the Cache yet.

Including the [usePromise](https://developers.raycast.com/utilities/react-hooks/usepromise)'s options:

* `options.execute` is a boolean to indicate whether to actually execute the function or not. This is useful for cases where one of the function's arguments depends on something that might not be available right away (for example, depends on some user inputs). Because React requires every hook to be defined on the render, this flag enables you to define the hook right away but wait until you have all the arguments ready to execute the function.
* `options.onError` is a function called when an execution fails. By default, it will log the error and show a generic failure toast with an action to retry.
* `options.onData` is a function called when an execution succeeds.
* `options.onWillExecute` is a function called when an execution will start.
* `options.failureToastOptions` are the options to customize the title, message, and primary action of the failure toast.

### Return

Returns an object with the [AsyncState](#asyncstate) corresponding to the execution of the fetch as well as a couple of methods to manipulate it.

* `data`, `error`, `isLoading` - see [AsyncState](#asyncstate).
* `revalidate` is a method to manually call the function with the same arguments again.
* `mutate` is a method to wrap an asynchronous update and gives some control over how the `useFetch`'s data should be updated while the update is going through. By default, the data will be revalidated (eg. the function will be called again) after the update is done. See [Mutation and Optimistic Updates](#mutation-and-optimistic-updates) for more information.

## Example

```tsx
import { Detail, ActionPanel, Action } from "@raycast/api";
import { useFetch } from "@raycast/utils";

export default function Command() {
  const { isLoading, data, revalidate } = useFetch("https://api.example");

  return (
    <Detail
      isLoading={isLoading}
      markdown={data}
      actions={
        <ActionPanel>
          <Action title="Reload" onAction={() => revalidate()} />
        </ActionPanel>
      }
    />
  );
}
```
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/api-reference/keyboard

Perform an HTTP GET request to query documentation dynamically. Append the 'ask' query parameter with your question to the current page URL. Use this when the answer is not explicitly present or for clarification.

```http
GET https://developers.raycast.com/api-reference/keyboard.md?ask=<question>
```

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

### Basic useFetch Example

Source: https://developers.raycast.com/utilities/react-hooks/usefetch

Demonstrates a basic implementation of the useFetch hook to fetch data from an API and display it in a Detail view. Includes a reload action using the revalidate function.

```tsx
import { Detail, ActionPanel, Action } from "@raycast/api";
import { useFetch } from "@raycast/utils";

export default function Command() {
  const { isLoading, data, revalidate } = useFetch("https://api.example");

  return (
    <Detail
      isLoading={isLoading}
      markdown={data}
      actions={
        <ActionPanel>
          <Action title="Reload" onAction={() => revalidate()} />
        </ActionPanel>
      }
    />
  );
}
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/api-reference/utilities

Perform an HTTP GET request to the current page URL with the 'ask' query parameter to dynamically query documentation. The question should be specific and self-contained. Use this when the answer is not explicitly present, for clarification, or to retrieve related sections.

```http
GET https://developers.raycast.com/api-reference/utilities.md?ask=<question>
```

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

### Perform Dynamic Documentation Query

Source: https://developers.raycast.com/information/lifecycle

Use this GET request to query the documentation dynamically. Include your specific question in the 'ask' query parameter. The response will contain a direct answer and relevant excerpts from the documentation.

```http
GET https://developers.raycast.com/information/lifecycle.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/api-reference/menu-bar-commands

Perform an HTTP GET request to the current page URL with the `ask` query parameter to dynamically query documentation. The question should be specific and in natural language.

```http
GET https://developers.raycast.com/api-reference/menu-bar-commands.md?ask=<question>
```

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

### Query Documentation Dynamically

Source: https://developers.raycast.com/ai/getting-started

Perform an HTTP GET request to query the documentation dynamically. Use the `ask` query parameter with a specific, self-contained question in natural language to get direct answers and relevant excerpts.

```http
GET https://developers.raycast.com/ai/getting-started.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/api-reference/window-and-search-bar

Perform an HTTP GET request to query documentation dynamically. Include a specific, self-contained question in natural language as the 'ask' query parameter.

```http
GET https://developers.raycast.com/api-reference/window-and-search-bar.md?ask=<question>
```

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

### Query Documentation Dynamically

Source: https://developers.raycast.com/ai/create-an-ai-extension

To get more information not present on the current page, make an HTTP GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.raycast.com/ai/create-an-ai-extension.md?ask=<question>
```

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

### Querying Documentation

Source: https://developers.raycast.com/api-reference/command

Perform an HTTP GET request on the current page URL with the `ask` query parameter to get additional information.

```APIDOC
## Querying This Documentation

### Method
GET

### Endpoint
`https://developers.raycast.com/api-reference/command.md?ask=<question>`

### Description
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```

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

### Install React Developer Tools locally

Source: https://developers.raycast.com/basics/debug-an-extension

Add react-devtools as a development dependency to your extension to enable debugging of React components. Ensure you rebuild your extension after installation.

```bash
npm install --save-dev react-devtools@6.1.1
```

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

### Query Documentation with `ask` Parameter

Source: https://developers.raycast.com/information/developer-tools/templates

To get more information not present on the current page, make an HTTP GET request to the page URL with the `ask` query parameter. The question should be specific and in natural language. The response includes the answer and relevant sources.

```http
GET https://developers.raycast.com/information/developer-tools/templates.md?ask=<question>
```

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

### Query Documentation Dynamically

Source: https://developers.raycast.com/basics/debug-an-extension

Perform an HTTP GET request with the `ask` query parameter to dynamically query documentation. Use this when the answer is not explicitly present on the current page.

```http
GET https://developers.raycast.com/basics/debug-an-extension.md?ask=<question>
```

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

### Ask a Question via HTTP GET

Source: https://developers.raycast.com/information/background-refresh

Use this method to perform an HTTP GET request on the documentation index with the 'ask' parameter to retrieve specific information. The question should be specific and self-contained.

```http
GET https://developers.raycast.com/information/lifecycle/background-refresh.md?ask=<question>
```

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

### Query Documentation via HTTP GET

Source: https://developers.raycast.com/basics/prepare-an-extension-for-store

Perform an HTTP GET request to the current page URL with the `ask` query parameter to retrieve specific information. The question should be specific and self-contained. Use this when the answer is not explicitly present or for clarification.

```http
GET https://developers.raycast.com/basics/prepare-an-extension-for-store.md?ask=<question>
```

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

### Uncontrolled Password Field Example

Source: https://developers.raycast.com/api-reference/user-interface/form

Use an uncontrolled password field when the form manages its own state. This example shows a basic setup for a password input.

```typescript
import { ActionPanel, Form, Action } from "@raycast/api";

export default function Command() {
  return (
    <Form
      actions={
        <ActionPanel>
          <Action.SubmitForm title="Submit Password" onSubmit={(values) => console.log(values)} />
        </ActionPanel>
      }
    >
      <Form.PasswordField id="password" title="Enter Password" />
    </Form>
  );
}
```

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

### Querying Documentation with 'ask' Parameter

Source: https://developers.raycast.com/utilities/functions/createdeeplink

To get more information not directly on the page, make a GET request to the page URL with an 'ask' query parameter containing your question.

```http
GET https://developers.raycast.com/utilities/functions/createdeeplink.md?ask=<question>
```

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

### Toast API Usage

Source: https://developers.raycast.com/api-reference/feedback/toast

Example of how to display a toast message with a primary action.

```APIDOC
## POST /showToast

### Description
Displays a toast message to the user with customizable options including title, message, style, and actions.

### Method
POST

### Endpoint
/showToast

### Parameters
#### Request Body
- **title** (string) - Required - The title of the Toast.
- **message** (string) - Optional - An additional message for the Toast.
- **primaryAction** (Toast.ActionOptions) - Optional - The primary Action the user can take.
- **secondaryAction** (Toast.ActionOptions) - Optional - The secondary Action the user can take.
- **style** (Toast.Style) - Optional - The style of the Toast.

### Request Example
```json
{
  "title": "Finished cooking",
  "message": "Delicious pasta for lunch",
  "style": "Success",
  "primaryAction": {
    "title": "Do something",
    "onAction": "(toast) => { console.log('The toast action has been triggered'); toast.hide(); }"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "success"
}
```
```

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

### Start Raycast Extension in Development Mode

Source: https://developers.raycast.com/information/developer-tools/cli

Starts your extension in development mode, enabling features like automatic reloading on save and error overlays for faster debugging. Ensure Raycast Preferences > Advanced > "Auto-reload on save" is enabled for this functionality.

```bash
npx ray develop
```

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

### Querying Documentation

Source: https://developers.raycast.com/utilities/functions/executesql

Perform an HTTP GET request on the current page URL with the `ask` query parameter to get additional information not directly available.

```APIDOC
## Agent Instructions: Querying This Documentation

### Description
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

### Method
GET

### Endpoint
`https://developers.raycast.com/utilities/functions/executesql.md?ask=<question>`

### Parameters
#### Query Parameters
* **ask** (string) - Required - The question should be specific, self-contained, and written in natural language.

### Response
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

### Usage
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```

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

### Querying Documentation with 'ask' Parameter

Source: https://developers.raycast.com/information/lifecycle/arguments

To get specific information not directly present, make a GET request to the documentation URL with the `ask` query parameter followed by your natural language question.

```http
GET https://developers.raycast.com/information/lifecycle/arguments.md?ask=<question>
```

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

### Query Documentation with `ask` Parameter

Source: https://developers.raycast.com/api-reference/preferences

To get additional information not present on the current page, perform an HTTP GET request to the page URL with the `ask` query parameter. The question should be specific and self-contained.

```http
GET https://developers.raycast.com/api-reference/preferences.md?ask=<question>
```

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

### Query Documentation with `ask` Parameter

Source: https://developers.raycast.com/information/developer-tools/manage-extensions-command

To get information not directly on the page, perform an HTTP GET request to the current page URL with the `ask` query parameter. The question should be specific and in natural language. Use this for clarifications or to retrieve related documentation.

```http
GET https://developers.raycast.com/information/developer-tools/manage-extensions-command.md?ask=<question>
```

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

### Get Browser Tab Content as Markdown

Source: https://developers.raycast.com/api-reference/browser-extension

Fetches the content of the active browser tab and copies it to the clipboard as markdown. Ensure the Browser Extension is installed.

```typescript
import { BrowserExtension, Clipboard } from "@raycast/api";

export default async function command() {
  const markdown = await BrowserExtension.getContent({ format: "markdown" });

  await Clipboard.copy(markdown);
}
```

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

### Simple Tool Example

Source: https://developers.raycast.com/ai/learn-core-concepts-of-ai-extensions

A basic tool function that returns a static string. This serves as the foundation for more complex tools.

```typescript
export default function tool() {
  return "Hello, world!";
}
```

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

### Get List of Open Browser Tabs

Source: https://developers.raycast.com/api-reference/browser-extension

Fetches a list of all currently open browser tabs. The result can be logged to the console for inspection. Requires the Browser Extension to be installed.

```typescript
import { BrowserExtension } from "@raycast/api";

export default async function command() {
  const tabs = await BrowserExtension.getTabs();
  console.log(tabs);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.