AI Assistant

PhantomWP includes an AI assistant powered by advanced language models. Use it to generate code, write content, fix bugs, and get answers to your questions.

Opening the AI Panel

Click the AI icon in the header bar to toggle the AI chat panel. It appears on the right side of the IDE.

What the AI Can Do

Generate Code

Ask the AI to write code for you:

• "Create a navigation component with a logo and links"
• "Write a function to format dates"
• "Add a contact form to this page"

Explain Code

Get explanations of existing code:

• "What does this function do?"
• "Explain this Astro layout"
• "Why is this causing an error?"

Fix Problems

Describe issues and get solutions:

• "The header isn't sticky, how do I fix it?"
• "Why is my image not showing?"
• "Help me debug this API call"

Write Content

Generate or improve content:

• "Write an introduction for my About page"
• "Suggest a better title for this blog post"
• "Rewrite this paragraph to be more concise"

Answer Questions

Get help with Astro and web development:

• "How do I add a sitemap in Astro?"
• "What's the difference between .astro and .mdx files?"
• "How do I make this responsive?"

Using the Chat

Sending Messages

Type your question or request in the input field and press Enter or click Send.

Context Awareness

The AI knows about:

• Your current file and its contents
• The type of file you're editing
• Your project structure

This helps it give relevant, actionable answers.

Code Insertion

When the AI generates code:

1. Review the suggested code
2. Click Insert to add it at your cursor position
3. Or Copy to put it in your clipboard

Tips for Better Results

Be Specific

Instead of: "Make a component" Try: "Create a Card component with an image, title, description, and link. Use Tailwind CSS for styling."

Provide Context

Instead of: "Fix this" Try: "The navigation menu isn't showing on mobile. Here's the current code: [paste code]. How do I make it responsive?"

Ask Follow-ups

The AI remembers your conversation. Ask follow-up questions to refine results:

• "Can you make the animation smoother?"
• "Add a hover effect to that"
• "Now make it work on mobile too"

Break Down Complex Tasks

For big features, ask step by step:

1. "What components do I need for a blog?"
2. "Create the post list component"
3. "Now create the individual post component"
4. "Add pagination to the list"

AI Settings

Click the Settings icon in the AI panel to configure:

Model Selection

Choose between different AI models based on your needs:

• Fast — Quick responses for simple questions
• Balanced — Good mix of speed and quality
• Advanced — Best quality for complex tasks

API Key (Optional)

Use your own API key for:

• Higher rate limits
• Access to premium models
• Better privacy (requests go directly to the provider)

Example Conversations

Creating a Component

You: Create a testimonial card component with a quote, author name, and their photo. Use Tailwind CSS.

AI: Here's a testimonial card component:

---
interface Props {
  quote: string;
  author: string;
  photo: string;
  role?: string;
}

const { quote, author, photo, role } = Astro.props;
---

<div className="bg-white rounded-xl shadow-lg p-6 max-w-md">
  <blockquote className="text-gray-700 text-lg mb-4">
    "{quote}"
  </blockquote>
  <div className="flex items-center gap-4">
    <img 
      src={photo} 
      alt={author}
      className="w-12 h-12 rounded-full object-cover"
    />
    <div>
      <div className="font-semibold text-gray-900">{author}</div>
      {role && <div className="text-sm text-gray-500">{role}</div>}
    </div>
  </div>
</div>

Debugging Help

You: My page shows "undefined" instead of the post title. Here's my code:

<h1>{post.title}</h1>

AI: The issue is that post might not be defined or doesn't have a title property. Check these things:

1. Make sure you're passing post as a prop or fetching it correctly
2. Add a null check: {post?.title || 'Untitled'}
3. Log post to see what data you're getting: console.log(post)

Would you like me to help you debug the data fetching part?

Limitations

The AI assistant:

• Can't directly modify files (you choose what to insert)
• Doesn't have real-time access to external websites
• May occasionally make mistakes—always review generated code
• Works best with clear, specific requests

Privacy

Your conversations with the AI:

• Are processed by third-party AI providers
• May be used to improve the service (unless you use your own API key)
• Don't include sensitive data from your project unless you share it

Next Steps

• WordPress Integration — Connect your WordPress site
• Deployment — Deploy your finished site