### Initialize Local Repository for Private Extension Store

Source: https://developers.raycast.com/llms-full.txt

Navigate to the desired folder and initialize a local repository for your private extension store. This setup includes a 'Getting Started' extension.

```bash
cd your-project-folder
npm init @raycast/extension
```

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

### Build and Develop the Getting Started Extension

Source: https://developers.raycast.com/llms-full.txt

After creating the local repository, navigate into the 'getting-started' folder. Run 'npm run dev' to build the extension and start development mode. Raycast will open, showing the extension in the Development section.

```bash
cd getting-started
npm run dev
```

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

### Install and Run AI Extension in Development Mode

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

Navigate to your extension directory and run these commands to install dependencies and start the extension in development mode with hot reloading and error reporting.

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

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

### Listing Installed Homebrew Packages

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

This example demonstrates how to use useExec to fetch and display a list of installed Homebrew packages. It parses the JSON output to extract package names.

```typescript
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>
  );
}
```

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

### Example Usage of Local Storage

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

This example demonstrates setting and getting an item from local storage within a Raycast command.

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

export default async function Command() {
  await LocalStorage.setItem("favorite-fruit", "apple");
  const item = await LocalStorage.getItem<string>("favorite-fruit");
}
```

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

### PKCEClient Initialization Example

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

An example of how to initialize and use the OAuth PKCEClient with specific provider details.

```APIDOC
## OAuth PKCEClient Initialization Example

### Description
This example shows how to create an instance of `OAuth.PKCEClient` for authenticating with Twitter, specifying the redirect method, provider name, icon, and description.

### Method
constructor

### Endpoint
N/A (SDK usage)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { OAuth } from "@raycast/api";

const client = new OAuth.PKCEClient({
  redirectMethod: OAuth.RedirectMethod.Web,
  providerName: "Twitter",
  providerIcon: "twitter-logo.png",
  description: "Connect your Twitter"
});
```

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

#### Response Example
None
```

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

### ESLint Configuration Example

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

Example ESLint configuration file demonstrating the use of plugins and rules for a Raycast project. This setup helps enforce coding standards.

```javascript
module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  plugins: [
    '@raycast/prefer-placeholders',
  ],
  rules: {
    // Example rule: disallow the use of 'warn'
    '@raycast/prefer-placeholders/no-warn': 'error',
  },
};
```

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

### Example of a valid extension binary

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

Ensure your extension binary is downloaded or installed from a trusted source and includes hash verification for integrity.

```text
✅ Binary downloaded or installed from a trusted location with additional integrity checking through hashes (that is, verify whether the downloaded binary really matches the expected binary)
```

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

### Full Example with usePromise and Pagination

Source: https://developers.raycast.com/llms-full.txt

A complete example demonstrating the use of usePromise with pagination in a Raycast List component.

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

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

  const { isLoading, data, pagination } = usePromise(
    (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>
  );
}
```

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

### Basic List Example

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

A fundamental example demonstrating how to render a simple list using the `List` component from `@raycast/api`.

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

export default function Command() {
  return (
    <List>
      <List.Item title="Hello World" />
    </List>
  );
}
```

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

### Basic useForm Example

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

A simple example demonstrating how to use the useForm hook to manage form state and handle submission.

```typescript
import { useForm } from '@raycast/utils';

interface FormValues {
  name: string;
}

function MyForm() {
  const { values, submit, reset } = useForm<FormValues>({
    initialValues: { name: '' },
    onSubmit: (values) => {
      console.log('Form submitted:', values);
    },
  });

  return (
    <Form>
      <Form.TextField title="Name" value={values.name} onChange={(name) => { /* update state */ }} />
      <Form.Button text="Submit" onClick={submit} />
      <Form.Button text="Reset" onClick={reset} type="secondary" />
    </Form>
  );
}
```

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

### AI Response Example

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

An example demonstrating how to use an AI function, likely to get a response based on context. This code snippet is part of a larger example and might require additional setup.

```javascript
const answer = await AI.getResponse();
```

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

