AI Prompt Templates

AI chats 3

About

Browse and use pre-built prompt templates.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Prompt Templates to your project and fits it to your theme.

Code

How AI Prompt Templates is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AIPromptTemplates from "@/components/ui/ai-prompt-templates";

export default function DemoOne() {
  return (
    <div className="max-w-xl w-full">
      <AIPromptTemplates
          templates={[
            {
              id: "template-1",
              name: "Blog Post Writer",
              description: "Generate a comprehensive blog post on any topic",
              category: "Writing",
              prompt: "Write a detailed blog post about {topic}.",
              variables: [
                {
                  name: "topic",
                  label: "Topic",
                  placeholder: "e.g., React best practices",
                  required: true,
                },
              ],
              isPopular: true,
              usageCount: 342,
              tags: ["blog", "writing"],
            },

            {
              id: "template-2",
              name: "Code Reviewer",
              description: "Analyze and review code for issues and improvements",
              category: "Code",
              prompt:
                "Review the following code for potential bugs, optimizations, and best practices. Provide suggestions and improved code if necessary. Code: {code}",
              variables: [
                {
                  name: "code",
                  label: "Code Snippet",
                  placeholder: "Paste your code here",
                  required: true,
                },
              ],
              isPopular: true,
              usageCount: 519,
              tags: ["code", "review", "analysis"],
            },
          ]}
          categories={["All", "Writing", "Code"]}
          onSelect={(templateId) => {
            /* select template by id */
          }}
          onFavorite={async (id, fav) => {
            /* set/unset favorite */
          }}
          onCreate={(tpl) => {
            /* create new template */
          }}
        />
    </div>
  )
}