Raycast Extension Development

Build Raycast extensions using React, TypeScript, and Node.js.

Quick Start

1. Create extension: Run "Create Extension" command in Raycast
2. Install & develop: npm install && npm run dev
3. Edit: Modify src/index.tsx, changes hot-reload automatically
4. Test: Extension appears at top of Raycast root search

Choosing a UI Primitive

Decision Tree

1. Displaying items the user searches/filters?

- Text-focused → List - Image-focused → Grid

1. Collecting user input? → Form

1. Showing detailed content? → Detail (supports markdown + metadata)

1. Always-visible status bar? → MenuBarExtra

Core Patterns

List with ActionPanel

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

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

Data Fetching

import { List } from "@raycast/api";
import { useFetch } from "@raycast/utils";

export default function Command() {
  const { data, isLoading } = useFetch<Item[]>("https://api.example.com/items");
  
  return (
    <List isLoading={isLoading}>
      {data?.map((item) => <List.Item key={item.id} title={item.name} />)}
    </List>
  );
}

AI Integration

import { AI, Clipboard } from "@raycast/api";

export default async function Command() {
  const answer = await AI.ask("Summarize this text");
  await Clipboard.copy(answer);
}

[!NOTE]
AI requires Raycast Pro. Check access with environment.canAccess(AI).

References

For detailed documentation, see:

• UI Components: [references/ui-components.md](references/ui-components.md) - List, Detail, Form, Grid, ActionPanel, MenuBarExtra
• Hooks & Utilities: [references/hooks-utilities.md](references/hooks-utilities.md) - useFetch, LocalStorage, Clipboard, OAuth, runAppleScript
• AI API: [references/ai-api.md](references/ai-api.md) - AI.ask, useAI, model selection, streaming
• Package Structure: [references/package-structure.md](references/package-structure.md) - manifest, commands, preferences

Examples

Runnable examples in examples/: