» Cocoder is hosted on a European server and complies with the AI Act. But note that when you work with AI, you are also responsible yourself. So, for example, do not use privacy-sensitive information. That is also why we do not ask you to fill in your name.

» The product you make is a prototype with fictional data and a simulated AI.

» To generate the HTML-code, we use the European language model Mistral. You do not need an account for this. Mistral complies with the rules of the AI Act, but as a user you also have a responsibility. Read more about this at legal.mistral.ai/.

» The final products remain in the gallery for a maximum of one month and are then taken offline.

Democratic: How does AI make government more accessible and closer to residents?

Spatial: How does AI strengthen the quality of the built environment?

Economic: How does AI make implementation more efficient or stimulate new economic activity?

Social: How does AI contribute to wellbeing, liveability and social cohesion?

Autonomous: How do people retain control over AI systems in the city?

Click the link for Cocoder. We use this tool to vibe code.

Link: cocoder.starling.studio

Password: aiinthecity2026

» Choose one person in your group to create a group in Cocoder. This works best on a laptop, since it's easier to type and you have a bigger screen.

» Under Group name, enter your table number. You will now also see a group code.

» The other members can log in by scanning the QR code on their phone, or by going to cocoder.starling.studio and clicking Join an existing group. Choose your table there and enter the group code.

You can work in Cocoder with several people at the same time, but it works best if one person does this for the whole group.

Do it like this:

» Everyone first writes down their own problem.

» Look at the overlap and the differences.

» Together pick one challenge you can all get behind.

Describe the problem as concretely as you can (at least 100 words helps):

» What is going on?

» Who is involved?

» What is going wrong, and who suffers from it?

You can pick a concrete problem in one city, or a problem that plays out in several cities. The more input you give here, the more precise the solution becomes.

Enter your answer in Cocoder.

Democratic: How does AI make government more accessible and closer to residents?

Spatial: How does AI strengthen the quality of the built environment?

Economic: How does AI make implementation more efficient or stimulate new economic activity?

Social: How does AI contribute to wellbeing, liveability and social cohesion?

Autonomous: How do people retain control over AI systems in the city?

Enter your answer in Cocoder.

For each value you chose, describe how it ties into the challenge and how the solution strengthens it.

Enter your answer in Cocoder.

» What does the solution do?

» Who is the end user of the solution?

» What data does it use?

» Who still decides?

» What does it look like?

Enter your answer in Cocoder.

Choose in Cocoder from:

» Local, a neighbourhood or city

» National, an entire country

» International, across countries

Choose in Cocoder one or more from:

» Sliders that change the outcome

» Clickable map pins

» A before / after comparison

» A timeline to scrub through

» A chat-style question box

» Generative visuals that react to input

» A score or ranking

» Filters and toggles

Choose in Cocoder one or more from:

» An interactive map

» A simulation you can tweak

» A dashboard of indicators

» A scrolling story

» A decision-making game

» A tool that answers a question

Choose (via the drop-down menunin Cocoder) from:

» Serious, sober and businesslike, as a real public service would be

» Hopeful, show what it could make possible

» Critical, show where it goes wrong and who pays for it

» Speculative, a believable near future

» Matter-of-fact, just the mechanics, no opinion

» Playful, make a serious point with a wink

Come up with a name and a tagline for your solution

Once you have filled everything in, press the blue Make my AI solution button. In the mobile version, switch tabs to do this. You then go to the Preview tab.

» You are now in the Preview tab.

» In the left window, you see the generated HTML-code, and in the right window, a live preview of the result of your command.

» If you are viewing on a mobile phone, you will see this on two tabs.

» You can view the result in full screen.

» You can also see what the result looks like on a desktop, tablet, or mobile device.

To generate the HTML-code, we use the European language model Mistral.

» If you are not yet satisfied with the outcome, click the Change something button.

» You will now get a new field where you can describe what you do not like.

» Click on Generate new version. In the mobile version, switch tabs to do this.

» You will now return to the Preview tab and see the new Live Preview.

» You can make changes until you are satisfied (or the time runs out).

! Note: it is helpful if one person keeps an eye on the product while the other types the changes.

Once you are satisfied, press Looks good and you can publish your result by filling in the fields and clicking Publish to the gallery. There you will soon also be able to see what the other groups have made.

The gallery can also be visited directly via the AI in the City website.

Enjoy the result!

What we have made is a prototype with fictional data and a simulated AI. That raises a number of questions. If you finish on time, you can discuss with each other which data you would need to make the product work, how you would obtain that data, and why it matters. And you can ask yourself what the power is of being able to build a prototype this quickly. How does that change the conversation between client and contractor, and between municipalities and residents?

The Cocoder is a product of Starling. It was developed as part of 'AI in de Stad 2026' in collaboration with City Deal Over AI, City of Breda, Bredata and ELBA\REC.