### System Utilities API

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

This set of utilities exposes some of Raycast's native functionality to allow deep integration into the user's setup. For example, you can use the Application APIs to check if a desktop application is installed and then provide an action to deep-link into it.

```APIDOC
## System Utilities API

### Description
This set of utilities exposes some of Raycast's native functionality to allow deep integration into the user's setup. For example, you can use the Application APIs to check if a desktop application is installed and then provide an action to deep-link into it.

### Endpoint
/api-reference/utilities

### Parameters
This section is not explicitly documented in the source.
```

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

### Basic useExec Example

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

Demonstrates a simple execution of a shell command and logging its output. Ensure the command is available in the user's PATH.

```javascript
import { useExec } from "@raycast/utils";

function ExecCommand() {
  const { isLoading, data, error } = useExec("echo Hello World");

  if (isLoading) {
    return "Loading...";
  }

  if (error) {
    return `Error: ${error.message}`;
  }

  return `Output: ${data}`;
}
```

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

### Get Installed Applications

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

Retrieves a list of all installed applications on the system. This function is asynchronous and requires `await`.

```javascript
const installedApplications = await getApplications();
```

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

### Using file Preference

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

Example demonstrating the `file` preference type. This allows users to select a file.

```javascript
file
```

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

### Get Installed Applications

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

Fetches a list of all applications installed on the user's system. This is useful for building features that interact with or display information about installed software.

```typescript
const installedApplications = await getApplications()

```

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

### Basic useExec Example

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

Demonstrates how to use the `useExec` hook to execute a command and display its output. The `isLoading` state is managed automatically.

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

export default () => {
  const { isLoading, data, error } = useExec("echo Hello World");

  return (
    <List isLoading={isLoading} error={error}>
      <List.Section title="Output">
        <List.Item title={data || "No output yet"} />
      </List.Section>
    </List>
  );
};
```

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

### useExec with Arguments and Options

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

Shows how to pass arguments and options to the useExec hook. This example executes a command with arguments and specifies the current directory.

```javascript
import { useExec } from "@raycast/utils";
import { List } from "@raycast/api";

export default function Command() {
  const { isLoading, data, error } = useExec("ls", ["-la", "./src"], {
    cwd: "./src",
  });

  if (isLoading) {
    return <List.EmptyView title="Loading..." />;
  }

  if (error) {
    return <List.EmptyView title="Error" description={error.message} />;
  }

  return (
    <List>
      <List.Item title={data.stdout} />
    </List>
  );
}
```

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

### Get Installed Applications

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

Use `getApplications` to retrieve a list of all installed applications on the user's system. This function is part of the Raycast utilities.

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

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

### Get All Installed Applications

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

Retrieves a list of all applications installed on the system. This can be used to find specific applications by their bundle ID or to list available applications.

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

// it is a lot more reliable to get an app by its bundle ID than its path
async function findApplication(bundleId: string): Application | undefined {
  const installedApplications = await getApplications();
  return installedApplications.filter((application) => application.bundleId == bundleId);
}
```

```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(", "));
}
```

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

### Manifest with Entrypoints

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

Demonstrates defining entry points for an extension in the manifest.json.

```json
{
  "name": "my-extension",
  "title": "My Extension",
  "description": "A short description of my extension.",
  "icon": "icon.png",
  "author": "Your Name",
  "homepage": "https://your-website.com",
  "view": "list",
  "entrypoints": {
    "main": "index.js",
    "preferences": "preferences.js"
  },
  "commands": [
    {
      "name": "main-command",
      "title": "Main Command",
      "description": "The main command for my extension.",
      "mode": "view"
    }
  ]
}
```

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

### Basic useExec Example

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

Demonstrates a simple use of the useExec hook to run a command and display its output. Ensure you have the necessary imports for React and the useExec hook.

```javascript
import { useExec } from "@raycast/utils";
import { List } from "@raycast/api";

export default function Command() {
  const { isLoading, data, error } = useExec("echo Hello World");

  if (isLoading) {
    return <List.EmptyView title="Loading..." />;
  }

  if (error) {
    return <List.EmptyView title="Error" description={error.message} />;
  }

  return (
    <List>
      <List.Item title={data.stdout} />
    </List>
  );
}
```

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

