Tutorial
Build an Embeddable AI Chatbot Workflow in 5 Minutes
In this tutorial, you'll build an AI-powered chatbot workflow that visitors can use directly on your website. No backend code, no API wiring, no deployment pipeline. Just drag, drop, publish, embed.
The chatbot will collect a user's question, run it through an AI agent with a custom system prompt, and display the response — all within an embedded widget on your site.
Table of Contents
Prerequisites
- A running FlowForge instance (self-hosted or cloud)
- An AI provider configured (Settings → AI Providers → add your Anthropic or OpenAI key)
- 5 minutes of your time
Create the Workflow
Go to your Dashboard and click "New Workflow". Name it something like "AI Chatbot" and click Create. You'll land on an empty canvas with a Start node.
Add the User Input Node
Drag a User Inputnode from the palette onto the canvas. Connect the Start node's output to the User Input node's input.
Configure the node:
- Label:"Ask Your Question"
- Fields: Add one field:
- Name:
question - Type:
text - Label: "What would you like to know?"
- Required: Yes
- Name:
When the workflow runs, this node will pause and show a form. The visitor types their question, hits Submit, and the workflow continues.
Add the AI Agent Node
Drag an AI Agentnode onto the canvas. Connect User Input → AI Agent.
Configure the node:
- Provider: Select your configured AI provider
- System Prompt:
You are a helpful assistant for [YOUR COMPANY]. Answer questions about our products and services. Be concise and friendly. If you don't know the answer, say so and suggest they contact support@yourcompany.com.
- User Message:
{{userInput.question}} - Output Variable:
aiResponse
Tip: The {{userInput.question}} syntax pulls the value from the User Input node. FlowForge uses {{nodeId.fieldName}} for variable interpolation.
Display the Response
Drag a Displaynode onto the canvas. Connect AI Agent → Display. Then connect Display → End.
Configure the Display node:
- Title:"Answer"
- Content:
{{aiResponse}}
Your complete flow should look like this:
[Start] → [User Input: "What would you like to know?"]
→ [AI Agent: Process question with system prompt]
→ [Display: Show AI response]
→ [End]Test It
Click the Runbutton in the toolbar. The workflow starts, and a dialog appears asking for input. Type a question like "What are your pricing plans?" and submit.
Watch the nodes light up in real time: blue (running) → green (completed). The Display node shows the AI's response. If something's wrong, click any node to see its input/output data.
Publish & Embed
Click Publish in the toolbar. Then open the embed settings:
- Click the Embedbutton (or go to workflow settings → Embed)
- Toggle Enable Embed on
- Add your website's domain to Allowed Origins (e.g.,
https://yoursite.com) - Choose a theme (Light / Dark / Auto)
- Copy the embed snippet
Paste this into your website's HTML:
<iframe src="https://your-flowforge.com/embed/abc123token" width="100%" height="500" style="border: none; border-radius: 12px;" allow="clipboard-write" ></iframe>
That's it. Visitors to your site can now ask questions and get AI-powered answers, all running through your FlowForge workflow.
Security note:The embed uses token-based auth with rate limiting (10 runs/min per token+IP). Your AI provider credentials are never exposed to the client — they're encrypted server-side with AES-256-GCM.
Bonus: Use AI to Build the Entire Workflow
Don't want to drag and drop? Use FlowForge's AI generation feature instead. Click "AI Generate" in the toolbar and type:
"Create a chatbot workflow that asks the user a question, sends it to an AI agent with a helpful assistant system prompt, and displays the response."
FlowForge generates the complete node graph in seconds. Review it, tweak the system prompt, publish, and embed. The entire process takes under 2 minutes.
Pro tip: After generating, use Modify mode to iterate. For example: "Add a follow-up question that asks if the answer was helpful, and log the feedback." The AI updates the existing graph while preserving node IDs.
Already have a flowchart? The AI Generate dialog accepts image and PDF attachments too. Drop in a PNG, JPG, GIF, WEBP, or PDF of your diagram (Visio, Lucidchart, Miro, draw.io, a screenshot — anything) and FlowForge converts the shapes into a running workflow:
- Rectangles become Action, API Call, SQL Query, Email, or similar nodes — chosen by keywords in the label ("send via API" → API Call, "insert into table" → SQL Query, etc.)
- Diamonds become Condition nodes, with Yes/No arrow labels wired to the correct true/false handles
- Ovals / "End" / "Stop" become End nodes
- Swim lanes (e.g. "Database", "API") are prepended to node labels as context
- Legend boxes, callouts, sticky notes are automatically ignored
Provider note: Both Anthropic (Claude) and OpenAI (GPT-4o) read images and PDFs natively — pick whichever you have configured. Max attachment size is 10 MB.
What's Next?
- Add memory: Use a Set Variable + Condition node to store conversation context across multiple runs
- Add file upload: Let visitors upload a document, then have the AI answer questions about it
- Add routing: Use a Condition node to route different question types to different AI prompts (sales vs. support vs. technical)
- Connect MCP tools: Give your AI agent access to your database, APIs, or file system via MCP
- Track analytics: Add an API Call node that logs each question + answer to your analytics platform
Build your first workflow
Create an account and start building in minutes. Free.