Quick Start Tutorial

This tutorial will guide you through the basic workflow of using ContextCraft to optimize your code for AI interactions. Follow these steps to get started quickly.

Step 1: Install and Launch ContextCraft

If you haven't installed ContextCraft yet, please follow the Installation Guide first.

1. Launch ContextCraft from your applications folder
2. You'll be greeted with the welcome screen

Step 2: Open Your Project

1. Click the "Open Project" button in the upper left corner
2. Navigate to your project's root directory and select it
3. ContextCraft will scan your project and display its file structure in the sidebar

Step 3: Select Files for Your Query

1. Navigate through your project folders in the File Tree
2. Check the boxes next to files you want to include in your AI query
3. You can also use filter options to quickly find relevant files:
   • Use the search bar at the top of the File Tree
   • Filter by file extensions (.js, .py, etc.)
   • Use the "Recent Files" filter to see files you've edited recently

Step 4: Apply Optimization Options

1. In the Control Container panel (right side):

   • Toggle "Code Compression" on to reduce token usage
   • Toggle "Remove Comments" on for further optimization
   • Adjust additional options as needed

2. Watch the token counter in the status bar to see how your choices affect token usage

Step 5: Add Custom Instructions

1. Click on the Custom Instructions panel
2. Enter your question or instructions for the AI model in the text field
3. Consider adding context about:
   • What you're trying to accomplish
   • Specific areas you want the AI to focus on
   • Any particular format you want the response in

Step 6: Select Output Format

1. Choose your preferred output format:

   • Markdown: Best for most AI interfaces
   • Plain Text: Simple format for any platform
   • XML: Structured format for specialized uses

2. Preview how your output will look in the Preview panel

Step 7: Export and Use

1. Click the "Copy to Clipboard" button to copy the formatted output
2. Open your preferred AI platform (ChatGPT, Claude, etc.)
3. Paste the content into the chat input
4. Submit your query to the AI

Example Workflow

Let's walk through a practical example of using ContextCraft:

Scenario: Getting Help with a React Component Bug

1. Open Your React Project:

   • Launch ContextCraft and open your React project

2. Select Relevant Files:

   • Select the buggy component file
   • Select any related components it interacts with
   • Include any relevant context files (types, utilities, etc.)

3. Apply Optimizations:

   • Turn on Comment Removal (keep docstrings)
   • Turn off Code Compression (since you need implementation details for debugging)

4. Add Custom Instructions:

   I'm having an issue with the ProductCard component not updating when the product data changes. 
   I suspect it might be related to how I'm handling state or props. Can you help identify the issue?
   

5. Export and Submit:

   • Copy the formatted output
   • Paste into your AI assistant
   • Ask your debugging question

Tips for Success

1. Start Small:

   • Begin with just a few essential files
   • Add more context only if the AI needs it

2. Be Strategic with Compression:

   • Use compression for architecture questions
   • Avoid compression for implementation-specific questions

3. Monitor Token Usage:

   • Keep an eye on the token counter
   • Stay within your model's context limits
   • Use optimizations when approaching limits

4. Use File Hierarchies:

   • Include import/export relationships
   • Select parent and child components together
   • Include interface/type definitions

5. Refine Your Instructions:

   • Be specific about what you're asking
   • Provide context about the problem
   • Specify what kind of solution you're looking for

Next Steps

Once you're comfortable with the basic workflow, explore these advanced features:

• Code Compression - Learn optimal compression settings
• Comment Removal - Advanced comment management
• Token Counting - Master token optimization
• Context Templates - Save reusable templates

---

Now you're ready to use ContextCraft for your AI coding interactions! If you encounter any issues, check out the Troubleshooting page or reach out through our Support Channels.