Skip to main content

What are Artifacts and how do I use them in MANTA?

Artifacts in MANTA are an innovative feature inspired by Claude.AI's Artifacts, allowing you to interact with significant and standalone content generated by an LLM within a chat. They enable you to view, modify, build upon, or reference substantial pieces of content separately from the main conversation, making it easier to work with complex outputs and ensuring that you can revisit important information later.

When does MANTA use Artifacts?​

MANTA creates an Artifact when the generated content meets specific criteria tailored to our platform:

  1. Renderable: To be displayed as an Artifact, the content must be in a format that MANTA supports for rendering. This includes:
  • Single-page HTML websites
  • Scalable Vector Graphics (SVG) images
  • Complete webpages, which include HTML, Javascript, and CSS all in the same Artifact. Do note that HTML is required if generating a complete webpage.
  • ThreeJS Visualizations and other JavaScript visualization libraries such as D3.js.

Other content types like Documents (Markdown or Plain Text), Code snippets, and React components are not rendered as Artifacts by MANTA.

How does MANTA's model create Artifacts?​

To use artifacts in MANTA, a model must provide content that triggers the rendering process to create an artifact. This involves generating valid HTML, SVG code, or other supported formats for artifact rendering. When the generated content meets the criteria mentioned above, MANTA will display it as an interactive Artifact.

How do I use Artifacts in MANTA?​

When MANTA creates an Artifact, you'll see the content displayed in a dedicated Artifacts window to the right side of the main chat. Here's how to interact with Artifacts:

  • Editing and iterating: Ask an LLM within the chat to edit or iterate on the content, and these updates will be displayed directly in the Artifact window. You can switch between versions using the version selector at the bottom left of the Artifact. Each edit creates a new version, allowing you to track changes using the version selector.
  • Updates: MANTA may update an existing Artifact based on your messages. The Artifact window will display the latest content.
  • Actions: Access additional actions for the Artifact, such as copying the content or opening the artifact in full screen, located in the lower right corner of the Artifact.

Editing Artifacts​

  1. Targeted Updates: Describe what you want changed and where. For example:
  • "Change the color of the bar in the chart from blue to red."
  • "Update the title of the SVG image to 'New Title'."
  1. Full Rewrites: Request major changes affecting most of the content for substantial restructuring or multiple section updates. For example:
  • "Rewrite this single-page HTML website to be a landing page instead."
  • "Redesign this SVG so that it's animated using ThreeJS."

Best Practices:

  • Be specific about which part of the Artifact you want to change.
  • Reference unique identifying text around your desired change for targeted updates.
  • Consider whether a small update or full rewrite is more appropriate for your needs.

Use Cases​

Artifacts in MANTA enable various teams to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform:

  • Designers:
    • Create interactive SVG graphics for UI/UX design.
    • Design single-page HTML websites or landing pages.
  • Developers: Create simple HTML prototypes or generate SVG icons for projects.
  • Marketers:
    • Design campaign landing pages with performance metrics.
    • Create SVG graphics for ad creatives or social media posts.

Examples of Projects you can create with MANTA's Artifacts​

Artifacts in MANTA enable various teams and individuals to create high-quality work products quickly and efficiently. Here are some examples tailored to our platform, showcasing the versatility of artifacts and inspiring you to explore their potential:

  1. Interactive Visualizations
  • Components used: ThreeJS, D3.js, and SVG
  • Benefits: Create immersive data stories with interactive visualizations. MANTA's Artifacts enable you to switch between versions, making it easier to test different visualization approaches and track changes.

Example Project: Build an interactive line chart using ThreeJS to visualize stock prices over time. Update the chart's colors and scales in separate versions to compare different visualization strategies.

  1. Single-Page Web Applications
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Develop single-page web applications directly within MANTA. Edit and iterate on the content using targeted updates and full rewrites.

Example Project: Design a to-do list app with a user interface built using HTML and CSS. Use JavaScript to add interactive functionality. Update the app's layout and UI/UX using targeted updates and full rewrites.

  1. Animated SVG Graphics
  • Components used: SVG and ThreeJS
  • Benefits: Create engaging animated SVG graphics for marketing campaigns, social media, or web design. MANTA's Artifacts enable you to edit and iterate on the graphics in a single window.

Example Project: Design an animated SVG logo for a company brand. Use ThreeJS to add animation effects and MANTA's targeted updates to refine the logo's colors and design.

  1. Webpage Prototypes
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Build and test webpage prototypes directly within MANTA. Switch between versions to compare different design approaches and refine the prototype.

Example Project: Develop a prototype for a new e-commerce website using HTML, CSS, and JavaScript. Use MANTA's targeted updates to refines the navigation, layout, and UI/UX.

  1. Interactive Storytelling
  • Components used: HTML, CSS, and JavaScript
  • Benefits: Create interactive stories with scrolling effects, animations, and other interactive elements. MANTA's Artifacts enable you to refine the story and test different versions.

Example Project: Build an interactive story about a company's history, using scrolling effects and animations to engage the reader. Use targeted updates to refine the story's narrative and MANTA's version selector to test different versions.