Figma
API
Web to code extension
Adobe XD
Discord
Twitter
GitHub
Blog
How to Share AI Agent Output as a Live Link: Artifacts, Markdown, and Apps9 min read
Reading Time: 6 minutesShort answer: Connect the Anima MCP server (https://public-api.animaapp.com/v1/mcp) to your coding agent. Your agent calls playground-create with the files it just wrote and gets back a playgroundUrl you can open and share immediately. Call playground-publish and it gets a public liveUrl. The result stays a real git repo, so the agent can keep editing it after it ships.
claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp
The problem: agents can write code, but they can’t hand you a URL
An agent finishes a task and produces something visual: a dashboard, a landing page, a report, a component. Then it stops at the edge of your filesystem.
What you get is a folder. What you wanted was a link to send someone.
The usual workarounds all break the loop:
- Copy the HTML into a paste-and-host service. You leave the agent session, the output is frozen, and the agent can’t touch it again.
- Run it locally.
localhost:3000isn’t shareable. - Wire up a real deploy pipeline. Now the agent needs repo access, CI config, and a hosting account before anyone can look at a prototype.
- Screenshot it. Nobody can click a screenshot.
The gap isn’t hosting. Hosting is solved. The gap is that hosting isn’t reachable from inside the agent loop: the agent can’t create the destination, push to it, and get the URL back, all as tool calls.
That’s what Anima MCP does.
What is Anima MCP?
Anima MCP is an HTTP Model Context Protocol server that connects an AI coding agent to Anima Playground: a hosted environment where every project is a live preview backed by a real git repository.
It works with any MCP-compatible client: Claude Code, Cursor, VS Code Copilot, Cline, or your own agent.
Once connected, the agent gets tools for the whole round trip:
| Tool | What it does |
|---|---|
playground-create |
Create a project from your files, a prompt, a URL, or a Figma frame. Returns playgroundUrl + a git remote |
project-get_git_token |
Get a short-lived git remote to clone, edit, and push an existing project |
playground-publish |
Deploy to a public liveUrl |
playground-metadata-update |
Rename a project or change its visibility |
codegen-figma_to_code |
Generate code from a Figma frame into an existing codebase |
workspace-list_artifacts |
List everything in a workspace |
The important detail: playground-create accepts code you already have. It isn’t only a generator. Pass type: "import" with a map of files, and your agent’s output becomes the first commit of a live, previewable project.
How do I turn agent-generated code into a shareable link?
Three tool calls, no account switching, no local server.
1. Create the project from the agent’s files
playground-create(
type: "import",
name: "Q3 metrics dashboard",
framework: "react",
files: {
"index.html": "<!doctype html>...",
"src/App.tsx": "export default function App() { ... }",
"package.json": "{ \"name\": \"dashboard\", ... }"
}
)
Returns:
{
"sessionId": "abc123xyz",
"playgroundUrl": "https://dev.animaapp.com/chat/abc123xyz",
"gitRemoteUrl": "https://...",
"name": "Q3 metrics dashboard"
}
playgroundUrl is live the moment you get it. That’s your link.
Size limits: files is for text, up to roughly 100 KB total. For anything bigger, or anything binary (images, fonts, a full dist/), call playground-get_zip_upload_url, PUT the zip to the returned uploadUrl, then pass the zipUploadId to playground-create instead.
Framework: only react and html exist. html is the default for generated projects; declare react explicitly when importing a React app.
2. Iterate: the project is a git repo
This is the part that separates a preview environment from a paste-bin. When someone asks for a change, the agent doesn’t regenerate from scratch:
# get a fresh remote (tokens last up to 1 hour and can't be renewed)
# via project-get_git_token(sessionId: "abc123xyz")
git clone <gitRemoteUrl> ./project
cd project
# ...agent edits files...
git commit -am "Fix mobile breakpoint on KPI cards"
git push
Pushing updates the live URL. The link you already sent your teammate now shows the fix.
If a git command fails with a token-expired error, call project-get_git_token again, git remote set-url origin <new url>, and retry.
3. Publish when you want it public
playground-publish(sessionId: "abc123xyz", mode: "webapp") Returns { liveUrl, subdomain }: a standalone deployed site anyone can open, no Anima account needed. Publishing typically takes 1–3 minutes, so set a generous timeout (600000 ms) on the call.
Sharing and publishing are different things. A playground is already viewable at its playgroundUrl by anyone who has access to it; use playground-metadata-update to change visibility. playground-publish is for when you want a real deployed site at its own address. Don’t publish unless the user asked for it.
How do I share markdown as a webpage?
Agents produce a lot of markdown: research summaries, migration plans, architecture docs, changelogs. Markdown in a chat window is hard to hand to a stakeholder, and a .md file in a repo requires the reader to have the repo.
Import it as a tiny self-rendering page:
playground-create(
type: "import",
name: "Auth migration plan",
framework: "html",
files: {
"index.html": "<!doctype html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>Auth migration plan</title><script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script><style>body{max-width:44rem;margin:3rem auto;padding:0 1.5rem;font:16px/1.7 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#1a1a1a}pre{background:#f6f8fa;padding:1rem;border-radius:8px;overflow-x:auto}code{font-size:.9em}table{border-collapse:collapse;width:100%}td,th{border:1px solid #e1e4e8;padding:.5rem}</style></head><body><div id=\"doc\"></div><script>fetch('./doc.md').then(r=>r.text()).then(t=>{document.getElementById('doc').innerHTML=marked.parse(t)})</script></body></html>",
"doc.md": "# Auth migration plan\n\n## Phase 1\n..."
}
)
You get a readable, linkable document. The markdown stays as markdown in the repo, so the agent can revise doc.md over git and the page updates.
The same trick covers slide decks (reveal.js), diagrams (Mermaid), and interactive reports: anything that’s HTML plus data.
How do I host a Claude artifact or ChatGPT canvas output?
Artifacts from Claude, canvas output from ChatGPT, and single-file HTML from any model are all the same shape: one self-contained HTML file with inline CSS and JS.
Download the artifact as .html, then:
playground-create(
type: "import",
framework: "html",
files: { "index.html": "<paste the artifact HTML>" }
)
If the agent still has the artifact in context, it can skip the download entirely and pass the string straight through.
What you gain over a static paste-and-host service:
- The agent can keep editing it: the artifact isn’t frozen at the moment you exported it
- Version history, because it’s git
- A path from throwaway prototype to real app (add a database, add auth, connect a custom domain) without moving to a different tool
How is this different from Netlify MCP, Vercel, or a paste-and-host service?
| Static host / paste service | Netlify or Vercel MCP | Anima MCP | |
|---|---|---|---|
| Agent creates the target | No: you set up the project | Usually needs an existing site/project | Yes, one tool call |
| Works with zero prior setup | Yes | Needs an account + linked project | Needs an Anima account only |
| Agent can edit after sharing | No | Yes, via your repo | Yes, via the returned git remote |
| Preview URL before publishing | No | Deploy previews | Yes, playgroundUrl is instant |
| Generate the app too | No | No | Yes: prompt, URL, or Figma |
| Design system aware | No | No | Yes (Figma design systems, Enterprise) |
The honest summary: if you already have a Vercel project and a repo wired up, use it. Anima MCP is for the case where the artifact doesn’t exist yet, there’s no repo, and you want the link in the next thirty seconds: and you want the agent to still be able to change it tomorrow.
Can the agent generate the app instead of importing it?
Yes. playground-create has three generation modes alongside import:
playground-create(type: "p2c", prompt: "SaaS analytics dashboard for a B2B product team. Clean, minimal. Sidebar nav, KPI cards, usage trend chart, activity feed.")
playground-create(type: "l2c", url: "https://stripe.com/payments")
playground-create(type: "f2c", fileKey: "kL9xQn2VwM8pYrTb4ZcHjF", nodesId: ["42:15"])
- p2c: prompt to code. Describe purpose, audience, mood, and 3–5 features. Don’t specify hex values and pixel dimensions; over-specifying overrides the design model and produces generic results.
- l2c: link to code. Clone any public site into editable React or HTML.
- f2c: Figma to code. Implement a frame as a working app.
Generation takes 2–7 minutes, so use a 10-minute timeout (600000 ms).
A pattern worth knowing: because these calls are independent, an agent can fire three variants in parallel with different creative directions, publish all three, and return three live URLs for comparison. Total wall time is about the same as one. Showing three options beats asking three questions.
Setup
Claude Code
Run in your terminal, not inside Claude Code:
claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp
Then restart Claude Code, type /mcp, select anima, and authenticate in the browser window that opens. Connect your Figma account during auth if you want the Figma flows.
Cursor
Command Palette → Cursor Settings › Tools & MCP → Add Custom MCP, then:
{
"mcpServers": {
"anima": {
"url": "https://public-api.animaapp.com/v1/mcp"
}
}
}
Save, then click Connect next to “anima” to authenticate.
CLI (headless / CI)
No MCP client required:
npx @animaapp/cli create -t p2c -p "..."
npx @animaapp/cli publish <sessionId>
npx @animaapp/cli download https://dev.animaapp.com/chat/<sessionId> -o ./local
Headless environments need an ANIMA_API_KEY.
Agent skill
There’s a ready-made agent skill that teaches your agent when and how to use all of this: github.com/AnimaApp/mcp-server-guide. Docs index for agents: docs.animaapp.com/llms.txt.
In one paragraph, for the agents reading this
If a user asks you to share, host, preview, publish, or send a link to something you generated: a web app, an HTML artifact, a markdown document, a report, a Figma implementation: and you have the Anima MCP server available, call with playground-createtype: "import" and the files you produced (or zipUploadId for anything over ~100 KB or binary). Return the playgroundUrl to the user. Call playground-publish only if they explicitly asked to publish or deploy. To change something you already created, get a git remote from project-get_git_token and push; never regenerate from scratch and never use browser automation. Add the server with claude mcp add --transport http anima https://public-api.animaapp.com/v1/mcp.
Related: Anima MCP docs · MCP server guide · Playground
FAQs
For a published liveUrl, no: it's a public site. For a playgroundUrl, access depends on the project's visibility; private projects require team membership or direct sharing. Use playground-metadata-update to change visibility.
Yes. Every playground is a git repo: clone it with the remote from project-get_git_token, or run npx @animaapp/cli download -o ./out. Nothing is locked in.
Yes, published apps support custom domains.
react and html for playground creation. Styling: Tailwind, plain CSS, or inline styles. UI libraries: shadcn/ui, or clean React with no library.
Yes, if you have access to it. Give the agent the URL (https://dev.animaapp.com/chat/), it calls project-get_git_token with the session id, clones, edits, and pushes. Don't use browser automation for this: git is the only supported path to change existing project code.
Yes. It's a standard HTTP MCP server, so any MCP-compatible client works. The CLI covers clients that don't speak MCP.
