diff --git a/ui/src/components/BeamlineActions/AnnotatedBeamlineActionForm.jsx b/ui/src/components/BeamlineActions/AnnotatedBeamlineActionForm.jsx
new file mode 100644
index 000000000..59d6a2414
--- /dev/null
+++ b/ui/src/components/BeamlineActions/AnnotatedBeamlineActionForm.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Row, Col, Button } from 'react-bootstrap';
+import JSForm from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import styles from './BeamlineActions.module.css';
+
+export default function AnnotatedBeamlineActionForm(props) {
+  const {
+    actionId,
+    actionSchema,
+    isActionRunning,
+    handleStopAction,
+    handleStartAction,
+  } = props;
+
+  return (
+    <Row className="py-2">
+      <Col className="col-md-4">
+        <div className={styles.formContainer}>
+          <JSForm
+            liveValidate
+            validator={validator}
+            schema={JSON.parse(actionSchema)}
+            onSubmit={({ formData }) => {
+              handleStartAction(actionId, formData);
+            }}
+          >
+            {isActionRunning ? (
+              <Button
+                className={styles.submitButton}
+                variant="danger"
+                onClick={() => {
+                  handleStopAction(actionId);
+                }}
+              >
+                Abort
+              </Button>
+            ) : (
+              <Button
+                className={styles.submitButton}
+                disabled={isActionRunning}
+                variant="primary"
+                type="submit"
+              >
+                Run
+              </Button>
+            )}
+          </JSForm>
+        </div>
+      </Col>
+      <Row className="py-2" />
+    </Row>
+  );
+}
diff --git a/ui/src/components/BeamlineActions/BeamlineActionForm.jsx b/ui/src/components/BeamlineActions/BeamlineActionForm.jsx
new file mode 100644
index 000000000..d3dbe048e
--- /dev/null
+++ b/ui/src/components/BeamlineActions/BeamlineActionForm.jsx
@@ -0,0 +1,58 @@
+import React, { Fragment } from 'react';
+import { Row, Col, Button, Form } from 'react-bootstrap';
+
+export default function BeamlineActionForm(props) {
+  const {
+    actionId,
+    isActionRunning,
+    actionArguments,
+    handleStopAction,
+    handleStartAction,
+    handleSetActionArgument,
+  } = props;
+
+  return (
+    <Row>
+      {actionArguments.map((arg, i) => (
+        <Fragment key={arg.name}>
+          <Col className="mt-2" xs={1} style={{ whiteSpace: 'nowrap' }}>
+            {arg.name}
+          </Col>
+          <Col xs={1}>
+            <Form.Control
+              label={arg.name}
+              type="text"
+              value={arg.value}
+              disabled={isActionRunning}
+              onChange={(e) => {
+                handleSetActionArgument(actionId, i, e.target.value);
+              }}
+            />
+          </Col>
+        </Fragment>
+      ))}
+      <Col>
+        {isActionRunning ? (
+          <Button
+            variant="danger"
+            onClick={() => {
+              handleStopAction(actionId);
+            }}
+          >
+            Abort
+          </Button>
+        ) : (
+          <Button
+            disabled={isActionRunning}
+            variant="primary"
+            onClick={() => {
+              handleStartAction(actionId);
+            }}
+          >
+            Run
+          </Button>
+        )}
+      </Col>
+    </Row>
+  );
+}
diff --git a/ui/src/components/BeamlineActions/BeamlineActions.module.css b/ui/src/components/BeamlineActions/BeamlineActions.module.css
new file mode 100644
index 000000000..ca31e4a85
--- /dev/null
+++ b/ui/src/components/BeamlineActions/BeamlineActions.module.css
@@ -0,0 +1,16 @@
+.formContainer :global(.rjsf) legend {
+  display: none;
+}
+
+.formContainer :global(.rjsf) :global(.control-label) {
+  display: inline;
+}
+
+.formContainer :global(.rjsf) :global(.field-description) {
+  display: inline;
+  margin-left: 0.5em;
+}
+
+.submitButton {
+  margin-top: 1em;
+}