AI Assistant

PhantomWP includes a powerful AI assistant that can read and modify your files, generate code, answer questions, and help you build faster. The AI has two interfaces: the Chat Panel for conversations and Inline AI for quick edits directly in the editor.

AI Chat Panel

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

Models

Choose from multiple AI models in the dropdown:

Extended Thinking

For complex tasks, enable Extended Thinking (brain icon) to let the AI reason through problems step by step. Supported on Claude Sonnet/Opus, GPT-5.2, and Gemini 2.5 models.

What the AI Can Do

The AI can perform actions directly in your project:

Tool Approval

Some actions require your approval before executing:

• Create File - requires approval
• Modify File - requires approval
• Install Package - requires approval

Other tools (read, list, search, etc.) execute automatically.

Toggle Auto-approve to let the AI execute all actions without asking.

Using the Chat

1. Type your request in the input field
2. The AI responds with text and/or tool calls
3. Review any file changes before approving
4. Continue the conversation to refine results

The AI automatically knows about your current file and preview URL.

Example Prompts

• "Create a testimonial card component with image and quote"
• "Add a navigation menu to the header"
• "Fix the mobile layout on this page"
• "Explain how this WordPress integration works"
• "Install the Astro sitemap integration"

Chat Sessions

Your conversations are saved automatically. Use the chat menu to:

• New Chat - start a fresh conversation
• Switch Chat - return to a previous conversation
• Delete Chat - remove a conversation
• Clear History - clear the current chat

Custom AI Instructions

Create a docs/ai-instructions.md file to give the AI custom instructions about your project. The AI reads this file and follows your preferences.

Example instructions:

# AI Instructions

## Preferences
- Use TypeScript for all new files
- Follow the existing component patterns
- Use Tailwind CSS for styling
- Keep components small and focused

## Project Context
- This is a marketing site for a SaaS product
- The main colors are blue-600 and gray-900
- We use the Inter font family

Inline AI

For quick edits without leaving the editor, use Inline AI. It appears as a floating widget at your cursor.

AI Modify

Modify selected code with AI:

1. Select code in the editor
2. Press Cmd/Ctrl + Shift + M or right-click and choose AI Modify
3. Describe how to change the code
4. Press Cmd/Ctrl + Enter to submit
5. Review the result
6. Click Accept or Reject

Example uses:

• "Add error handling"
• "Convert to TypeScript"
• "Make this more efficient"
• "Add comments explaining the logic"

AI Generate

Generate new code at your cursor:

1. Position your cursor where you want code
2. Press Cmd/Ctrl + Shift + G or right-click and choose AI Generate
3. Describe what to generate
4. Press Cmd/Ctrl + Enter to submit
5. Review the result
6. Click Accept or Reject

Example uses:

• "A function to format dates"
• "An Astro component for a pricing card"
• "CSS for a gradient button"
• "A TypeScript interface for blog posts"

Inline AI Models

The inline AI has its own model selector. It remembers your preference separately from the chat panel.

Tips for Better Results

Be Specific

Instead of: "Make a component"

Try: "Create a Card component with an image at the top, a title, description, and a Learn More link. Use Tailwind CSS with rounded corners and a shadow."

Provide Context

Instead of: "Fix this"

Try: "The navigation menu doesn't show on mobile. The hamburger button appears but clicking it does nothing. How do I make it toggle?"

Use Current File Context

The AI knows about your currently open file. Ask questions like:

• "Explain this component"
• "Add a loading state to this"
• "What's wrong with this code?"

Share Error Messages

When debugging, paste the full error:

"I'm getting this error when I load the page: 'Cannot read property title of undefined'. Here's my code..."

AI Settings

Click the gear icon in the chat panel header to open AI Settings.

API Keys

Add your API keys for each provider:

• Anthropic - for Claude models
• OpenAI - for GPT models
• Google - for Gemini models

Keys are stored securely in your browser and sent directly to the AI providers.

Benefits of Your Own Keys

• Direct billing from the provider
• Access to latest models
• Higher rate limits
• Enhanced privacy

Keyboard Shortcuts

Troubleshooting

AI Not Responding

1. Check your API key is valid
2. Verify you have credits/quota with the provider
3. Try a different model
4. Refresh the page

Tool Call Failed

1. Check the error message in the tool card
2. The AI may retry with a different approach
3. Try approving manually if auto-approve is off

Poor Quality Responses

1. Be more specific in your request
2. Provide more context
3. Use Extended Thinking for complex tasks
4. Try a more capable model (Claude Opus, GPT-5.2 Pro)

Inline AI Shows "No API Keys"

1. Open AI Settings (gear icon in chat panel)
2. Add at least one API key
3. The inline AI will detect available models

Next Steps

• Visual Editor - Combine AI with visual editing
• Component Library - Start with pre-built components
• Troubleshooting - Common issues and solutions