You already use Claude Code to write your app. It can also build the support agent for it. In this tutorial Claude Code will create the agent, train it on your docs, test it, and put a chat widget on your site. You paste the prompts. You do not need a dashboard, a form or a card.
We use AgentStack: AI support agents (agentstack.build). It publishes one guide written for coding agents, at agentstack.build/agent.md. Claude Code reads that guide and follows it.
Time: about 15 minutes, most of it spent waiting for the crawl. You need: Claude Code, the repo for your website, and a real email address you can read. Placeholder and disposable addresses are refused.
What you'll end up with
- A support agent trained on your docs site, your files and your own Q&A pairs
- A chat bubble on your site that answers visitors
- A workspace you own once you claim it, with the API key still working
Step 1: Give Claude Code the guide
Open Claude Code in your website's repo and paste this. It is the same prompt as on the AgentStack homepage:
Read https://www.agentstack.build/agent.md and set up a customer support agent for this codebase.
Claude Code will ask you for your email address. Give it a real one: a 6-digit code goes there, and that code is the only way to take ownership later.
It then makes one sign-up call. That call creates a sandbox workspace and returns an API key. The key is shown once only and cannot be issued again. Tell Claude Code to keep it out of git:
Save the AgentStack API key to .env.local as AGENTSTACK_API_KEY, make sure .env.local is gitignored, and note the claim_url and claim_expires_at somewhere I can see them.
Do not run the sign-up prompt twice. Each call creates a new workspace with its own key. It is not a retry.
What the sandbox gives you: 25 credits, granted once (1 chat message = 1 credit), 1 agent, up to 25 crawled pages per website, and 200 KB of training content in total, shared across all sources. The default model is openai/gpt-5.4-mini.
Step 2: Give the agent a job description
An agent created with only a name answers from its sources and nothing else. It has no tone and no rules for what to refuse. Spell them out:
Create the AgentStack agent with a systemInstruction that:
- says it is the support assistant for <your product>
- answers only from its sources, and says "I don't know" plus our support email <you@yourdomain> when the answer isn't there
- keeps replies under 120 words and links to the relevant docs page
Keep the agent's id and publicId.
Step 3: Train it on your content
Three kinds of source. Use whichever you have.
Train the agent:
1. Crawl https://<your-docs-site> with maxPages 25.
2. Add these Q&A pairs:
- "Do you offer refunds?" -> "<your answer>"
- "How do I cancel?" -> "<your answer>"
3. Upload ./docs/handbook.pdf as a file source.
Then poll the source lists until every source is completed, and tell me if any failed.
What happens under the hood:
- Websites are crawled in the background. If you leave out
maxPages, only 10 pages are crawled. Asking for more than 25 is refused, not quietly cut down. - Q&A pairs work as soon as they are saved.
- Files can be pdf, docx, doc, txt, pptx, xlsx, xls, png or jpg, up to 50 MB each. That 200 KB budget is the limit that bites first.
Nothing notifies Claude Code when training finishes. There is no webhook, which is why the prompt asks it to poll. A crawl of a URL it cannot reach still starts with a 200 and only shows failed later.
Step 4: Test it (spend credits carefully)
Send the agent 3 test questions through /api/v1/chat using one sessionId: one the docs answer, one only a Q&A pair answers, and one it should refuse. Show me each reply and creditsRemaining.
Read creditsRemaining after each reply. Nothing else reports your balance. At zero, chat returns 402 INSUFFICIENT_CREDITS. Three questions cost 3 of your 25 credits, so leave the rest for real visitors.
If an answer is wrong, add a Q&A pair rather than rewriting the prompt. It is the fastest fix and needs no polling.
Step 5: Put it on your site
Add the AgentStack widget to this site: put both script tags from agent.md in the file that wraps every page, just before </body>, using the agent's publicId (not id). Then tell me which file you changed.
In a Next.js app that file is usually app/layout.tsx. The guide tells Claude Code to edit the code itself rather than hand you a snippet to paste. Claude Code adds this:
<script>
window.agentstack=new Proxy({_q:[]},{get(t,p){
if(p==='_q')return t._q;return(...a)=>t._q.push([p,...a]);
}});
</script>
<script src="https://www.agentstack.build/embed.js" data-agent-id="<publicId>" async></script>
Agents are public by default, so there is no switch to turn on. Run your dev server and check three things: window.agentstack is defined, embed.js loads with a 200, and the bubble opens and replies.
Troubleshooting:
- No bubble at all: the
publicIdis wrong, the agent was set to private, or the unclaimed workspace has expired. - The bubble opens but never answers: almost always the credits have run out. Send one message from Step 4 to see the real error.
Visitor messages spend the same 25 credits as your tests. That is why this step comes after training and testing.
Step 6: Claim the workspace within 7 days (don't skip this)
An unclaimed sandbox is deleted 7 days after sign-up, and the widget on your site goes with it. No warning email is sent.
- Find the 6-digit code in your inbox. If no code arrived, open the claim URL and send yourself a new one from there.
- Open the claim URL Claude Code saved (
agentstack.build/claim/…). - Sign up or sign in with the same email address, enter the code, and adopt the workspace.
The claim page shows what Claude Code built: the agent, its instructions and its sources. After the claim:
- The workspace moves to the Free plan, and the sandbox route limits are lifted.
- The API key keeps working and stops expiring. It now belongs to you, so you can revoke it from your API keys page.
- The widget keeps working.
- Credits: the claim adds none, and the Free plan does not refill them. What is left of your 25 sandbox credits is the whole balance. If visitors will use it regularly, Hobby is $30/month for 1,500 messages.
Step 7 (optional): Manage it from Claude Code over MCP
Once you have an account, connect AgentStack's MCP server so that Claude Code can read real conversations and improve the agent:
claude mcp add --transport http agentstack https://www.agentstack.build/api/mcp -s user
Then, inside Claude Code, run /mcp, pick agentstack and authenticate. A browser window opens. Sign in and allow access on the consent screen, which lists what Claude Code may read and change. Then ask:
Using the agentstack MCP server, read this week's conversations, list the questions the agent couldn't answer, and add a Q&A pair for each one I approve.
If you only want Claude Code to look, connect https://www.agentstack.build/api/mcp/readonly instead. On that URL writes are blocked even if the token has write scope. The MCP server works on every plan, including Free.
Recap
| Step | Prompt does | Cost |
|---|---|---|
| 1 | Sign-up, key saved | 0 credits |
| 2–3 | Agent + training | 0 credits |
| 4 | 3 test messages | 3 credits |
| 5 | Widget in your layout | visitors spend credits |
| 6 | You claim it | free |
Start by pasting the prompt from Step 1, or begin in the dashboard if you would rather click. Full reference: agent sandbox guide, embed guide, MCP server.