# Create documentation from a demo video

import { Aside, Steps, Tabs, TabItem } from '@astrojs/starlight/components';

<Aside type="note" title="Request access">
  Docs Agent is available to all plans, but we grant access on request. Contact support@ekline.io to request access.
</Aside>

This tutorial shows you how to turn a product demo video into written documentation. You upload a walkthrough, Docs Agent transcribes it and reads what happens on screen, and you guide the agent to produce a structured guide that matches your existing docs.

By the end, you have a step-by-step guide drafted from your video and opened as a pull request, ready for review.

## Before you begin

You need:

- An EkLine account with Docs Agent enabled.
- A repository [connected to EkLine](/agent/github-app-setup/) where the documentation lives.
- A demo or walkthrough video that shows the feature you want to document.

Your video must meet these limits:

| Requirement | Value |
|-------------|-------|
| Formats | MP4, WebM, MOV, AVI, MPEG |
| Maximum size | 500 MB |

New to EkLine? [Connect GitHub to EkLine](/agent/github-app-setup/) first, then return here.

## Step 1: Prepare your demo video

A clear video produces a clear draft. Before you upload, check the following:

- **Narrate the important actions.** The agent transcribes the audio, so spoken explanations become part of the source material.
- **Move at a steady pace.** Pause briefly on each screen so the actions are easy to follow.
- **Trim dead air.** Cut long silences or unrelated tangents to keep the transcription focused.
- **Confirm the format and size.** Export as MP4, WebM, MOV, AVI, or MPEG, and keep the file under 500 MB.

A three-to-ten-minute screen recording with narration works well for a single feature.

## Step 2: Open a session

<Steps>
1. Log in to your [EkLine dashboard](https://ekline.io/dashboard).
2. Click **Docs Agent** in the left navigation.
</Steps>

<img
    className={'rounded-2xl'}
    width={1288}
    height={711}
    src={`/assets/images/docs-agent-editor.png`}
    alt={`The Docs Agent editor with the chat panel ready for a prompt`}
/>

## Step 3: Upload your video

<Steps>
1. Click the attachment icon in the chat panel.
2. Select your video file.
3. Wait for processing. Transcription runs before the agent can use the video, and it may take a few minutes for a longer recording.
</Steps>

The video appears as an attachment in the chat panel once processing finishes.

<Aside type="tip">
You can attach up to 20 files to a single message. Add a screenshot alongside the video if you want the agent to use a specific frame as an image in the guide.
</Aside>

## Step 4: Describe the documentation you want

Tell the agent what to build from the video. Naming the document type and audience keeps the output focused.

<Tabs>
  <TabItem label="Step-by-step tutorial">
    ```
    Create a step-by-step tutorial from this product demo.
    Describe each screen and action shown, and write it for a
    new user trying the feature for the first time.
    ```
  </TabItem>
  <TabItem label="Feature overview">
    ```
    Write a feature overview based on this walkthrough video.
    Focus on the key capabilities demonstrated and who they
    help.
    ```
  </TabItem>
  <TabItem label="Release notes">
    ```
    Generate release notes from this demo of new features.
    Summarize each feature shown for end users.
    ```
  </TabItem>
</Tabs>

To match your existing docs, point the agent at a similar page:

```
Create a step-by-step tutorial from this demo video. Match the
structure and tone of docs/tutorials/getting-started.md.
```

The agent analyzes the transcription and the on-screen content, then drafts the guide in the editor panel.

## Step 5: Review the draft

Read the draft in the editor panel and check it against the video:

- The steps follow the same order as the demo.
- Screen names, button labels, and menu paths match what the video shows.
- The guide covers every action you demonstrated, with nothing invented.

Refine anything that is off by replying in the chat. For example:

```
Add a verification step after the install section that tells the
reader what a successful setup looks like.
```

The agent updates the draft in place. Repeat until the guide reads the way you want.

## Step 6: Publish as a pull request

<Steps>
1. Enable **View All Changes** to see a diff of what the agent created.
2. Click **Raise PR** to open a pull request with the new guide.
3. The agent prefills a prompt in the chat. Press **Enter** to send it, or edit the prompt first to add instructions.
</Steps>

The agent opens the pull request and replies in the chat with a link where you continue the review on GitHub.

## Verify

Confirm the tutorial worked end to end:

- [ ] The uploaded video appears as an attachment in the chat panel.
- [ ] The editor panel shows a drafted guide that follows the demo.
- [ ] A pull request is open on your connected repository with the new file.

## Troubleshooting

| Issue | Solution |
|-------|----------|
| Upload is rejected | Check that the file is under 500 MB and in a supported format (MP4, WebM, MOV, AVI, MPEG). |
| Processing takes a long time | Transcription scales with video length. Wait a few minutes for longer recordings before sending your prompt. |
| The draft misses steps shown in the video | Narrate the missing actions in the recording, or describe them in a chat reply so the agent adds them. |
| Screen labels in the draft are wrong | Reply in the chat with the correct label and ask the agent to fix it. Attaching a screenshot of the screen helps. |

## Summary

You uploaded a demo video, guided Docs Agent to turn it into a structured guide, reviewed the draft against the recording, and opened a pull request. Your walkthrough is now written documentation your team can review and merge.

## Next steps

- [Create documentation](/agent/create/) — Generate docs from your codebase, screenshots, and external sources.
- [Update and review documentation](/agent/update-review/) — Keep the guide in sync as the feature changes.
- [Generate an API reference](/agent/generate-api-reference/) — Turn source code into reference documentation.