> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stepsai.co/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Create Widget

> Step-by-step guide to creating your first AIDE widget

## Overview

Widgets are embeddable chat interfaces that you can integrate into your website or application. They provide your users with direct access to your AI assistant, powered by your knowledge base and connected data sources. This guide will walk you through creating your first widget from start to finish.

## Key Benefits

<CardGroup cols={2}>
  <Card title="Website Integration" icon="globe">
    Embed AI chat functionality directly into your website or application
  </Card>

  <Card title="Custom Branding" icon="palette">
    Customize colors, messaging, and appearance to match your brand
  </Card>

  <Card title="Knowledge Access" icon="database">
    Connect your knowledge base and data sources for contextual responses
  </Card>

  <Card title="User Engagement" icon="users">
    Provide instant support and assistance to your website visitors
  </Card>
</CardGroup>

## Getting Started

<Steps>
  <Step title="Navigate to Widgets">
    Go to the main page and click on "Widgets" in the left sidebar to access the widget management interface
  </Step>

  <Step title="Create New Widget">
    Click the "Create Widget" button to start building your first widget
  </Step>

  <Step title="Basic Information">
    Provide a name and description for your widget to identify its purpose
  </Step>

  <Step title="Configure Settings">
    Customize the design, connect data sources, and configure AI behavior
  </Step>
</Steps>

## Video Tutorial

<div className="relative aspect-video my-8">
  <img src="https://mintcdn.com/stepsai/bk8ntUWjoqlJB9Px/logo/light.svg?fit=max&auto=format&n=bk8ntUWjoqlJB9Px&q=85&s=a3b792588a8a597e6307250f257a3ef0" alt="Steps AI Logo" className="w-full aspect-video rounded-xl bg-white dark:bg-gray-900 object-contain p-8" width="708" height="404" data-path="logo/light.svg" />
</div>

<Tip>
  **Clear Purpose**: Define exactly what your widget will help users with before creating it
</Tip>

## Common Use Cases

<CardGroup cols={2}>
  <Card title="Customer Support" icon="headphones">
    Provide instant help and answer common customer questions
  </Card>

  <Card title="Product Information" icon="info">
    Share product details, specifications, and usage guides
  </Card>

  <Card title="Lead Generation" icon="user-plus">
    Engage visitors and collect contact information
  </Card>

  <Card title="FAQ Assistant" icon="help-circle">
    Answer frequently asked questions automatically
  </Card>
</CardGroup>

## FAQ

<AccordionGroup>
  <Accordion title="How many widgets can I create?">
    You can create unlimited widgets for different purposes, websites, or use cases. Each widget can have its own configuration and data sources.
  </Accordion>

  <Accordion title="Can I edit a widget after creating it?">
    Yes! You can edit any widget's configuration, design, and settings at any time. Changes will be reflected immediately after saving.
  </Accordion>

  <Accordion title="What information do I need to provide when creating a widget?">
    You'll need to provide a widget name and description. The name should be descriptive and help you identify the widget's purpose.
  </Accordion>

  <Accordion title="Can I create widgets for different websites?">
    Absolutely! You can create separate widgets for different websites, each with their own configuration and branding.
  </Accordion>

  <Accordion title="What happens after I create a widget?">
    After creation, you'll be taken to the configuration section where you can customize the design, connect data sources, and set up deployment options.
  </Accordion>

  <Accordion title="Can I duplicate an existing widget?">
    Yes! You can duplicate existing widgets to create similar ones with different configurations, saving time on setup.
  </Accordion>
</AccordionGroup>

## Troubleshooting

| Issue                         | Solution                                                       | Prevention                                      |
| ----------------------------- | -------------------------------------------------------------- | ----------------------------------------------- |
| **Can't Find Widgets**        | Check if you're on the main dashboard and look for the sidebar | Ensure you're logged into the correct account   |
| **Create Button Not Working** | Refresh the page and try again                                 | Check your internet connection                  |
| **Widget Not Saving**         | Verify all required fields are filled and try again            | Complete all required information before saving |
| **Configuration Issues**      | Start with basic settings and gradually add complexity         | Plan your widget configuration before creating  |

## Next Steps

<CardGroup cols={1}>
  <Card title="Configure Your Widget" icon="settings" href="/widgets/configuration">
    Learn how to customize your widget's design, AI behavior, and data sources
  </Card>
</CardGroup>