diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
new file mode 100644
index 0000000000..c5b5f22bf1
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/pipeline/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+import RagPipeline from '@/app/components/rag-pipeline'
+
+const PipelinePage = () => {
+  return (
+    <RagPipeline />
+  )
+}
+export default PipelinePage
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx
new file mode 100644
index 0000000000..49656bd25a
--- /dev/null
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx
@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import type { HeaderProps } from '@/app/components/workflow/header'
+import Header from '@/app/components/workflow/header'
+import InputFieldButton from './input-field-button'
+
+const RagPipelineHeader = () => {
+  const headerProps: HeaderProps = useMemo(() => {
+    return {
+      normal: {
+        components: {
+          left: <InputFieldButton />,
+        },
+      },
+    }
+  }, [])
+
+  return (
+    <Header {...headerProps} />
+  )
+}
+
+export default RagPipelineHeader
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
new file mode 100644
index 0000000000..149b5d0186
--- /dev/null
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/input-field-button.tsx
@@ -0,0 +1,9 @@
+import Button from '@/app/components/base/button'
+
+const InputFieldButton = () => {
+  return (
+    <Button>Input Field</Button>
+  )
+}
+
+export default InputFieldButton
diff --git a/web/app/components/rag-pipeline/index.tsx b/web/app/components/rag-pipeline/index.tsx
new file mode 100644
index 0000000000..93a6f7462a
--- /dev/null
+++ b/web/app/components/rag-pipeline/index.tsx
@@ -0,0 +1,29 @@
+import WorkflowWithDefaultContext, {
+  WorkflowWithInnerContext,
+} from '@/app/components/workflow'
+import Panel from '@/app/components/workflow/panel'
+import {
+  WorkflowContextProvider,
+} from '@/app/components/workflow/context'
+import RagPipelineHeader from './components/rag-pipeline-header'
+
+const RagPipeline = () => {
+  return (
+    <WorkflowContextProvider>
+      <WorkflowWithDefaultContext
+        edges={[]}
+        nodes={[]}
+      >
+        <WorkflowWithInnerContext
+          nodes={[]}
+          edges={[]}
+        >
+          <RagPipelineHeader />
+          <Panel />
+        </WorkflowWithInnerContext>
+      </WorkflowWithDefaultContext>
+    </WorkflowContextProvider>
+  )
+}
+
+export default RagPipeline