# Demo: [WEB] Homepage > [Try the demo](https://capture.navattic.com/cmm1sy7hi000004l4dph83md6) ## Flow 1: Visual Editing and Components ### Step 1: Intro Our interactive demos walk you through the main features of Hygraph CMS. Click the "Select Demo" button on the bottom left to jump to specific areas. ### Step 2: Visual Editing Visual Editing & Components Let's use Visual Editing to quickly update the Hero Banner on the HyBikes Homepage. Click to edit in the Live Preview. ### Step 3: Components The Hero Banner Component opens, and the Title field is selected. Let's change the title to improve conversion. ### Step 4: Live preview Modify the hero copy and verify the design in real time. ### Step 5 Once you are happy with your changes, "Save & publish" them to production. ### Step 6: Summary Hygraph CMS combines schema-driven components, reusable sections, localization, workflows and live preview to streamline content operations for Marketing teams. Want a guided walkthrough? Book a live demo. ## Flow 2: AI Assist - Create Content ### Step 1: Quick overview Hygraph AI Assist Hygraph AI Assist speeds up marketing content creation. Create AI-assisted content, accept changes with a single click, and publish quickly to boost conversion velocity. ### Step 2: Product card On our product entry, we need a marketing tagline. The product card displays product data like name, range, and price from PIM, so marketers can quickly craft targeted messaging without hunting for details. Let AI Assist help us to write a good tagline. ### Step 3: AI assist AI Assist offers marketers assistance on tasks like creating, improving, or translating content. This is your shortcut to scale localized marketing assets and speed up campaigns. ### Step 4: Create content Use the Create content panel to pick the Tagline field, locale, and desired tone of voice. A short prompt steers the AI to produce conversion-focused copy tailored to our audience. ### Step 5: Generating content Once we hit Generate, Hygraph AI Assist will craft your tagline in seconds. ### Step 6: Review suggestion Preview the AI-generated suggestion in the modal, then accept or reject. Fast review cycles help you discover the highest-converting language quickly. ### Step 7: Inject copy The accepted copy is inserted directly into the Tagline field, preserving formatting and localization context. That keeps messaging consistent across markets and shortens time-to-publish. ### Step 8: Save changes Save your changes or use Save & publish from the top-right controls to lock in updates. Simple save/publish flows reduce friction between editor work and live experiences. ### Step 9: Get started Ready to accelerate conversion-driven content with AI? Book a live demo to see Hygraph Studio's AI Assist functionality in action! ## Flow 3: Collaboration ### Step 1: Intro overview Collaboration This demo shows how marketing teams use Hygraph to collaborate inline. Today you join Elena, a Marketing manager. She needs to update the SEO for the Velocity X1 Bike before the page can be published for the product launch. ### Step 2: Add metadata Elena starts by reviewing the internal title, slug, and SEO metadata block. Centralized metadata lets marketers control how product pages appear in search, improving discoverability and click-through rates. ### Step 3: Comments panel However, Elena is not sure of the Meta Description. She opens the Comments tab to capture contextual feedback. Inline comments keep conversations attached to the right entry so SEO and copy requests don’t get lost across tools. ### Step 4: Mention reviewers Elena mentions her colleague Noah directly to get quick reviews. Using @mentions sends notifications to the right reviewer immediately via email and with an in-app message. This reduces back-and-forth and speeds up content approvals. ### Step 5: Assign tasks You can also assign a comment to an owner so every task has accountability. Clear assignments cut review time and make it obvious who’s responsible for final copy or checks. ### Step 6: Studio dashboard You are now switching to Noah's view in Hygraph Studio. Noah is Elena's colleague who specializes in SEO. ### Step 7: Notifications center Notifications surface mentions and assignments across projects so you never miss an SEO or approval request. Noah clicks the message addressed to him to jump to the related content entry. Stay on top of action items that impact launch timelines. ### Step 8: Edit SEO Noah can quickly edit the SEO block component inline — title, description, and keywords. Search-focused changes live with the content. ### Step 9: Update copy Noah swaps product descriptions to test different value propositions. Hygraph stores revisions so marketers can compare copy performance and iterate toward higher conversion messaging. ### Step 10: Confirm changes Noah uses Reply inline to the Comment to confirm edits and hand off translation tasks back to Elena. Threaded comments preserve context so translators and reviewers understand intent and reduce rework. ### Step 11: Back to Elena Now you go back to Elena. ### Step 12: Add locales Elena sees Noah's comment about the change. Now she is ready to add localized titles and descriptions for DE/FR fields to tailor messaging per market. Localized SEO keeps your pages relevant and improves conversions across regions. ### Step 13: Finish & demo You have experienced a collaborative workflow with higher velocity: Create SEO-rich pages, collaborate in context, manage locales, and publish faster to boost conversions. Let's continue to translating the page. Want a live walkthrough? Book a demo now. ## Flow 4: Hygraph AI agents ### Step 1: Intro overview AI Agents Hygraph AI Agents automate repetitive content tasks so marketing teams can localize, personalize, and publish faster. Reduce your time-to-market and lift conversion rates across regions. Please note that the setup of Hygraph AI agents will usually be done by your technical team. As a Marketing user, you send content to workflows and the AI agents take over from there. ### Step 2: Agent card From the Agents dashboard you can enable or disable AI Agents like "Tim the Translator" Review their recent activity, and adjust seats to scale workload, and see configured languages at a glance. Easily manage localization without leaving your CMS. ### Step 3: Edit agent Open "Edit Agent" to customize name, description, number of seats, workflow and workflow steps, then select target languages. Tailor automation to each campaign and remove manual translation bottlenecks. ### Step 4: Edit agent You can add your own prompts in the "Custom Instructions" field to steer the AI Agent, e.g. with custom brand voice guidelines. Ensure brand consistency and governance in Translations and other automations. ### Step 5: Finalize setup The Hygraph AI Agent will now auto-translate content at the selected workflow step. Scale localized campaigns, and maintain consistency across regions. Less work for you, more time for creativity! Book a live demo to see AI Agents in action. ## Flow 5: Localization with AI Agent ### Step 1: Start: Localization Localization with AI Agents See how content, localization and workflow come together to increase conversions. This demo walks through SEO metadata, localization, and publishing to speed time-to-market. ### Step 2: Start Workflow Based on the Comment feedback, we are good to go to send the page into the Translation Workflow. We will localize it for our additional markets in Germany (DE) and France (FR). AI Agents speed up translation workflows and enable you to launch new markets faster. ### Step 3: Workflow modal Use the Workflow modal to move an entry forward. Pick the next stage (Draft → Translate → Published). Workflow steps have configured roles. This ensures tight governance while accelerating delivery. ### Step 4: AI assistant The AI Agent for Translation now takes over, and the automation runs on the entry in the background. Editors can keep working on other tasks meanwhile. Automated translations and content checks speed localization while preserving quality for market-ready pages. ### Step 5: Localized content The AI Agent is done, you can review the localized title and description fields for English, German and French. Now we are good to Publish our page for the additional markets. Deliver tailored messaging per market to improve relevance, CTR and ultimately conversion rates. ### Step 6: Review config You will move the workflow from Review -> Published. Inspect the published-stage configuration before you publish. Who can edit, whether entries can be returned to draft, and what happens on publish — essential for safe, repeatable launches with governance. ### Step 7: Entry published Confirm that the page was published. You are ready to capture traffic and drive conversions. ### Step 8: Next steps Hygraph Studio centralizes SEO, localization and governed workflows so marketing launches are faster and more reliable. Ready to see this in your stack? Book a live demo. ## Flow 6: Digital Asset Management ### Step 1: Quick intro Digital Asset Management Struggling to deliver consistent visuals and media across channels? Hygraph centralizes all digital assets and metadata so marketing teams build high-converting pages faster, without waiting on devs. ### Step 2: Assets grid Browse the Assets Grid View to preview thumbnails and pick campaign heroes in seconds. Upload new creatives or add entries to keep landing pages fresh and reduce time-to-launch for paid ads. ### Step 3: List view Switch to List view to scan filenames, alt text, dimensions and publish status. Use filters and sorting to locate optimized images for A/B tests and Personalization Variants. Faster asset selection means faster conversion wins. ### Step 4: Edit asset Open any Asset to Edit alt text, localizations, and versions while previewing the file. Small metadata updates improve SEO, accessibility and CTR and provide immediate gains for marketing campaigns. ### Step 5: Schema nodes You can configure an Asset Type Taxonomy, e.g. defining Images as Banner, Hero, Product Image, etc. Now your editors can quickly find and consistently apply the right media to each channel. Structured taxonomies cut errors in tagging and speed campaign rollout. ### Step 6: Next steps Hygraph's advanced Digital Asset Management allows you to handle localized assets, power personalized experiences, and reuse assets across channels with built-in image transformation. CDN-powered delivery, and automatic optimization of file formats give you quick loading times all around the globe to all devices and channels. Ready to create ultra-fast, media-rich experiences that drive marketing conversions?