First, imagine hiring AI employees for your website

When building Agentic Web Apps, it helps to think of AI Agents as AI employees inside your website.

For example, imagine you are building a podcast tool.

A user might say:

Review this podcast episode, find the three best segments for short-form videos, and come up with titles for them too.

That request contains many tasks that traditional software is not especially good at handling:

• Understanding what the user actually wants
• Reading a large amount of content
• Judging which sections matter most
• Organizing information
• Writing titles and copy
• Deciding the next step based on the previous result

These are exactly the kinds of things an AI Agent is good at.

Depending on the Provider and Model you choose, an Agent may also support image understanding, audio understanding, or other multimodal capabilities.

But the most important thing about Pedelec is not simply letting AI “answer questions.”

After understanding the problem, the Agent can keep going, operate your application, and actually complete the work.

Clarify which parts require AI judgment

Before integrating Pedelec, do not start with APIs, SDKs, or software architecture.

Describe the workflow in normal human language first.

The user uploads a podcast.

AI reads the transcript.

AI finds segments worth turning into short videos.

AI explains why it recommends them.

After the user confirms, the app creates the matching Clips.

This can be separated into two kinds of work.

The AI Agent is responsible for:

• Understanding the transcript
• Judging which segments are worth using
• Explaining the recommendation
• Understanding the user's follow-up changes

Your website is responsible for:

• Reading the transcript
• Creating a Clip
• Updating a Clip
• Exporting video
• Saving data

This boundary is extremely important.

The Agent thinks and makes judgments; the website provides the real capabilities it can use.

Decide which website capabilities the Agent can use

An Agent does not automatically know how to operate your website.

You need to define the capabilities you want to give it as individual Tools.

For example, a Todo App might have:

get_todos
create_todo
update_todo
delete_todo

A podcast tool might have:

read_transcript
create_clip
update_clip
export_video

A 3D modeling tool might have:

read_scene
update_model
render_preview
export_glb

When the Agent decides an operation is needed, it calls the corresponding Tool.

Your website receives the Tool Call, executes the real application logic, and sends the result back to the Agent.

So during Vibe Coding, you do not need to start by asking:

How do I make AI click this button?

A better question is:

What product capabilities should I give the AI?

For example, avoid designing Tools like:

click_button
find_css_selector
execute_javascript

Prefer product-level capabilities such as:

create_clip
rename_layer
export_model

A Tool should describe what the user actually wants to accomplish, not a tiny interaction inside the website UI.

More about Tool Calling

Guidance is the AI employee's work manual

In addition to Tools, each Agent can have its own guidance.

Think of Guidance as:

The AI employee's work manual.

It tells the Agent:

• What its role is
• What goal it is working toward
• How the workflow should proceed
• When each Tool should be used
• Which decisions it must not make on its own
• When it needs to ask the user first

For example:

You are a podcast editing assistant.

After receiving the user's editing request:

1. Read the current podcast transcript first.
2. Find segments that are suitable for short-form videos.
3. Explain your recommendations and reasons to the user.
4. Do not create a Clip before the user confirms.
5. After confirmation, use create_clip to create the selected segments.

You do not necessarily need to write perfectly complete Guidance yourself.

If you can describe the workflow clearly, you can ask your Coding Agent to organize it into Guidance suitable for Pedelec.

Think of a Session as one contextual piece of work

In Pedelec, every working Agent exists inside a Session.

You can think of a Session as:

An AI work conversation that keeps its context.

For example:

User:
Find the three best segments to clip from this podcast.

Agent:
I recommend segments A, B, and C…

User:
Drop the second one and use the later section about AI instead.

If those messages happen in the same Session, the Agent knows that “the second one” refers to the second segment it recommended earlier.

As a rule, keep using the same Session whenever the Agent still needs to remember what happened earlier.

A completely different task, a different role, or a different workspace can use a new Session.

A website can also have many Sessions at the same time, letting different Agents handle different tasks.

More about Sessions

You probably do not need many kinds of Agents

For your first Pedelec app, you do not need to design a complex Multi-Agent system from the start.

Many products only need one kind of Agent.

Podcast Editing Agent

It can understand the podcast, recommend edits, and use the editing Tools.

Only split the work when the product truly develops distinct roles, for example:

Research Agent

Editing Agent

Publishing Agent

