AI Features

Sitepins integrates advanced AI capabilities to assist developers and content creators. The system is provider-agnostic, supporting multiple LLM backends.

Supported Providers

Providers are configured in src/lib/constant.ts and can be switched dynamically:

• OpenAI: GPT-4o, GPT-3.5-Turbo
• Google Gemini: Gemini 1.5 Pro, Gemini 1.5 Flash
• Anthropic: Claude 3.5 Sonnet, Claude 3 Opus
• xAI: Grok-1

AI Command System

The core AI interaction logic is handled by the useAiCommand hook, which leverages the @ai-sdk/react and Plate’s AI plugins.

useAiCommand Hook

This hook manages the streaming chat state for the editor’s AI commands (Edit, Generate, Comment).

// src/hooks/use-ai-command.ts
export const useAiCommand = () => {
  const baseChat = useBaseChat({
    id: "editor",
    api: "/api/ai/command",
    // ...
  });
  // ...
};

AI Features in the Editor

1. Content Inline Editing: Select text and use AI to rewrite, shorten, or expand it.
2. Post Generation: Generate entire sections of content based on a prompt.
3. SEO Optimization: Automatically generate meta titles and descriptions.
4. Code Assistance: In the Monaco editor, AI can help with Tailwind classes or configuration schemas.

AI Upsell Logic

Access to AI features is gated by the user’s subscription level. The useAiUpsellDialog hook manages the visibility of the upgrade prompt when a user reaches their AI usage limit.