Create Chartifact Documents with AI

Use your favorite LLM to create interactive Chartifact documents! Follow these simple steps to get started:

How to Use

1. Choose examples: Browse the examples gallery and select 2-3 documents that are similar to what you want to create
2. Add examples to chat: Add your chosen example files to the chat along with the prompt below
3. Copy the prompt: Use the prompt below with your chosen examples
4. Generate your document: Your LLM will create a Chartifact document (ending in .idoc.md or .idoc.json)
5. Preview and refine: Drop your file into the online viewer to preview, make edits, and download a shareable HTML file

Important: Choose one format (.idoc.md or .idoc.json) and stick with it - do not mix formats in a single document. If your chat interface renders markdown instead of showing the source code, use the JSON format (.idoc.json) as it's easier to copy.

Copy This Prompt

Copy the prompt below and paste it into your LLM along with your chosen example files:

I want you to help me create a Chartifact document. Chartifact is a format for creating interactive, data-driven documents that work like mini apps.

See attached example Chartifact documents for reference.

Please create a new Chartifact document that:
- Uses the same format as the examples (either .idoc.md or .idoc.json)
- Includes interactive elements like charts, tables, inputs, or dropdowns as appropriate
- Has proper styling and layout

Key requirements:
- Save the output as a file ending in .idoc.md (markdown format) or .idoc.json (JSON format)
- Use only Markdown formatting - NO HTML elements are allowed
- Include CSS styling for good visual presentation

Return the complete file content that I can save and use directly. A download is preferred, but if not possible, please provide the full source code in a single code block.
The user can then drop this file into the Chartifact online viewer to see and interact with the document at https://microsoft.github.io/chartifact/view/

Tips for Better Results

• Be specific: Describe exactly what data you want to visualize and how users should interact with it
• Choose relevant examples: Pick examples that match your desired document type (dashboard, report, presentation, etc.)
• Start simple: Begin with basic functionality and iterate to add complexity
• Use the viewer: The online viewer lets you test, edit, and refine your document instantly
• Format selection: If your chat interface renders markdown instead of showing the source code, request the JSON format (.idoc.json) as it's easier to copy

What You Can Create

Chartifact documents are perfect for:

• Dashboards - Interactive data visualizations with filters and controls
• Reports - Data analysis with charts, tables, and narrative text
• Presentations - Slide-like documents with interactive elements
• Forms - Data collection interfaces with validation
• Calculators & What-if Analysis - Interactive tools for scenarios and modeling
• Documentation - Technical docs with live examples and demos
• Research Summaries - Perfect for creating visual reports at the end of deep research projects where you have findings and want to present them in an interactive format

Remixing and Format Conversion

You can easily convert existing documents between different formats and styles:

• Report to Slideshow - Transform a data report into a presentation format
• Dashboard to Report - Convert interactive dashboards into narrative reports
• Static to Interactive - Add input controls and interactivity to static documents

Simply provide your existing document and ask your LLM to convert it to the desired format or style while maintaining the core functionality.

Ready to get started? Head to the examples gallery to choose your templates!