Create your first component

Build a small Button component from a container and a text label. This exercise introduces the File Explorer, Element Explorer, canvas, Design inspector, preview, and the equivalent MCP route without requiring logic or animation first.

Before you start

Open a project in Misaki Studio. This guide uses components/atoms because the default project structure includes an Atoms folder for small reusable components.

Coverage: UI + MCP for the resulting Component structure. Visual placement and direct refinement remain easiest to understand in the editor.

Build it in the editor

1. Create the Component file

1. Open Files in the left sidebar.

2. Expand Components, then Atoms.

3. Right-click Atoms and choose Create File.

4. Name the file Button and submit the dialog.

5. Open the new file from the File Explorer.

Creating the file is a project file-system action. It is not the same kind of change as editing elements inside an already open Component.

2. Find the Component body

Switch the left sidebar to Elements. Expand the default Component structure until you can select its Body. Body is the root container for the screen's authored elements.

If you do not see Elements, confirm that a visual Component file—not Home or a code component—is selected.

3. Draw the button container

Choose Element from the canvas draw control and drag a box inside the Component screen. The new Element should appear beneath Body in the Element Explorer.

Rename it Button so later logic, MCP prompts, and review steps can target an intentional name instead of a generated one.

4. Add the label

With the new container selected, add a Text child. You can draw Text inside the container or use the applicable element action. Edit the text to read Button, then select outside the text editor to finish.

Check the Element Explorer: Text should be nested inside Button rather than beside it. Hierarchy matters because it determines containment and generated component structure.

5. Make the container fit its label

Select the Button element and open Design in the right inspector.

1. In Size, set Width and Height to Fit Content.

2. In Layout, add Padding and choose a value that gives the label space around all four sides.

The exact control rows shown in Design depend on the selected node. If Padding is not visible, add it from the Layout section's available properties.

6. Preview the result

Open the Component preview and confirm that:

• the label reads Button;

• the label is a child of the Button container;

• the container hugs its content instead of filling the screen;

• padding remains visible around the label.

Preview verifies the rendered result. The Element Explorer verifies the saved hierarchy. Check both.

Ask an agent to build the same structure

Select my project and inspect components/atoms before editing. Create a visual Component file named Button only if it does not already exist. In its default Body, add one Element named Button with one Text child named Label; set the text to Button. Set the container width and height to Fit Content and add equal fixed padding on every side. Read the resulting hierarchy and styles back, then show me a preview screenshot. Do not change any other file.

A typical MCP sequence uses create-file, Component element tools such as add-element, add-text, and set-element-name, the text and style operations, then a structure read or preview screenshot. The agent must inspect the created file and actual node references rather than inventing identifiers.

If the tool schema cannot express one requested style exactly, the agent should report the partial result instead of silently choosing a different property. Finish that part in the Design inspector and keep the page's coverage label accurate.

Undo and recovery

Element, text, and style mutations belong to the Component file's content history and should form undoable content changes. MCP exposes undo and redo for referenced file-content history.

Creating or deleting the whole file is a project file-system operation and does not automatically share the Component's content undo stack. If the file was created by mistake, verify its path before using the File Explorer or delete-file to remove it.

Where to go next

• Tour the project interface if you want a clearer map of the surrounding controls.

• Components for the complete Component anatomy and integration model.

• Properties, states, and events before adding behavior to its public contract.

• Use the UI, an agent, or both before delegating a larger change.

• Continue with responsive screens, properties and states, animation, or export once their rewritten guides are ready.