---
title: Create an MVC component for the UI
slug: cms-11/dev-docs/creating-a-component
docTags: 
createdAt: 2026-07-22T19:45:20.939Z
---

The Optimizely Content Management System (CMS) extension of the `IFrameComponent` has the following additional parameters:

- `UrlFromUtil`  – Optional. The URL to the source is relative to the `Utils` folder. Used instead of `Url` property.
- `UrlFromUi` – Optional. The URL to the source is relative to the `UI` folder. Used instead of `Url` property.

1. Add a  `Controller` and annotate it with an `IframeComponent` attribute.

```csharp
[IFrameComponent(Url = "/helloworld", Title = "Hello World Component", Categories = "content")]
public class HelloWorldController: Controller {
  public ActionResult Index() {
    return View();
  }
}
```

2. Add a `Index.cshtml` view to the `Views/HelloWorld` directory:

```csharp
@{
    Layout = null;
 }
    
 <!DOCTYPE html>
    
 <html>
   <head>
     <meta name="viewport" content="width=device-width" />
     <title>HelloWorld</title>
   </head>
   <body>
     <div>
       <div>Hello World</div>
     </div>
   </body>
 </html>
```