That is usually much easier to maintain than starting with many Agents.

If you are not sure how many to create, ask yourself:

Do these jobs require completely different workflows and Guidance?

If the answer is no, they can usually stay in the same kind of Agent.

Let users decide which Provider to use

Different users may use different AI Agent Providers.

Pedelec lets users work with Providers already prepared on their own computers, such as Codex, Claude Code, Cursor, Antigravity, OpenCode, or Ollama.

Your website does not need to store those Provider login credentials or API keys.

If your product does not care which Provider is used, it can simply use the default Provider configured in Pedelec Desktop.

If your product needs it, you can also provide a Provider selector in the website.

For example:

AI Provider

● Codex
○ Claude Code
○ Cursor

In that case, it is also a good idea to show which Provider is currently active in the main workspace.

A useful rule to remember is:

Your website decides what the AI should do; Pedelec Desktop manages the user's own AI Providers.

Check whether Pedelec is ready

Before starting AI work, your website should confirm that Pedelec is Ready.

“Pedelec is unavailable” can actually mean several different things:

Chrome Extension
       ↓
Pedelec Desktop
       ↓
Has this website been authorized by the user?
       ↓
Is an available Provider configured?

So it is not a good idea to reduce every error to:

Please install Pedelec

A better approach is to provide the right explanation for each state.

For example:

Chrome Extension is not installed

Guide the user to install the Pedelec Chrome Extension.

Pedelec Desktop is not installed

Guide the user to:

https://pedelec.cc/download

Desktop is installed but not running

Ask the user to open Pedelec Desktop and provide a retry button.

The website has not been authorized

Show:

Connect Pedelec

Then guide the user to authorize the current website in the Extension.

No Provider is available

Guide the user to Pedelec Desktop Settings to check Provider installation, login, or configuration.

Users do not need to understand which internal Pedelec layer failed.

Your website only needs to tell them clearly:

What is happening now, and what they should do next.

Show users what the Agent is doing

Agent work is not like a normal API call that always finishes instantly, so a Pedelec app should expose some basic execution state.

For example:

Pedelec Ready
Codex

Analyzing podcast…

Or:

Building model…

If the Agent is waiting, running a Tool, or encounters an error, it is best to provide clear visual feedback as well.

A basic Pedelec UI can usually consider showing:

• Whether Pedelec is Ready
• The current Provider
• Agent responses
• Work-in-progress state
• How errors are handled
• A way to stop the current task when needed

Not every Pedelec app needs a full chat interface.

If the Agent only performs a clearly defined task, you can simply show:

Building model…

[Stop]

Pedelec does not require you to turn every Agent into a chatbot.

Only then hand the implementation to your Coding Agent

Once you have thought through the points above, you have already completed most of the important product work.

You should now know:

• What the Agent should accomplish for the user
• Which parts require AI judgment
• Which Tools the website should provide
• The rough Guidance for the Agent
• How a piece of work should use a Session
• Whether users should choose a Provider
• How the UI should respond when Pedelec is not Ready

Only now do you need to start implementing.

Pedelec provides integration guidance specifically for Coding Agents, so you can directly ask your Coding Agent to build the integration for you.

For example, you could describe it like this:

I want to add Pedelec to this website.

This Agent's job is:
Analyze a podcast uploaded by the user and find segments suitable for short-form videos.

It needs to be able to:
- Read the transcript
- Create Clips
- Modify Clips
- Export video

The user must confirm before a Clip is created.

One podcast editing job should use the same Session.

I want the UI to show:
- Whether Pedelec is Ready
- The current Provider
- Agent work status
- The Agent's recommendations

The remaining SDK integration, Tool schema, Session lifecycle, error handling, and UI integration can then be handed to the Coding Agent.

Not sure where to start? Answer these five questions

If all you have right now is a product idea, you can ignore the technical details for the moment.

Start by answering:

1. What does the user want AI to help them accomplish?
2. Which parts of the process require AI understanding or judgment?
3. Which website capabilities does the Agent need to operate?
4. Which actions require user confirmation first?
5. What result should the user see when the Agent finishes?

If you can answer these five questions clearly, you usually already have enough information to let a Coding Agent start building your first Pedelec app.

You do not need to become an AI Engineer first, and you do not need to understand every Pedelec API.

Describe the AI employee's job clearly first, then let Vibe Coding build it for you.