​
What are Fragments?

Fragments are self-contained pieces of code or content that Factory can generate, display, and allow you to interact with. They come in several types, each suited for different purposes:

  • HTML

  • SVG

  • React

  • Mermaid

  • Python

​
General Fragment Usage

1

Generate a Fragment

Ask Factory to create a specific type of fragment. For example: “Create a React component for a user profile card”

2

View the Fragment

The generated fragment will appear in the Fragment Viewer.

3

Interact and Refine

You can ask Factory to modify the fragment, explain parts of it, or generate variations.

4

Copy or Export

Once satisfied, you can copy the fragment to use in your project or export it as a file.

Now, let’s dive into each fragment type in detail.

​
HTML Fragments

HTML fragments allow you to create and preview web content, including styling and interactivity.

​
Example: Creating an Interactive HTML Fragment

1

Request an HTML Fragment

Ask Factory: “Create an HTML fragment for a responsive navigation menu with a dropdown”

2

View and Refine

Factory will generate the HTML, CSS, and JavaScript for the menu. You can ask for modifications, such as: “Add a search bar to the navigation menu”

3

Import External Library

To add animations, you might say: “Import the Animate.css library from CDNJS and apply a fade-in animation to the dropdown”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Nav with Dropdown</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        /* Your CSS here */
    </style>
</head>
<body>
    <nav>
        <!-- Navigation HTML here -->
    </nav>
    <script>
        // Your JavaScript here
    </script>
</body>
</html>

​
SVG Fragments

SVG fragments are perfect for creating scalable graphics and animations.

1

Request an SVG Fragment

Ask Factory: “Create an SVG fragment for an animated logo of a rocket launching”

2

Refine the Design

You can request changes like: “Make the rocket trail change colors as it animates”

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Definitions for gradients, animations, etc. -->
  </defs>
  <g id="rocket">
    <!-- Rocket shape here -->
  </g>
  <path id="trail">
    <!-- Animated trail path -->
  </path>
  <animate xlink:href="#trail" attributeName="stroke" values="red;orange;yellow" dur="1s" repeatCount="indefinite" />
</svg>

​
React Fragments

React fragments allow you to create powerful, interactive components with access to popular libraries.

​
Example: Building a Data Visualization Component

1

Request a React Fragment

Ask Factory: “Create a React component for a data dashboard using Shadcn UI”

2

Add Interactivity

Refine the component by saying: “Add a filter functionality to the dashboard using Shadcn’s Select component”

3

Style with Tailwind

Enhance the styling: “Apply Tailwind classes to make the dashboard responsive and add a dark mode toggle”

import React, { useState } from 'react';
import { Select } from "@/components/ui/select"
import { useTheme } from "@/components/ui/theme-provider"

const DataDashboard = () => {
  const [filter, setFilter] = useState('all');
  const { theme, setTheme } = useTheme()

  // Component logic here

  return (
    <div className="p-4 dark:bg-gray-800">
      <Select onValueChange={setFilter}>
        {/* Filter options */}
      </Select>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        Toggle Theme
      </button>
    </div>
  );
};

export default DataDashboard;

​
Mermaid Fragments

Mermaid fragments enable you to create various types of diagrams using a simple markdown-like syntax.

​
Example: Creating a System Architecture Diagram

1

Request a Mermaid Fragment

Ask Factory: “Create a Mermaid diagram showing the architecture of a microservices-based e-commerce system”

2

Refine the Diagram

You can ask for changes like: “Add a database component to the user service in the diagram”

​
Python Fragments

Python fragments are ideal for data analysis, scientific computing, and creating quick visualizations.

​
Example: Analyzing and Visualizing Sales Data

1

Request a Python Fragment

Ask Factory: “Create a Python fragment to analyze monthly sales data and visualize the trend”

2

Refine the Analysis

You can request additional analysis: “Add a comparison of this year’s sales to last year’s”

import pandas as pd
import matplotlib.pyplot as plt

# Load and prepare data
df = pd.read_csv('sales_data.csv')
df['date'] = pd.to_datetime(df['date'])
monthly_sales = df.resample('M', on='date')['sales'].sum()

# Create plot
plt.figure(figsize=(10, 5))
monthly_sales.plot(kind='bar')
plt.title('Monthly Sales')
plt.xlabel('Date')
plt.ylabel('Total Sales')
plt.show()

​
Best Practices for Using Fragments

  1. Start Simple, Then Refine: Begin with a basic request and iteratively refine your fragment.

  2. Combine Fragment Types: Use different fragment types together for comprehensive solutions.

  3. Version Control: Save important fragments and track changes as you refine them.

  4. Documentation: Add comments to your fragments to explain complex logic or usage.

  5. Reusability: Design fragments with reusability in mind, using parameters where appropriate.

Using the Chat InterfaceWorking with Sessions