Front Plugin Development

Front Plugin Development

Build production-ready plugins for Front using the official Plugin SDK (@frontapp/​plugin-sdk).

When to Use This Skill

• Creating a sidebar plugin (context panel in Front)
• Creating a composer plugin (message toolbar integration)
• Extending Front's UI with custom functionality
• Working with the Plugin SDK (not the REST API)

Plugin Types

1. Sidebar Plugin - Appears in Front sidebar, shows context for selected conversation(s)
2. Composer Plugin - Appears in message composer toolbar, operates on draft being composed

Key Distinction

• Plugin SDK (@frontapp/​plugin-sdk) - Client-side, runs in iframe embedded in Front
• REST API (packages/​core/​src/​front/​client.ts) - Server-side, webhooks and API calls

This skill is for the Plugin SDK. For REST API operations (webhooks, drafts via API), see the front-webhook skill.

Quick Start

// src/​providers/​frontContext.tsx
import { createContext, useContext, useEffect, useState } from 'react'
import Front from '@frontapp/​plugin-sdk'

const FrontContext = createContext()

export function useFrontContext() {
  return useContext(FrontContext)
}

export function FrontContextProvider({ children }) {
  const [context, setContext] = useState()

  useEffect(() => {
    const subscription = Front.contextUpdates.subscribe(ctx => {
      setContext(ctx)
    })
    return () => subscription.unsubscribe()
  }, [])

  return (
    <FrontContext.Provider value={context}>
      {children}
    </​FrontContext.Provider>
  )
}

// src/​App.tsx
import { useFrontContext } from './​providers/​frontContext'

function App() {
  const context = useFrontContext()

  if (!context) return <div>Waiting for Front context...</​div>

  switch (context.type) {
    case 'noConversation':
      return <div>Select a conversation to use this plugin.</​div>
    case 'singleConversation':
      return <MainPlugin />
    case 'multiConversations':
      return <div>Select only one conversation.</​div>
    default:
      return <div>Unsupported context type</​div>
  }
}

Context Types

Common SDK Methods

// List messages in conversation
const messages = await context.listMessages()

// Create a draft reply
await context.createDraft({
  content: { body: 'Hello!', type: 'text' },
  replyOptions: { type: 'replyAll', originalMessageId: latestMessageId }
})

// Update existing draft
await context.updateDraft(draftId, {
  updateMode: 'replace',
  content: { body: 'Updated content', type: 'html' }
})

// Tag conversation
await context.tag(['tag_123'])

// Assign to teammate
await context.assign('tea_456')

// Open URL in popup (for modals)
await context.openUrlInPopup(url, { width: 400, height: 300 })

Available Context Data

context.teammate        // Current Front user
context.conversation    // Selected conversation (singleConversation only)
context.conversations   // Selected conversations (multiConversations only)
context.draft          // Current draft (messageComposer only)

UI Guidelines

• Support dark/​light mode
• No horizontal scrolling (narrow sidebar)
• Use lucide-react for icons
• Graceful loading states (never blank screen)
• Handle missing data with fallbacks

Detailed Reference

See rules/ directory for:

• Context types and interfaces
• All SDK methods with signatures
• Draft creation/​update patterns
• Attachment handling
• Error handling patterns

Resources

• Plugin SDK Overview
• SDK Methods Reference
• Getting Started Example
• npm package