April 24, 2026

Claude Live Artifacts – The 30-Minute Dashboard: A Cross-AI Workflow

By: Stephen Toback

Goal: Create a real-time, secure professional dashboard without writing a single line of code or exposing private data.

1. The Strategy: Architecting with Gemini

Instead of jumping straight into building, we used Gemini to define the scope and security of the project.

The Security Hack: We intentionally chose Public Data (Duke’s YouTube channels, public RSS feeds, and OIT status pages). This allowed us to test “live” functionality without the friction or risk of connecting private API keys or personal credentials.
The Content Selection: We mixed professional utility (Service Health) with personal interests (AI content and your DDMC blog) to ensure the dashboard was something you’d actually want to look at every morning.

2. The Prompt: Writing for “Cowork”

Gemini acted as the prompt engineer, specifically tailoring the instructions for Claude Cowork.

Why Cowork? Unlike standard chat, Cowork is designed for Live Artifacts. It creates a persistent sidebar where the data stays “stateful”—meaning it doesn’t just show you the data once; it refreshes every time you open the workspace.
Formatting for Pro-Tone: We applied your specific constraints—no clichés (avoiding “eye-opening” or “game-changing”) and factual accuracy—to ensure the output felt like a professional engineering tool, not a tech demo.

3. The Execution: Building in Claude

By pasting the Gemini-generated prompt into Claude Cowork, the “Artifact” was born.

The “Live” Toggle: The magic happens when you toggle the Artifact to “Live.” This connects it to the Model Context Protocol (MCP), allowing the dashboard to reach out to the web and pull the latest video counts and blog titles in real-time.

How to Build Your First AI Dashboard (No Experience Required!)

The goal of this guide is to move you from a consumer of AI (someone who asks questions) to a builder of AI tools. In less than 30 minutes, you can have a personal, live command center of information without writing a single line of code.

Phase 1: Preparation (10 Minutes)

You don’t need an API key or to link your personal accounts for this test. We are going to use Public Data to keep this secure and easy.

Step 1: Collect Your Public Feeds

YouTube: Decide whose content you want to track. For example, use the Duke University handle: @dukeuniversity.
Blog: Find a blog that interests you that is hosted on WordPress or a similar platform. We will use the DDMC blog’s RSS feed as an example: https://sites.duke.edu/ddmc/feed/.
Calendar: We will use the Duke Event Calendar for this example to pull in public technology events.

Phase 2: Building with Gemini (10 Minutes)

Think of Gemini as your architect and prompt engineer. Its job is to take your basic idea and turn it into the detailed, technical instructions that the builder (Claude) needs.

Step 2: Command Gemini to “Architect” the Project Copy and paste this specific prompt into a chat with Gemini:

“I have no technical experience, but I want to build a live dashboard. Your job is to act as my prompt engineer. Please write a single, detailed prompt that I can use in Claude Cowork to build a responsive, React-based dashboard. This dashboard must pull in public YouTube data from @dukeuniversity, recent post titles from the DDMC RSS feed, and technology events from the public Duke calendar. Instruct Claude to make it look professional, factual, and free of marketing clichés.”

Phase 3: The Execution in Claude Cowork (5 Minutes)

Now we will use Claude Cowork, the environment where the actual code is written and a live interface is generated.

Step 3: Build the Dashboard with 3 Clicks

Paste & Generate: Take the detailed prompt that Gemini just created for you. Paste it into a new chat in Claude Cowork and press “Enter.” Claude will immediately begin writing the code and building the interface.
Open the Artifact: On the right-hand side of your screen, a new panel (an “Artifact”) will appear, showcasing your custom-built dashboard. This is Click #1.
Make it LIVE: This is the magic step. Inside that dashboard panel, look for a button or toggle that says “Go Live” or “Active”. Click it. This is Click #2.
Connect the Data: Now, simply paste in the public feed URLs you collected in Phase 1 (the blog URL and calendar link) directly into the fields provided on your new dashboard. This is Click #3.

Categories: DDMC Info