### Get Access Token with Custom Authorization and Token URLs

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

This example shows how to get an access token when both the authorization and token URLs are custom. This is for advanced OAuth configurations.

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

const client = new OAuth.PKCEClient({
  redirectUrl: "https://raycast.com/oauth/callback",
  clientId: "YOUR_CLIENT_ID",
  clientSecret: "YOUR_CLIENT_SECRET",
});

async function getAccessTokenWithCustomURLs() {
  const token = await client.getAccessToken({
    scope: "read write",
    authorizationUrl: "https://example.com/oauth/authorize",
    tokenUrl: "https://example.com/oauth/token",
  });
  return token;
}
```

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

### Basic useExec Example

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

This example demonstrates how to use the useExec hook to run a simple command and display its output. Ensure you have the necessary permissions to execute the command.

```typescript
import { useExec } from "@raycast/utils";
import { List } from "@raycast/api";

export default function Command() {
  const { isLoading, data, error } = useExec(["echo", "Hello World"]);

  if (error) {
    return <List.EmptyView title="Failed to execute command" description={error.message} />;
  }

  return (
    <List.Item
      title={data?.stdout || "Loading..."}
      subtitle={data?.stderr || ""}
    />
  );
}
```

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

### Get Access Token with Custom Authorization URL

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

This example shows how to get an access token when the authorization URL needs to be customized. This is useful for services with non-standard OAuth flows.

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

const client = new OAuth.PKCEClient({
  redirectUrl: "https://raycast.com/oauth/callback",
  clientId: "YOUR_CLIENT_ID",
  clientSecret: "YOUR_CLIENT_SECRET",
});

async function getAccessTokenWithCustomAuthURL() {
  const token = await client.getAccessToken({
    scope: "read write",
    authorizationUrl: "https://example.com/oauth/authorize",
  });
  return token;
}
```

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

### Using directory Preference

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

Example of the `directory` preference type. This enables users to select a directory.

```javascript
directory
```

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

### Basic useExec Example

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

Demonstrates how to use the useExec hook to run a simple command and display its output. Ensure you import 'useExec' from '@raycast/utils'.

```typescript
import { useExec } from "@raycast/utils";

export default function ScriptRunner() {
  const { isLoading, data, error } = useExec(["echo", "Hello World"]);

  if (isLoading) {
    return <Detail isLoading={true} />;
  }

  if (error) {
    return <Detail markdown={`Error: ${error.message}`} />;
  }

  return <Detail markdown={`Output: ${data.stdout}`} />;
}
```

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

### Full Example: Raycast List with Pagination

Source: https://developers.raycast.com/llms-full.txt

A complete example demonstrating how to use useFetch with pagination to populate a Raycast List component.

```typescript
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>
  );
}
```

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

### Basic Grid

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

A fundamental example of a Grid component. Use this as a starting point for displaying a list of items.

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

interface Item {
  title: string;
  value: string;
}

