Build plugins easily with AI

Front offers an innovative AI Prompt File designed to streamline the development of Front sidebar and composer plugins. This powerful tool empowers developers to use AI agents like Claude Code, ChatGPT, GitHub Copilot, and many others to quickly generate robust and efficient plugins tailored to various business use cases.

How the AI Prompt File Works

When an AI agent utilizes this prompt file, it guides them in creating plugins that seamlessly integrate with Front's platform. The prompt ensures that the generated code:

Adheres to Best Practices—Follows established best practices for developing with the Front Plugin SDK, ensuring high-quality and maintainable code that calls the SDK correctly and passes Front context effectively.
Leverages Front Data Models—Correctly utilizes Front's data models, allowing plugins to access and manipulate relevant information within conversations and drafts.
Employs Plugin Methods—Incorporates the appropriate plugin methods to interact with the Front interface and its functionalities.
Pulls Front Context—Accurately retrieves and uses contextual information directly from conversations or drafts, making plugins highly relevant and functional for users.
Documents its work—Comprehensively documents a project plan and generates a readme with instructions on running the plugin.
Enables Debugging Tools—Provides a robust debugging pane in developer mode (when ?debug=true is appended to plugin URL) that shows you exactly what the Front Plugin SDK is sending to your plugin in order to help you diagnose where things might be going wrong during development.

This approach significantly accelerates plugin development, reduces errors, and ensures that the resulting plugins are fully compatible and optimized for the Front environment.

Frameworks

By default, the AI prompt uses the following frameworks unless otherwise specified:

👍
If you want to use different frameworks, specify them when you feed your prompt to the AI tool or modify the prompt file itself.

Download the AI Prompt File

To get started with scaffolding your own Front plugins using AI, download the prompt file here:

AI Prompt File
Then instruct your AI agent to use the prompt to create a plugin, making sure to specify:
- Whether you want a sidebar or composer plugin
- Any framework alterations from the React / TypeScript / lucide-react defaults

Use the instructions in the prompt.md file to create a Front sidebar plugin that does XYZ

Run the plugin

After you scaffold the plugin using the AI prompt, complete the following steps to test it in Front. These instructions assume a React/TypeScript project with npm, so adapt them if you specified a different framework to scaffold the plugin.

Run npm install to install the project dependencies.
Run npm run dev to start a local server and note the server URL (typically http://localhost:3000)
In Front, create a developer app.
Add a plugin feature to your developer app with the plugin URL set to the local server URL.
👍
Append ?debug=true to the plugin URL if you want to enable the Debug Panel for your plugin.
Open your plugin in the Front sidebar or composer to view it.

That's it! You should have a working plugin scaffolded in ten minutes or less using this AI prompt.

Common gotchas

If your plugin code tries to open a pop-up or modal, it won't work in the plugin. Instead, you need to use the openUrlInPopup method. The prompt includes these instructions, but AI agents may overlook them.
On occasion, an AI agent may try to initialize the Plugin SDK using a hallucinated method. If your plugin loads indefinitely, tell the AI agent to review the loading instructions in the prompt file and follow them as closely as possible.

Example Applications Scaffolded by the AI Prompt

The AI prompt file can be used to scaffold a wide array of plugin applications. Here are a few examples that we have built:

📘
AI-generated demos: not production ready!
These plugins have been created using AI for the express purpose of demonstrating how plugins can be quickly scaffolded using a prompt file fed to an AI agent. The code has not been reviewed for production readiness, nor should it be used in a production environment without a detailed engineering review. The functionality of the plugins is enabled through local pseudocode rather than functioning public APIs. Treat the programming patterns and informational text throughout the project with a grain of salt. AI can hallucinate inaccurate information or suggest insecure, incorrect, inefficient, or inelegant best practices.

NetSuite Manager—A sidebar plugin that allows teammates to view and manage NetSuite data directly from Front.
Subscription Manager—A sidebar plugin that allows teammates to view and manage customer subscriptions directly from Front.
Attachment Encryptor—A composer plugin that lists all attachments in a message draft and allows users to encrypt them before sending for secure transmission.
Start Cursor agents from a Front plugin—A sidebar plugin that allows you to quickly pass context from Front conversations to Cursor to begin fixing problems reported by customers.

NetSuite Manager

A sidebar plugin that allows teammates to access customer data, manage invoices, create reports, create drafts with NetSuite data, track inventory, view analytics, and more without leaving Front.