Claude Integration

Use HeroPrompt templates effectively with Anthropic's Claude AI assistant.

Why Claude Works Well with HeroPrompt

Claude excels at:

Long contexts — Handle prompts with extensive requirements (200k tokens)
Structured output — Follow formatting instructions precisely
Code generation — Produce production-quality code
Reasoning — Think through complex problems step-by-step

Many HeroPrompt templates are optimized for Claude with:

XML-style tags for structure
Direct, explicit instructions
Chain-of-thought reasoning patterns

Using Prompts with Claude

Web Interface (claude.ai)

Copy prompt from HeroPrompt
Open Claude at claude.ai
Paste prompt in chat
Replace variables — Change {{variable_name}} to actual values
Send and iterate based on results

Claude API

Use HeroPrompt templates programmatically via the Anthropic API:

python

import anthropic

client = anthropic.Anthropic(api_key="your-api-key")

# Prompt template from HeroPrompt
prompt = """
Create a {{language}} function that {{task}}.
The function should handle {{edge_cases}}.
Provide complete, production-ready code.
"""

# Replace variables
prompt = prompt.replace("{{language}}", "Python")
prompt = prompt.replace("{{task}}", "validates email addresses")
prompt = prompt.replace("{{edge_cases}}", "empty strings, invalid formats")

message = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=4096,
    messages=[
        {"role": "user", "content": prompt}
    ]
)

print(message.content[0].text)

Claude Code (CLI Tool)

Claude Code integrates with your codebase:

Install Claude Code CLI
Sync HeroPrompt templates locally
Reference prompts in Claude Code sessions
Generate code directly in your project

bash

# Sync prompts locally
heroprompt sync sync-cmd

# Use prompt in Claude Code
claude-code "Use the React component prompt from ~/.heroprompt/prompts/..."

Claude-Specific Optimizations

When using HeroPrompt with Claude, leverage these features:

1. XML Tags for Structure

Claude understands XML-style tags exceptionally well:

xml

<prompt>
  <role>Senior software engineer</role>
  <context>Building a REST API for e-commerce platform</context>
  <task>Design database schema for orders and products</task>
  <format>SQL CREATE TABLE statements</format>
  <constraints>
    - PostgreSQL 14+
    - Proper indexing
    - Foreign key relationships
  </constraints>
</prompt>

Use the Prompt Optimizer → "Model-Specific" mode → "Claude" to convert prompts into this format.

2. System Prompts

For repeated tasks, use Claude's system prompt:

python

message = client.messages.create(
    model="claude-sonnet-4-20250514",
    system="You are a senior React developer. Always use TypeScript, hooks, and functional components.",
    max_tokens=4096,
    messages=[
        {"role": "user", "content": "Create a user profile component"}
    ]
)

Store your favorite HeroPrompt templates as system prompts for consistency.

3. Few-Shot Examples

Claude excels with few-shot learning. Use the Optimizer → "Few-Shot Examples" mode to add examples automatically.

4. Chain of Thought

For complex logic, ask Claude to think step-by-step:

text

Before providing the final code, think through:
1. What data structures are needed?
2. What edge cases exist?
3. What error handling is required?
4. How can this be optimized?

Then provide the implementation.

Use the Optimizer → "Chain of Thought" mode to add reasoning structure.

Claude Model Selection

Choose the right Claude model for your task:

Model	Best For	Context	Speed
Claude Sonnet 4	Balanced — code, writing	200k tokens	Fast
Claude Opus 4	Complex reasoning, research	200k tokens	Slower
Claude Haiku 4	Quick tasks, low cost	200k tokens	Fastest

Recommendation: Start with Sonnet 4 for most HeroPrompt templates.

Tips for Best Results

1. Provide Ample Context

Claude's 200k context window means you can include extensive background:

text

Context:
- Building a SaaS app with Next.js 14 and PostgreSQL
- Using Stripe for payments
- Target audience: Small businesses
- Must be mobile-responsive
- Need GDPR compliance

2. Use Artifacts (claude.ai)

Claude's "Artifacts" feature displays code in a separate panel:

Easier to copy full implementations
Better for reviewing large code blocks
Auto-detects code, markdown, diagrams

To trigger artifacts, ask for complete, standalone files:

text

Provide the full React component in a single file, including imports and exports.

3. Iterate with Follow-Ups

Refine results with follow-up prompts:

text

"Add error handling for network failures"
"Optimize this for performance"
"Add TypeScript types"
"Write unit tests for this function"

4. Request Explanations

Ask Claude to explain its decisions:

text

Explain why you chose this approach and what alternatives you considered.

This helps you understand trade-offs and learn best practices.

Claude Projects (Beta)

Claude Projects let you organize conversations by topic:

Create project: "Frontend Development"
Add HeroPrompt templates as project knowledge
Reference templates across conversations

Example workflow:

Create "API Development" project
Add your synced HeroPrompt API templates
Ask "Use the REST API design template to build a user management API"

Claude Code Hooks (Advanced)

For automated workflows, use Claude Code with hooks:

bash

# .claude/hooks/pre-commit
# Auto-optimize commit messages using HeroPrompt template

heroprompt sync sync-cmd --role git
claude-code "Use the commit message template to improve this commit"

Troubleshooting

Claude's output is too generic

Solution: Add more constraints and examples to your prompt. Use Optimizer → "Enhance & Clarify".

Claude refuses to generate code

Solution: Ensure your request follows Claude's usage policies. Avoid asking for malicious code, scraping tools, or content that violates terms.

Output is too verbose

Solution: Add explicit formatting instructions:

text

Provide only the code, no explanations.

Next Steps

Try the Prompt Optimizer to tailor prompts for Claude
Explore ChatGPT integration
Check VS Code integration