Google Antigravity Artifacts Explained: Understanding AI-Generated Code Previews

Artifacts in Google Antigravity are live previews of AI-generated content. They let you see code, documents, and visualizations before applying them to your project. This guide explains how to use artifacts effectively.

What Are Artifacts?

Artifacts are:

• Sandboxed previews of generated content
• Interactive elements you can test before applying
• Revision history for AI-generated code
• Collaboration tools for reviewing AI suggestions

Types of Artifacts

Code Artifacts

Generated code appears in a preview pane:

// Artifact Preview: UserProfile Component
// Status: Ready to Apply | Edit | Discard

import { useState, useEffect } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

export function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <Skeleton />;
  if (!user) return <NotFound />;

  return (
    <div className="profile">
      <Avatar src={user.avatar} alt={user.name} />
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Documentation Artifacts

README files, API docs, and markdown:

# Artifact Preview: README.md

## Project Name

Brief description of the project.

### Installation

\`\`\`bash
npm install project-name
\`\`\`

### Usage

\`\`\`typescript
import { feature } from 'project-name';
\`\`\`

Visual Artifacts

Diagrams, charts, and UI previews:

• Mermaid diagrams
• React component previews
• SVG graphics
• ASCII art for architecture

Working with Artifacts

Creating Artifacts