Prompt guide 

One of the fastest ways to build a Gadget application is by using AI to assist with writing code. When building, iterating on, or debugging applications using AI tools and Large Language Models (LLMs), a well-structured and extensive prompt helps provide the model with clearer guidelines and examples that can dramatically improve output.

Using AI agents with Gadget 

Gadget provides several ways to use AI effectively:

• Built-in Gadget assistant: Great for data modeling and app scaffolding. Use it in the Gadget editor to create models, set up relationships, and scaffold your application structure.
• Local development with ggt: Use ggt dev to bring your project down locally, then use Cursor, Claude Code, or other AI-powered editors to write frontend and backend code.
• Claude Code skill: Install the Gadget skill to get platform-specific guidance and best practices when working with Gadget projects in Claude Code. See the Claude Code skill section below for installation instructions.

Quick tips 

• Be explicit: If known, tell the assistant exactly what you want it to output and in which format. It is best to tell the assistant what you want instead of what not to do.
• Give context: Include the purpose, audience, and any constraints.
• If known, use Gadget vocabulary: use models (Postgres tables under the hood), actions (API endpoints), and background actions (background jobs). This helps the assistant map intent to Gadget concepts.
• Clear context regularly: If the assistant is not providing the expected output, clear the context or start a new chat, and try again.

Providing Gadget-specific context 

AI editors like Cursor allow you to index documentation.

You can also provide the following as context by copy-pasting the raw markdown or URLs:

• Documentation context: Each documentation page has a "Copy as Markdown" button that you can use to provide context to AI assistants. You can also access any docs page as markdown by appending .md to the URL. For example, /guides/models/overview.md.
• llms.txt file: Gadget provides https://gadget.dev/llms.txt with comprehensive information about the platform.

Recommended workflow 

1. Start with the built-in assistant: Use Gadget's built-in AI assistant in the editor to scaffold your app, create models, and set up your initial data structure.
2. Bring it down locally: Run ggt dev to sync your project to your local machine.
3. Use your preferred AI editor: Open the project in Cursor, Claude Code, or another AI-powered editor to write and refine your frontend and backend code with full context of your project structure.

Make sure to use source control to track your changes and version your code.

Claude Code skill 

If you are using Claude Code, Cursor, or any AI-powered editor that supports skills, you can install the Gadget skill to get platform-specific guidance and best practices automatically when working with Gadget projects.

Installation 

To install the Gadget skill, run:

terminal
Copy
npx skills add gadget-inc/skills --skill gadget-best-practices

Usage 

Once installed, the skill should activate automatically when you are working with Gadget projects or mention relevant keywords like "Gadget app" or "Shopify app".

You can also manually activate the skill by typing:

terminal
Copy
/gadget-best-practices

What the skill provides 

The Claude Code skill includes:

• Gadget-specific best practices: Guidance on data modeling, actions, routes, and access control
• React hooks and frontend development: Assistance with building frontends using Gadget React hooks
• Platform terminology: Understanding of Gadget concepts like models, actions, computed views, and background actions

For more information, visit the Gadget skills repository.

Additional resources 

We recommend reading the following guides to learn more about prompting AI agents:

• Anthropic's prompt engineering guide for Claude
• OpenAI's prompt engineering guide for general best practices