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

# Add a component to a dashboard



## OpenAPI

````yaml /api-reference/openapi.json post /api/v1/dashboards/{dashboard_id}/components
openapi: 3.1.0
info:
  title: apowerb API
  description: REST API of the apowerb agentic framework (open-source edition).
  version: 0.1.2
  license:
    name: MIT
    url: https://github.com/apowerb/apowerb/blob/main/LICENSE
servers:
  - url: https://api.example.com
    description: Your apowerb instance
  - url: http://localhost:8000
    description: Local stack
security: []
paths:
  /api/v1/dashboards/{dashboard_id}/components:
    post:
      tags:
        - dashboards
      summary: Add a component to a dashboard
      operationId: add_component_api_v1_dashboards__dashboard_id__components_post
      parameters:
        - name: dashboard_id
          in: path
          required: true
          schema:
            type: string
            title: Dashboard Id
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/AddComponentRequest'
      responses:
        '201':
          description: Successful Response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/DashboardResponse'
        '404':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/ErrorResponse'
          description: Not Found
        '422':
          description: Validation Error
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/HTTPValidationError'
      security:
        - HTTPBearer: []
components:
  schemas:
    AddComponentRequest:
      properties:
        component:
          $ref: '#/components/schemas/ComponentCreateSchema'
      type: object
      required:
        - component
      title: AddComponentRequest
      description: POST /dashboards/{id}/components
    DashboardResponse:
      properties:
        id:
          type: string
          title: Id
        title:
          type: string
          title: Title
        description:
          anyOf:
            - type: string
            - type: 'null'
          title: Description
        slug:
          anyOf:
            - type: string
            - type: 'null'
          title: Slug
        columns:
          type: integer
          title: Columns
        status:
          $ref: '#/components/schemas/DashboardStatus'
        visibility:
          $ref: '#/components/schemas/DashboardVisibility'
        version:
          type: integer
          title: Version
        components:
          items:
            $ref: '#/components/schemas/ComponentResponse'
          type: array
          title: Components
        permissions:
          items:
            type: string
          type: array
          title: Permissions
        created_at:
          type: string
          format: date-time
          title: Created At
        updated_at:
          type: string
          format: date-time
          title: Updated At
        created_by:
          anyOf:
            - type: string
            - type: 'null'
          title: Created By
        agent_id:
          anyOf:
            - type: integer
            - type: 'null'
          title: Agent Id
      type: object
      required:
        - id
        - title
        - description
        - slug
        - columns
        - status
        - visibility
        - version
        - components
        - permissions
        - created_at
        - updated_at
        - created_by
      title: DashboardResponse
      description: Full dashboard returned by the API.
    ErrorResponse:
      properties:
        detail:
          type: string
          title: Detail
        code:
          anyOf:
            - type: string
            - type: 'null'
          title: Code
      type: object
      required:
        - detail
      title: ErrorResponse
    HTTPValidationError:
      properties:
        detail:
          items:
            $ref: '#/components/schemas/ValidationError'
          type: array
          title: Detail
      type: object
      title: HTTPValidationError
    ComponentCreateSchema:
      properties:
        component_type:
          $ref: '#/components/schemas/ComponentType'
        position:
          $ref: '#/components/schemas/GridPositionSchema'
        chart:
          anyOf:
            - $ref: '#/components/schemas/ChartWidgetSchema'
            - type: 'null'
        key_value:
          anyOf:
            - $ref: '#/components/schemas/KeyValueCreateSchema'
            - type: 'null'
        table:
          anyOf:
            - $ref: '#/components/schemas/TableWidgetCreateSchema'
            - type: 'null'
      type: object
      required:
        - component_type
      title: ComponentCreateSchema
      description: >-
        One component slot. Exactly one of chart / key_value / table must be
        set.

        component_type is required and must match the populated field.
    DashboardStatus:
      type: string
      enum:
        - draft
        - published
        - archived
      title: DashboardStatus
    DashboardVisibility:
      type: string
      enum:
        - private
        - organization
        - public
      title: DashboardVisibility
    ComponentResponse:
      properties:
        id:
          type: string
          title: Id
        component_type:
          $ref: '#/components/schemas/ComponentType'
        position:
          $ref: '#/components/schemas/GridPosition'
        chart:
          anyOf:
            - $ref: '#/components/schemas/ChartWidgetResponse'
            - type: 'null'
        key_value:
          anyOf:
            - $ref: '#/components/schemas/KeyValueResponse'
            - type: 'null'
        table:
          anyOf:
            - $ref: '#/components/schemas/TableWidgetResponse'
            - type: 'null'
      type: object
      required:
        - id
        - component_type
        - position
        - chart
        - key_value
        - table
      title: ComponentResponse
    ValidationError:
      properties:
        loc:
          items:
            anyOf:
              - type: string
              - type: integer
          type: array
          title: Location
        msg:
          type: string
          title: Message
        type:
          type: string
          title: Error Type
        input:
          title: Input
        ctx:
          type: object
          title: Context
      type: object
      required:
        - loc
        - msg
        - type
      title: ValidationError
    ComponentType:
      type: string
      enum:
        - chart
        - key_value
        - table
      title: ComponentType
    GridPositionSchema:
      properties:
        row:
          type: integer
          minimum: 0
          title: Row
          default: 0
        col:
          type: integer
          minimum: 0
          title: Col
          default: 0
        width:
          type: integer
          maximum: 12
          minimum: 1
          title: Width
          default: 6
        height:
          type: integer
          minimum: 1
          title: Height
          default: 4
      type: object
      title: GridPositionSchema
    ChartWidgetSchema:
      properties:
        chart_id:
          type: string
          title: Chart Id
        title_override:
          anyOf:
            - type: string
            - type: 'null'
          title: Title Override
        refresh_interval_override:
          anyOf:
            - type: integer
              exclusiveMinimum: 0
            - type: 'null'
          title: Refresh Interval Override
      type: object
      required:
        - chart_id
      title: ChartWidgetSchema
    KeyValueCreateSchema:
      properties:
        label:
          type: string
          maxLength: 80
          minLength: 1
          title: Label
        value:
          anyOf:
            - type: integer
            - type: number
            - type: string
          title: Value
        unit:
          anyOf:
            - type: string
            - type: 'null'
          title: Unit
        description:
          anyOf:
            - type: string
            - type: 'null'
          title: Description
        trend:
          anyOf:
            - $ref: '#/components/schemas/TrendSchema'
            - type: 'null'
        source_query:
          anyOf:
            - type: string
            - type: 'null'
          title: Source Query
        refresh_interval:
          anyOf:
            - type: integer
              exclusiveMinimum: 0
            - type: 'null'
          title: Refresh Interval
          default: 30
      type: object
      required:
        - label
        - value
      title: KeyValueCreateSchema
    TableWidgetCreateSchema:
      properties:
        title:
          type: string
          maxLength: 120
          minLength: 1
          title: Title
        description:
          anyOf:
            - type: string
            - type: 'null'
          title: Description
        source_query:
          type: string
          title: Source Query
        columns:
          items:
            $ref: '#/components/schemas/TableColumnSchema'
          type: array
          title: Columns
        default_page_size:
          type: integer
          maximum: 500
          minimum: 1
          title: Default Page Size
          default: 25
        default_sort_field:
          anyOf:
            - type: string
            - type: 'null'
          title: Default Sort Field
        searchable:
          type: boolean
          title: Searchable
          default: true
        refresh_interval:
          anyOf:
            - type: integer
            - type: 'null'
          title: Refresh Interval
      type: object
      required:
        - title
        - source_query
        - columns
      title: TableWidgetCreateSchema
    GridPosition:
      properties:
        row:
          type: integer
          minimum: 0
          title: Row
          default: 0
        col:
          type: integer
          minimum: 0
          title: Col
          default: 0
        width:
          type: integer
          maximum: 12
          minimum: 1
          title: Width
          description: Column span (1-12)
          default: 6
        height:
          type: integer
          minimum: 1
          title: Height
          description: Row span in grid units
          default: 4
      type: object
      title: GridPosition
      description: Where a component sits in the dashboard grid.
    ChartWidgetResponse:
      properties:
        chart_id:
          type: string
          title: Chart Id
        title_override:
          anyOf:
            - type: string
            - type: 'null'
          title: Title Override
        refresh_interval_override:
          anyOf:
            - type: integer
            - type: 'null'
          title: Refresh Interval Override
      type: object
      required:
        - chart_id
        - title_override
        - refresh_interval_override
      title: ChartWidgetResponse
    KeyValueResponse:
      properties:
        id:
          type: string
          title: Id
        label:
          type: string
          title: Label
        value:
          anyOf:
            - type: integer
            - type: number
            - type: string
          title: Value
        unit:
          anyOf:
            - type: string
            - type: 'null'
          title: Unit
        description:
          anyOf:
            - type: string
            - type: 'null'
          title: Description
        trend:
          anyOf:
            - $ref: '#/components/schemas/TrendResponse'
            - type: 'null'
        source_query:
          anyOf:
            - type: string
            - type: 'null'
          title: Source Query
        refresh_interval:
          anyOf:
            - type: integer
            - type: 'null'
          title: Refresh Interval
      type: object
      required:
        - id
        - label
        - value
        - unit
        - description
        - trend
        - source_query
        - refresh_interval
      title: KeyValueResponse
    TableWidgetResponse:
      properties:
        id:
          type: string
          title: Id
        title:
          type: string
          title: Title
        description:
          anyOf:
            - type: string
            - type: 'null'
          title: Description
        source_query:
          type: string
          title: Source Query
        columns:
          items:
            $ref: '#/components/schemas/TableColumnResponse'
          type: array
          title: Columns
        default_page_size:
          type: integer
          title: Default Page Size
        default_sort_field:
          anyOf:
            - type: string
            - type: 'null'
          title: Default Sort Field
        searchable:
          type: boolean
          title: Searchable
        refresh_interval:
          anyOf:
            - type: integer
            - type: 'null'
          title: Refresh Interval
      type: object
      required:
        - id
        - title
        - description
        - source_query
        - columns
        - default_page_size
        - default_sort_field
        - searchable
        - refresh_interval
      title: TableWidgetResponse
    TrendSchema:
      properties:
        value:
          type: number
          title: Value
        is_percentage:
          type: boolean
          title: Is Percentage
          default: true
        direction:
          $ref: '#/components/schemas/TrendDirection'
        sentiment:
          $ref: '#/components/schemas/TrendSentiment'
        label:
          anyOf:
            - type: string
            - type: 'null'
          title: Label
      type: object
      required:
        - value
        - direction
        - sentiment
      title: TrendSchema
    TableColumnSchema:
      properties:
        key:
          type: string
          title: Key
        label:
          type: string
          title: Label
        col_type:
          $ref: '#/components/schemas/ColumnType'
          default: string
        sortable:
          type: boolean
          title: Sortable
          default: true
        filterable:
          type: boolean
          title: Filterable
          default: false
        width:
          anyOf:
            - type: integer
            - type: 'null'
          title: Width
        format:
          anyOf:
            - type: string
            - type: 'null'
          title: Format
      type: object
      required:
        - key
        - label
      title: TableColumnSchema
    TrendResponse:
      properties:
        value:
          type: number
          title: Value
        is_percentage:
          type: boolean
          title: Is Percentage
        direction:
          $ref: '#/components/schemas/TrendDirection'
        sentiment:
          $ref: '#/components/schemas/TrendSentiment'
        label:
          anyOf:
            - type: string
            - type: 'null'
          title: Label
      type: object
      required:
        - value
        - is_percentage
        - direction
        - sentiment
        - label
      title: TrendResponse
    TableColumnResponse:
      properties:
        key:
          type: string
          title: Key
        label:
          type: string
          title: Label
        col_type:
          $ref: '#/components/schemas/ColumnType'
        sortable:
          type: boolean
          title: Sortable
        filterable:
          type: boolean
          title: Filterable
        width:
          anyOf:
            - type: integer
            - type: 'null'
          title: Width
        format:
          anyOf:
            - type: string
            - type: 'null'
          title: Format
      type: object
      required:
        - key
        - label
        - col_type
        - sortable
        - filterable
        - width
        - format
      title: TableColumnResponse
    TrendDirection:
      type: string
      enum:
        - up
        - down
        - neutral
      title: TrendDirection
    TrendSentiment:
      type: string
      enum:
        - positive
        - negative
        - neutral
      title: TrendSentiment
      description: Decoupled from direction — a drop can be good (e.g. error rate).
    ColumnType:
      type: string
      enum:
        - string
        - number
        - boolean
        - datetime
        - badge
        - link
      title: ColumnType
  securitySchemes:
    HTTPBearer:
      type: http
      scheme: bearer

````

## Related topics

- [Remove a component from a dashboard](/api-reference/dashboards/remove-a-component-from-a-dashboard.md)
- [Add a chart to the user's chat dashboard (user-triggered)](/api-reference/charts/add-a-chart-to-the-users-chat-dashboard-user-triggered.md)
- [Create a dashboard](/api-reference/dashboards/create-a-dashboard.md)
- [Unpublish a dashboard](/api-reference/dashboards/unpublish-a-dashboard.md)
- [Publish a dashboard](/api-reference/dashboards/publish-a-dashboard.md)