ContextCraft offers several output formats to suit different AI platforms and use cases. This page explains the available formats, their advantages, and when to use each one.

Markdown is the default and recommended output format for most AI interactions.

Example:

# Project: MyReactApp

## File Tree:
```
src/
├── components/
│   ├── Button.tsx
│   └── Card.tsx
├── utils/
│   └── helpers.ts
└── App.tsx
```

## Files:

### src/components/Button.tsx
```tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return (
    <button 
      className="primary-button" 
      onClick={onClick} 
      disabled={disabled}
    >
      {label}
    </button>
  );
};

export default Button;
```

### src/App.tsx
// App component implementation...

Advantages:

• Excellent readability with syntax highlighting in most AI platforms
• Well-supported across all major AI assistants
• Maintains code structure and formatting
• Supports nested code blocks and headings
• Widely recognized by developers

Best for:

• ChatGPT, Claude, and other mainstream AI platforms
• When readability and code formatting are important
• Default choice for most use cases

Plain text provides a simple, unformatted output suitable for any platform.

Example:

PROJECT: MyReactApp

FILE TREE:
src/
├── components/
│   ├── Button.tsx
│   └── Card.tsx
├── utils/
│   └── helpers.ts
└── App.tsx

FILES:

src/components/Button.tsx:
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return (
    <button 
      className="primary-button" 
      onClick={onClick} 
      disabled={disabled}
    >
      {label}
    </button>
  );
};

export default Button;

src/App.tsx:
// App component implementation...

Advantages:

• Universal compatibility
• No special formatting that might be misinterpreted
• Minimal overhead in terms of characters/tokens
• Works with any text-based interface

Best for:

• Simple AI interfaces with limited markdown support
• Platforms with character limitations
• When maximum compatibility is required

XML format provides a structured representation with explicit tags for each component.

Example:

<project name="MyReactApp">
  <file_tree>
    <directory name="src">
      <directory name="components">
        <file name="Button.tsx" />
        <file name="Card.tsx" />
      </directory>
      <directory name="utils">
        <file name="helpers.ts" />
      </directory>
      <file name="App.tsx" />
    </directory>
  </file_tree>
  <files>
    <file path="src/components/Button.tsx" language="tsx">
      <content>
        import React from 'react';

        interface ButtonProps {
          label: string;
          onClick: () => void;
          disabled?: boolean;
        }

        const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
          return (
            <button 
              className="primary-button" 
              onClick={onClick} 
              disabled={disabled}
            >
              {label}
            </button>
          );
        };

        export default Button;
      </content>
    </file>
    <file path="src/App.tsx" language="tsx">
      <content>
        // App component implementation...
      </content>
    </file>
  </files>
</project>

Advantages:

• Highly structured format
• Clear delineation between different content types
• Explicit language tagging for each file
• Easier to parse programmatically

Best for:

• Specialized AI tools that accept XML input
• Integration with other tools or workflows
• When structure is more important than human readability

JSON format is available for integration with tools and services that expect JSON data.

Example:

{
  "project": "MyReactApp",
  "fileTree": {
    "src": {
      "components": {
        "Button.tsx": null,
        "Card.tsx": null
      },
      "utils": {
        "helpers.ts": null
      },
      "App.tsx": null
    }
  },
  "files": [
    {
      "path": "src/components/Button.tsx",
      "language": "tsx",
      "content": "import React from 'react';\n\ninterface ButtonProps {\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nconst Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {\n  return (\n    <button \n      className=\"primary-button\" \n      onClick={onClick} \n      disabled={disabled}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport default Button;"
    },
    {
      "path": "src/App.tsx",
      "language": "tsx",
      "content": "// App component implementation..."
    }
  ]
}

Advantages:

• Machine-readable format
• Ideal for API interactions
• Structured data with clear schema
• Widely supported in programming environments

Best for:

• Integration with custom tooling
• Programmatic processing of code
• API-based workflows

To choose an output format:

1. In the Control Container, locate the "Output Format" section
2. Click on the format dropdown menu
3. Select your preferred format
4. Preview the result in the Preview panel

In Markdown format, you can customize:

• Heading styles (# vs ## for file names)
• Code block style (indented vs fenced)
• Include/exclude file tree visualization
• Language tags for syntax highlighting

For XML output, ContextCraft offers schema options:

• Simple schema (shown above)
• Extended schema with metadata
• Custom attribute inclusion/exclusion

When using JSON format, you can adjust:

• Nesting depth for file tree
• Include/exclude file metadata
• Minified vs. pretty-printed output

1. Choose Markdown for most cases:

   • Default to Markdown unless you have specific requirements
   • Best balance of readability and structure

2. Use Plain Text for simplicity:

   • When in doubt about platform compatibility
   • When every token counts

3. Consider XML/JSON for integrations:

   • Use structured formats when feeding into other tools
   • Better for programmatic processing

4. Preview before exporting:

   • Always check how your format appears in the preview
   • Ensure code blocks are properly formatted

5. Adjust based on AI platform:

   • Some AI models handle certain formats better
   • Test different formats if you experience issues

Related Topics:

• Custom Instructions
• Token Counting
• Model Selection