Quickstart

What you'll build

In this tutorial, you'll create a complete documentation site for your product or service. By the end, you'll have:

• A live documentation site with multiple pages
• Custom branding and navigation
• AI-powered search and assistance
• Interactive API documentation
• A custom domain (optional)

Prerequisites

Before starting, ensure you have:

• A Documentation.AI account (sign up here if needed)
• A modern web browser (Chrome, Firefox, Safari, or Edge)
• Basic familiarity with documentation concepts

Choose your workflow:

• Web-based workflow: No additional setup required - work directly in your browser
• Code/IDE workflow: Git repository and your preferred code editor (VS Code, etc.)

Setup

Step 1: Create your first project

1. Log in to your Documentation.AI dashboard
2. Click Create New Project
3. Enter the following details:
   • Project Name: My Product Documentation (or your product name)
   • Description: Complete documentation for my product
   • Template: Select API Documentation template (or choose the template that best fits your needs)

[SCREENSHOT: DASHBOARD SHOWING NEW PROJECT CREATION FORM WITH FIELDS FILLED OUT]

4. Click Create Project

Result: You'll see the project dashboard with a welcome message and setup checklist.

Step 2: Configure basic settings

1. In your project dashboard, click Settings → General
2. Update the following:
   • Site Title: My Product Docs (or your preferred title)
   • Site Description: Comprehensive documentation for my product
   • Primary Color: #2563eb (or choose your brand color)

[SCREENSHOT: Settings page showing general configuration options]

3. Click Save Changes

Result: Your site now has custom branding that will appear in the navigation and metadata.

Steps

Step 3: Create your site structure

1. Navigate to Content → Pages in your project dashboard
2. You'll see the default pages created from the template. Let's add more:

3. Click + New Page and create each page:
   • Page Title: Getting Started Guide (or choose your own page name)
   • URL Slug: getting-started-guide
   • Parent: Getting Started

[SCREENSHOT: New page creation modal with page details filled out]

4. Repeat for all pages in the structure above

Result: Your site now has a complete navigation structure visible in the sidebar.

Step 4: Write content with AI assistance

Documentation.AI supports two workflows for creating content. Choose the approach that works best for you:

[SCREENSHOT: Split view showing web editor on left and VS Code with MDX file on right]

Step 5: Add interactive components

Now let's enhance your Getting Started Guide with interactive components. The process differs slightly between workflows:

[SCREENSHOT: Split view showing component picker in web editor and MDX code in VS Code]

Result: Your Getting Started Guide now has professional, interactive components that work seamlessly in both workflows.

Step 6: Set up AI-powered search

1. Go to Settings → AI Assistant
2. Enable the following features:
   • AI Search: Toggle On
   • Search Suggestions: Toggle On
   • Content Analysis: Toggle On

[SCREENSHOT: AI Assistant settings page with toggles enabled]

3. Click Configure Search and add:

   • Search Placeholder: Search documentation... (or customize for your product)
   • No Results Message: No results found. Try asking our AI assistant for help.

4. Click Save Configuration

Result: Your documentation now has intelligent search that understands context and provides AI-powered answers.

Step 7: Customize branding

1. Navigate to Settings → Branding
2. Upload your logo (or use the placeholder):
   • Light Mode Logo: Upload or use default
   • Dark Mode Logo: Upload or use default
   • Favicon: Upload a 32x32 icon

[SCREENSHOT: Branding settings showing logo upload areas and preview]

3. Configure colors:

   • Primary Color: #2563eb
   • Accent Color: #1d4ed8
   • Background: Keep default

4. Set typography:

   • Heading Font: Inter
   • Body Font: Inter

5. Click Save Branding

Result: Your documentation site now reflects your brand identity with custom colors, fonts, and logos.

Step 8: Deploy your documentation

1. Go to Deploy → Settings
2. Choose your deployment option:

3. For this tutorial, select Documentation.AI Hosting
4. Click Deploy Now

[SCREENSHOT: Deployment settings showing hosting options and deploy button]

5. Wait for deployment (usually 2-3 minutes)

Result: Your documentation is now live and accessible via the provided URL.

Validate

To confirm your documentation site is working correctly:

1. Visit your live site at the provided URL (e.g., https://your-project-name.documentationai.io)

2. Test navigation: Click through all pages in your sidebar to ensure they load properly

3. Test search: Use the search bar to find content you've created

4. Test AI assistant: Click the AI assistant icon and ask questions about your documentation

5. Test responsive design: View your site on mobile by resizing your browser window

6. Verify branding: Confirm your custom colors, fonts, and logos appear correctly

Next steps

Now that your documentation site is live, consider these enhancements:

Immediate improvements

Workflow-specific next steps

Advanced features

• Custom domain setup for branded URLs like docs.yourcompany.com
• CI/CD integration for automated deployments

Content expansion

• Add more components like cards, mermaid diagrams, expandables, tables, and API playground
• Optimize for SEO with meta tags and structured data
• Set up user feedback to collect insights from your documentation users

Troubleshooting

Common issues and solutions

Related

Getting started

• Core concepts - Understanding Documentation.AI architecture
• Import existing docs - Migrate from other platforms

Essential features

• Web editor - Master the editing interface
• AI assistant setup - Configure AI features
• Component library - Available documentation components

Going live

• Deploy your documentation - Deployment options and configuration
• Custom domain setup - Use your own domain
• Analytics setup - Track usage and performance