FREE · NO CODE · WATCH IT GET BUILT

What do you want to build?

Describe a website in plain words. Watch it get built, step by step, with every line of code explained as it's written.

Pick a model

Try one:

A real plan firstIt writes a PRD, the document a product team writes before any code, and you can edit it.

Built in front of youStructure, styles, interactions, review. Each step explained as it happens, and you decide when to move on.

Every line explainedClick any part of the finished site to see and understand the code behind it.

The live Cocoon APIWire real data into your site: 2,000+ AI tools, the jobs board, daily AI news. Then meet MCP, the same plug an AI assistant uses to reach it.

STEP 2 · THE PLAN BEFORE THE CODE

Your PRD.

This is the document a product team would write before a single line of code. Everything below is editable, fix anything the AI got wrong. The build follows this, not your original message.

Audience

Goal

Tone

Palette & type

Notes for whoever writes the copy Sections, the skeleton of the page every field here is editable, and the build follows what you leave behind

CYour developer

Why this matters: every section below exists for a reason tied to your goal. When a section has no purpose, a professional deletes it. Try removing one and see how the build changes.

1Structure, the HTML

2Styles, the CSS

3Interactions, the JS

4Review & polish

Advanced

Adjust as you go

10 changes left this build

Inspect mode: click the site to see its code

Give your site living data, and see how an AI assistant reaches the same data.

// the code will appear here, line by line, as it's written

What's happening

Lines with a green number carry a note, click them.

your-site.html

The live preview appears here after the first phase.
It re-renders after every step, like a real dev server.

Connect the live Cocoon API

Your site is a finished page. Now give it living data, and see the two doors that data comes through.

This is Cocoon's own live API: the same AI tools directory, jobs board and news feed the site runs on, published for anyone to call. No key, no signup. Pick one, see what it actually returns, then wire it into a section of your site.

GET

Press “Send it” to see the real response.

Put it in this section

An API is a door for your page. MCP is a door for an AI assistant. Same data, different visitor. This is a real MCP server, the tools below are fetched from it live, right now.

It is private, so it needs a key. The tools below load because you are on this page. To add it to your own assistant, swap YOUR_KEY for the one Cocoon gives you.

Add it to Claude Code

claude mcp add --transport http cocoon "https://mycocoon.life/api/mcp?k=YOUR_KEY"

Or as JSON config

Tools this server exposes

Loading from the server…

Ask your assistant “what AI tools are good for transcription?” and it calls search_ai_tools for itself, no page, no browser, no copy-paste.

One set of data. Three layers. This is the shape of nearly every modern product.

Your pageHTML, CSS, JS, what a person sees

fetch() →

The API/api/cocoon/tools, JSON over HTTP

← JSON

The data2,531 tools · 307 jobs · daily news

An AI assistantClaude, in someone's terminal

MCP call →

The MCP server/api/mcp, tools an assistant can use

← same data

The same dataone source, two doors

The one idea worth keeping: the data doesn't live in your page. Your page asks for it. Once that's true, anything else can ask too, another site, a phone app, or an AI assistant. That's why APIs matter, and MCP is simply the version of that door built for assistants.

What do you want to build?

Your PRD.

Connect the live Cocoon API

Take your website with you