const Grid = () => {
  const items: Item[] = [
    { title: "Item 1", value: "1" },
    { title: "Item 2", value: "2" },
    { title: "Item 3", value: "3" },
  ];

  return (
    <List searchBarPlaceholder="Filter items...">
      {items.map((item, index) => (
        <List.Item
          key={index}
          title={item.title}
          actions={
            <ActionPanel>
              <Action.OpenInBrowser url={`https://example.com/${item.value}`} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
};

export default Grid;
```

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

### Example Command Using Preferences

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

This example command imports necessary components from `@raycast/api` and demonstrates how to use the `openExtensionPreferences` function within a React component.

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

export default function Command() {
  const markdown = "API key incorrect. Please update it in extension preferences and try again.";

  return (
    <Detail
      markdown={markdown}
      actions={
        <ActionPanel>
          <Action
            title="Open Extension Preferences"
            onAction={openExtensionPreferences}
          />
        </ActionPanel>
      }
    />
  );
}
```

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

### Configure ESLint

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

Configure your ESLint setup to use the `@raycast/eslint-config`. This example shows how to extend the Raycast configuration in an `eslint.config.js` file.

```javascript
import { defineConfig } from '@raycast/eslint-config'

export default defineConfig({
  // Your custom ESLint rules here
}, {
  // Your custom ESLint rules here
})

```

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

### Manifest with Preferences

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

Example of a manifest.json file including preference definitions for user configuration.

```json
{
  "name": "my-extension",
  "title": "My Extension",
  "description": "A short description of my extension.",
  "icon": "icon.png",
  "author": "Your Name",
  "homepage": "https://your-website.com",
  "view": "list",
  "commands": [
    {
      "name": "main-command",
      "title": "Main Command",
      "description": "The main command for my extension.",
      "mode": "view"
    }
  ],
  "preferences": [
    {
      "name": "api_key",
      "title": "API Key",
      "type": "string",
      "description": "Your API key for the service.",
      "required": true
    },
    {
      "name": "enable_feature",
      "title": "Enable Feature",
      "type": "boolean",
      "description": "Enable or disable a specific feature.",
      "default": false
    }
  ]
}
```

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

### Example: Auto Pop to Root on Mount

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

This example demonstrates how to automatically navigate to the root view after a short delay when a component mounts. It requires importing necessary functions from '@raycast/api' and 'react'.

```typescript
import { Detail, popToRoot } from "@raycast/api";
import { useEffect } from "react";
import { setTimeout } from "timers";

export default function Command() {
  useEffect(() => {
    setTimeout(() => {
      popToRoot({ clearSearchBar: true });
    }, 1000);
  });

  return <Detail markdown="# Navigating back to root..." />;
}
```

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

### Action Input Placeholder Example

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

Shows how to set a placeholder for an input field within an action. This guides the user on expected input.

```typescript
["$", "div", null, {"aria-labelledby": "$undefined", "className": "blocks w-full space-y-2 lg:space-y-3 leading-normal self-center **:text-left text-left", "children": [["$", "p", "EBodZvs4C5mI", {"className": "has-\\.button,input\\:flex has-\\.button,input\\:flex-wrap has-\\.button,input\\:gap-2 has-\\.button,input\\:items-center decoration-primary/6 print:break-inside-avoid w-full max-w-\\[unset\\].text-start self-start justify-start", "children": [["$", "$1", "gaX2qjEOpt5N", {"children": [["$", "$1", "0", {"children": ["$", "code", "mark", {"className": "py-px px-1.5 min-w-6.5 justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded-sm text-\\[.875em\\] leading-\\[calc(max(1.20em,1.25rem))\\] break-words hyphens-none", "children": "(input: "}] ] } ] ] } ] ] },"$L29f", ["$", "$1", "ErGw7qPawpWk", {"children": [["$", "$1", "0", {"children": ["$", "code", "mark", {"className": "py-px px-1.5 min-w-6.5 justify-center items-center ring-1 ring-inset ring-tint bg-tint rounded-sm text-\\[.875em\\] leading-\\[calc(max(1.20em,1.25rem))\\] break-words hyphens-none", "children": ""}] ] } ] ] } ] ] }
```

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

### Run Basic AppleScript

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

Execute a simple AppleScript command to get the current date and time. This is a basic example demonstrating the core functionality.

```javascript
import { runAppleScript } from "@raycast/utils";

async function example() {
  const { stdout, stderr, executionError } = await runAppleScript(
    'tell application "System Events" to get the date string of (current date)'
  );

  if (executionError) {
    console.error("Error executing AppleScript:", stderr);
  } else {
    console.log("Current date string:", stdout);
  }
}
```

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

### Install Extension from Pull Request

Source: https://developers.raycast.com/llms-full.txt

Clone and set up an extension from a specific branch of a fork for review. Ensure you have Node.js and npm installed.

```shell
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
```

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

### Example: Using LocalStorage in a Raycast Command

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

Demonstrates setting, getting, and removing an item using the LocalStorage API within a Raycast command.

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

export default async function Command() {
 await LocalStorage.setItem("favorite-fruit", "apple");
 console.log(await LocalStorage.getItem<string>("favorite-fruit"));
 await LocalStorage.removeItem("favorite-fruit");
 console.log(await LocalStorage.getItem<string>("favorite-fruit"));
```

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

### Initialize a New Raycast Extension from a Template

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

Use this command to start a new Raycast extension project using a specified template. Replace `<template-name>` with the desired template.

```bash
npm init raycast-extension -t <template-name>
```

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

### Basic List Example

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

Demonstrates how to create a simple list with a single section and an item using the Raycast List API.

```jsx
import { List } from "@raycast/api";

export default function Command() {
 return (
   <List>
     <List.Section title="Section 1">
       <List.Item title="Item 1" />
     </List.Section>
   </List>
 );
}
```

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

### useAI Hook Example

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

This snippet demonstrates the basic usage of the useAI hook. It shows how to define callbacks for when an AI execution starts and succeeds.

```javascript
import { useAI } from '@raycast/utils';

function MyComponent() {
  const { data, isLoading, error } = useAI(
    'Describe the image in one sentence.',
    {
      onWillExecute: () => {
        console.log('AI execution will start.');
      },
      onData: (data) => {
        console.log('AI execution succeeded:', data);
      },
      onError: (error) => {
        console.error('AI execution failed:', error);
      },
    }
  );

  // ... render component based on data, isLoading, error
}
```

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

### Get List of Open Browser Tabs

Source: https://developers.raycast.com/llms-full.txt

Fetches a list of all currently open browser tabs. This requires the Browser Extension to be installed and is not available on Windows.

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

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

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

### Initialize a Local Repository

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

Select a folder to create a local repository for your private extension store. Store all team extensions in a single repository for easier collaboration.

```bash
mkdir getting-started
cd getting-started
```

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

### Initialize OAuthService for GitHub

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

This example demonstrates how to initialize the OAuthService for GitHub using the PKCEClient. Ensure you have the necessary client ID and configure the authorize and token URLs correctly.

```typescript
const client = new OAuth.PKCEClient({
      redirectMethod: OAuth.RedirectMethod.Web,
      providerName: "GitHub",
      providerIcon: "extension_icon.png",
      providerId: "github",
      description: "Connect your GitHub account",
    });
    
    const github = new OAuthService({
      client,
      clientId: "7235fe8d42157f1f38c0",
      scope: "notifications repo read:org read:user read:project",
      authorizeUrl: "https://github.oauth.raycast.com/authorize",
      tokenUrl: "https://github.oauth.raycast.com/token",
    });
```

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

### Get Applications

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

Use `getApplications` to retrieve a list of all installed applications. This function is useful for integrating with or listing applications available on the user's system.

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

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

### Manifest with Settings

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

Demonstrates the 'settings' property for configuring extension-specific settings.

```json
{
  "name": "My Extension",
  "description": "A short description of my extension.",
  "author": "My Name",
  "icon": "icon.png",
  "settings": {
    "my-setting": {
      "type": "text",
      "title": "My Setting",
      "description": "A description for my setting.",
      "default": "default value"
    }
  },
  "commands": [
    {
      "name": "my-command-with-settings",
      "title": "My Command with Settings",
      "description": "Description of my command.",
      "mode": "view"
    }
  ]
}
```

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

### AI Text Generation

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

Generate text using AI models. This snippet shows a basic example of calling the AI API to get a response.

```javascript
import { AI } from "@raycast/api";

async function generateText() {
  const prompt = "Write a short poem about Raycast.";
  const response = await AI.ask(prompt);
  console.log(response);
}
```

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

### Configure GitHub OAuth Provider

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

Example of configuring the GitHub OAuth provider with its ID and a descriptive name. This is a common setup for integrating GitHub functionalities.

```javascript
providerId: "github",
providerName: "GitHub",
clientId: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET",
scopes: ["repo", "user", "read:org"],
authorizationUrl: "https://github.com/login/oauth/authorize",
tokenUrl: "https://github.com/login/oauth/access_token",
profileUrl: "https://api.github.com/user",
redirectUrl: "https://raycast.com/oauth/github"

```

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

### Configure ESLint (.eslintrc.js)

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

Set up your ESLint configuration file. This example extends Raycast's recommended configuration and includes settings for Prettier.

```javascript
module.exports = {
  extends: ['raycast'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};
```

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

### Navigating Between Raycast Pages

Source: https://developers.raycast.com/information/best-practices

Provides examples of how to link to previous and next pages within the Raycast documentation. Useful for guiding users through related content.

```typescript
Previous
Deeplinks
```

```typescript
Next
Developer Tools
```

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

### Get Markdown Content from Browser Tab

Source: https://developers.raycast.com/llms-full.txt

Retrieves the content of the active browser tab in markdown format and copies it to the clipboard. 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);
}
```

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

### Manifest with Script Command

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

Example of a manifest.json file defining a script command.

```json
{
  "name": "my-extension",
  "title": "My Extension",
  "description": "A short description of my extension.",
  "icon": "icon.png",
  "author": "Your Name",
  "homepage": "https://your-website.com",
  "view": "list",
  "commands": [
    {
      "name": "run-script",
      "title": "Run Script",
      "description": "Executes a script.",
      "mode": "script",
      "script": "script.js"
    }
  ]
}
```

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

### Manifest with View Command

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

Example of a manifest.json file defining a view command.

```json
{
  "name": "my-extension",
  "title": "My Extension",
  "description": "A short description of my extension.",
  "icon": "icon.png",
  "author": "Your Name",
  "homepage": "https://your-website.com",
  "view": "list",
  "commands": [
    {
      "name": "show-view",
      "title": "Show View",
      "description": "Displays a custom view.",
      "mode": "view",
      "view": "detail"
    }
  ]
}
```

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

### AI.ask with Clipboard Copy

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

This example shows how to use AI.ask to get a suggestion and copy it directly to the clipboard. It also includes a check for AI access using environment.canAccess.

```typescript
import { AI, getSelectedFinderItems, showHUD, environment } from "@raycast/api";
import fs from "fs";

export default async function main() {
  if (environment.canAccess(AI)) {
    const answer = await AI.ask("Suggest 5 jazz songs");
    await Clipboard.copy(answer);
  } else {
    await showHUD("You don't have access :(");
  }
}
```

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

### Generating a List of Ideas

Source: https://raycast.com/pro

Example of prompting an LLM to generate a list of creative ideas based on a given topic. Adjust the prompt to guide the LLM's output.

```typescript
import { showHUD, getPreferenceValues } from "@raycast/api";
import OpenAI from "openai";

interface Preferences {
  "openai-api-key": string;
}

export default async function command() {
  const preferences = getPreferenceValues<Preferences>();
  const openai = new OpenAI({
    apiKey: preferences["openai-api-key"],
  });

  const completion = await openai.chat.completions.create({
    messages: [
      { role: "system", content: "You are a creative assistant that generates ideas." },
      { role: "user", content: "Generate 5 creative ideas for a new productivity app." },
    ],
    model: "gpt-3.5-turbo",
  });

  await showHUD(`Ideas: ${completion.choices[0].message.content}`);
}
```

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

### Get Text Content from Specific Element

Source: https://developers.raycast.com/llms-full.txt

Retrieves text content from a specific HTML element (e.g., the title) in the active browser tab and copies it to the clipboard. The Browser Extension must be installed.

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

export default async function command() {
  const title = await BrowserExtension.getContent({ format: "text", cssSelector: "title" });

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

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

### Key Codes Example

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

Shows how to use specific key codes for shortcuts, including alphanumeric and symbol keys.

```javascript
import { Keyboard } from '@raycast/api';

// ...

shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.A }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.B }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.C }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.D }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.E }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.F }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.G }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.H }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.I }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.J }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.K }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.L }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.M }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.N }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.O }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.P }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Q }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.R }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.S }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.T }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.U }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.V }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.W }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.X }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Y }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Z }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.One }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Two }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Three }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Four }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Five }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Six }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Seven }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Eight }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Nine }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Zero }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Period }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Comma }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Slash }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Quote }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Backtick }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Section }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Caret }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.At }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Dollar }}
shortcut={{ modifiers: ["cmd"], key: Keyboard.Key.Backslash }}
```

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

### Handling Command Output with Callbacks

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

This example shows how to use the `onData` and `onWillExecute` callbacks provided by useExec. `onData` is called whenever new data is available from stdout, and `onWillExecute` is called just before the command starts.

```typescript
import { useExec } from "@raycast/utils";

function MyComponent() {
  const { stdout, stderr, isLoading, error } = useExec({
    command: "ls -l",
    onData: (data) => {
      console.log("Received data:", data);
    },
    onWillExecute: () => {
      console.log("Command will execute now.");
    },
  });

  // ... rest of the component logic
  return "Check console for logs.";
}
```

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

### Example: Creating Extension, External Extension, and Script Command Deeplinks

Source: https://developers.raycast.com/llms-full.txt

Demonstrates how to use createDeeplink to generate deeplinks for different scenarios within a Raycast command. Includes examples for internal extension commands, external extension commands, and script commands with arguments.

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

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

### Manifest with Menus

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

Example of defining menu items for an extension in the manifest.json.

```json
{
  "name": "my-extension",
  "title": "My Extension",
  "description": "A short description of my extension.",
  "icon": "icon.png",
  "author": "Your Name",
  "homepage": "https://your-website.com",
  "view": "list",
  "commands": [
    {
      "name": "main-command",
      "title": "Main Command",
      "description": "The main command for my extension.",
      "mode": "view"
    }
  ],
  "menus": [
    {
      "name": "context-menu",
      "title": "Context Menu",
      "commands": [
        {
          "name": "menu-action",
          "title": "Menu Action"
        }
      ]
    }
  ]
}
```

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

### Configure Google OAuth Provider

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

Example of configuring the Google OAuth provider, specifying necessary details like client ID, secret, scopes, and URLs for authentication and token exchange. This setup is used for integrating Google services.

```javascript
providerId: "google",
providerName: "Google",
clientId: "YOUR_CLIENT_ID",
clientSecret: "YOUR_CLIENT_SECRET",
scopes: ["openid", "email", "profile"],
authorizationUrl: "https://accounts.google.com/o/oauth2/v2/auth",
tokenUrl: "https://oauth2.googleapis.com/token",
profileUrl: "https://www.googleapis.com/oauth2/v2/userinfo",
redirectUrl: "https://raycast.com/oauth/google"

```

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

### Basic List with Actions

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

A fundamental example demonstrating how to create a List with Action.Item elements. This is useful for displaying a list of options that users can interact with.

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

export default function Command() {
  return (
    <List>
      <List.Item
        title="Preview"
        actions={
          <ActionPanel>
            <Action.OpenInBrowser url="https://raycast.com" />
          </ActionPanel>
        }
      />
    </List>
  );
}
```

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

### Listing Installed Raycast Extensions

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

Show all installed extensions in Raycast. This command is helpful for managing your extensions and verifying their installation status.

```bash
ray list extensions
```

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

### Manifest with Multiple Commands and Preferences

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

A comprehensive manifest example including multiple commands and various preference types.

```json
{
  "name": "My Extension",
  "author": "Raycast",
  "version": "1.0.0",
  "commands": [
    {
      "name": "Command One",
      "description": "First command",
      "scriptPath": "command1.js"
    },
    {
      "name": "Command Two",
      "description": "Second command",
      "scriptPath": "command2.js"
    }
  ],
  "preferences": [
    {
      "name": "setting1",
      "type": "text",
      "description": "A text setting"
    },
    {
      "name": "setting2",
      "type": "boolean",
      "description": "A boolean setting"
    }
  ]
}
```