# Templates

Raycast provides a variety of templates to kickstart your extension.

Raycast provides 3 types of templates:

* **Commands:** These are templates for [commands](https://developers.raycast.com/information/terminology).
* **Tools:** These are templates for [tools](https://developers.raycast.com/terminology#tool). You can select a different one for each tool that you add to your extension.
* **Extension Boilerplates:** These are fully built extensions designed to be tweaked by organizations for internal use.

## Commands

### Show Detail

<details>

<summary>Renders a simple Hello World from a markdown string.</summary>

![Detail Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-e9490e58b081fe70c0c380534a452f981ed4d786%2Fdetail-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/user-interface/detail) for more information about customization.
{% endhint %}

</details>

### Submit Form

<details>

<summary>Renders a form that showcases all available form elements.</summary>

![Submit Form Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-ee2d5d4c3fa780b7f14309bf826073e9dde9a96e%2Fform-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/user-interface/form) for more information about customization.
{% endhint %}

</details>

### Show Grid

<details>

<summary>Renders a grid of Icons available from Raycast.</summary>

Defaults to a large grid, but provides a selection menu to change the size.

![Grid Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-585a703929e53a7f7f995ed2b6bf8e0a48f04faa%2Fgrid-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/user-interface/grid) for more information about customization.

See here for information about [Icons](https://developers.raycast.com/api-reference/user-interface/icons-and-images).
{% endhint %}

</details>

### Show List and Detail

<details>

<summary>Renders a list of options. When an option is selected, a Detail view is displayed.</summary>

![List and Detail Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-2b379c00faa242c756f1a2aaad0a054b1648f8d6%2Flist-detail-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/user-interface/list) for more information about customization.
{% endhint %}

</details>

### Menu Bar Extra

<details>

<summary>Adds a simple Menu Bar Extra with a menu.</summary>

![Menu Bar Extra Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-7bd81f2bcee7918b6921e552dae157b7f9c21733%2Fmenu-bar-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/menu-bar-commands) for more information about customization.
{% endhint %}

</details>

### Run Script

A example of a no-view command which shows a simple [HUD](https://developers.raycast.com/api-reference/feedback/hud).

### Show List

<details>

<summary>Renders a static list with each entry containing an icon, title, subtitle, and accessory.</summary>

![List Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-c15c646bcffee77a3945ebb25a79a7f03f0e6e2f%2Flist-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/user-interface/list) for more information about customization.
{% endhint %}

</details>

### Show Typeahead Results

<details>

<summary>Renders a dynamic and searchable list of NPM packages. The command fetches new items as the search is updated by the user.</summary>

![Typeahead Results Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-10b73f930dab0d742e677811c13b0b0c0706260b%2Ftypeahead-results-template.webp?alt=media)

</details>

### AI

<details>

<summary>Renders the output of an AI call in a Detail view.</summary>

![AI Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-8af8468d2f78f69d28e7da00ef75198fce867b3c%2Fai-template.webp?alt=media)

</details>

## Tools

<details>

<summary>A simple tool which asks for confirmation before executing.</summary>

![Tool with Confirmation Template Render](https://2922539984-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me_8A39tFhZg3UaVoSN%2Fuploads%2Fgit-blob-48fb942ab974ffd90cba6e3f0659fbd273a9a24f%2Ftool-with-confirmation-template.webp?alt=media)

{% hint style="info" %}
See the [API Reference](https://developers.raycast.com/api-reference/tool) for more information about customization.
{% endhint %}

</details>

## Extension Boilerplates

The Raycast Team has created high-quality templates to reinforce team experiences with the Raycast API.

Run `npm init raycast-extension -t <template-name>` to get started with these extensions. All templates can be found on the [templates page](https://www.raycast.com/templates).

Specific instructions about customizing the template can be found on the relevant [template page](https://www.raycast.com/templates). Simply customize the template as you see fit, then run `npm run publish` in the extension directory to allow your team to install the extension.


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.raycast.com/information/developer-tools/templates.md?ask=<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.
