The idea is simple: if an AI agent requests a page with Accept: text/markdown, return Markdown instead of HTML.

That matters because token cost drops a lot. In Cloudflare's example, the same page went from 16,180 tokens (HTML) to 3,150 tokens (Markdown), roughly an 80% reduction.

The catch: their solution is Cloudflare-specific. I wanted the same behavior for any Next.js app, regardless of infra, so I built next-agent-md.

This post is the architecture story behind it: what I built, why I chose this shape, and which tradeoffs I accepted.

GitHub: fayeed/next-agent-md

How it works

The core mechanism is HTTP content negotiation via the Accept header.

If a request includes Accept: text/markdown, middleware intercepts it and returns Markdown.

The first design choice was where to put this behavior. I chose middleware instead of route handlers because I wanted one integration point for the entire app. In practice, that keeps adoption dead simple: install package, add middleware once, and every page can serve markdown to agents.

Request flow

1. Agent sends GET /about with Accept: text/markdown
2. Middleware detects markdown intent
3. Middleware self-fetches the same URL with Accept: text/html
4. HTML boilerplate (nav/footer/scripts/etc.) is stripped
5. Clean HTML is converted to Markdown
6. Response returns as text/markdown with token metadata

I intentionally convert from already-rendered HTML instead of trying to reconstruct content from React internals. That decision keeps the package router-agnostic (App Router and Pages Router) and makes it resilient to how the app is authored. It also keeps the architecture honest: Next.js already knows how to render your page correctly, so next-agent-md should transform that output, not reimplement rendering logic.

Core middleware (simplified)

import { NextRequest, NextResponse } from "next/server"
import { NodeHtmlMarkdown } from "node-html-markdown"

const SKIP_HEADER = "x-markdown-skip"

function wantsMarkdown(req: NextRequest) {
  return req.headers.get("accept")?.includes("text/markdown")
}

async function fetchHtml(req: NextRequest) {
  const headers = new Headers(req.headers)
  headers.set("accept", "text/html")
  headers.set(SKIP_HEADER, "1")

  const res = await fetch(req.url, {
    method: "GET",
    headers,
  })

  return res.text()
}

export async function middleware(req: NextRequest) {
  if (req.headers.get(SKIP_HEADER) === "1") return NextResponse.next()
  if (!wantsMarkdown(req)) return NextResponse.next()

  const html = await fetchHtml(req)
  const stripped = stripBoilerplate(html)
  const markdown = NodeHtmlMarkdown.translate(stripped)

  return new NextResponse(markdown, {
    headers: {
      "content-type": "text/markdown; charset=utf-8",
      "x-markdown-tokens": String(estimateTokens(markdown)),
    },
  })
}

Loop prevention

Self-fetching the same URL can recurse forever unless you guard it.

I add an internal header (x-markdown-skip: 1) on internal fetches and short-circuit middleware when it exists:

if (request.headers.get("x-markdown-skip") === "1") {
  return NextResponse.next()
}

And in internal fetch:

headers.set("x-markdown-skip", "1")
headers.set("accept", "text/html")

This gives a safe two-pass flow:

• external request asks for markdown
• internal request asks for html with skip header

I preferred an explicit skip header over heuristic checks because it is deterministic and easy to debug in logs when middleware chains grow. This was a reliability decision more than an implementation detail. Middleware stacks evolve over time, and explicit control signals age better than implicit checks.

Middleware API

The package exports withMarkdownForAgents() so you can run standalone or wrap existing middleware.

// proxy.ts (Next.js 16+) or middleware.ts (Next.js <= 15)
import { withMarkdownForAgents } from "next-agent-md"

export default withMarkdownForAgents()

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
}

You can also compose with your own middleware:

import { withMarkdownForAgents } from "next-agent-md"
import { myAuthMiddleware } from "./lib/auth"

export default withMarkdownForAgents(myAuthMiddleware, {
  contentSignal: { aiTrain: true, search: true, aiInput: false },
})

The contentSignal option emits a Content-Signal header for AI policy hints. I exposed this as a wrapper API because most production apps already have auth, rewrites, or locale middleware. The goal was composition, not replacement.

Stripping boilerplate

Markdown is useful not just because it is shorter, but because it removes noise.

Agents do not need:

• nav bars
• footers
• sidebars
• scripts/styles

Because this runs on Edge, I avoided jsdom and used a lightweight regex strategy.

const DEFAULT_STRIP_TAGS = [
  "nav",
  "header",
  "footer",
  "aside",
  "script",
  "style",
  "noscript",
  "iframe",
  "svg",
]

I also strip landmark roles like navigation/banner and HTML comments.

I considered DOM-based parsing, but Edge constraints pushed me toward smaller, browser-compatible code. So I chose a pragmatic middle ground: regex + role-based stripping. It is less theoretically perfect than a full parser, but much better for runtime footprint and cold-start behavior.

Pre-building static pages

Self-fetch + convert is fine for dynamic pages, but wasteful for static pages.

So I added a build step:

npx next-agent-md build

This command is intentionally designed to run after next build. At that point Next.js has already materialized static HTML, so next-agent-md build can do pure transformation work with zero runtime ambiguity.

Under the hood, the command does three things:

1. reads .next/prerender-manifest.json to discover which routes are truly static
2. maps each route to its generated HTML file inside .next/server/...
3. converts those files to markdown and writes them to public/.well-known/markdown/

That output path matters because it is deployable static content, so your CDN can serve it directly without invoking any markdown conversion logic at request time.

After next build, it reads .next/prerender-manifest.json, finds static routes, converts their HTML once, and writes markdown to:

public/.well-known/markdown/
  index.md
  about.md
  blog/
    hello-world.md
    getting-started.md

Fast path at runtime

const prebuilt = await fetchPrebuiltMarkdown(request)
if (prebuilt) {
  return new Response(prebuilt, {
    headers: {
      "content-type": "text/markdown; charset=utf-8",
      "x-markdown-tokens": String(estimateTokens(prebuilt)),
      "x-markdown-source": "prebuilt",
    },
  })
}

const html = await fetchPageHtml(request, skipHeader)

This split (prebuilt for static, self-fetch for dynamic) keeps runtime overhead low where it can be low, without dropping coverage for dynamic routes. Architecturally, this became a two-lane system:

• build-time lane for static routes (cheap at runtime)
• request-time lane for dynamic routes (always correct)

That balance gave me good latency without sacrificing correctness.

It also made operations simpler: dynamic routes still work automatically, while static routes become precomputed artifacts you can inspect, diff, and debug in CI.

Wire it into build:

{
  "scripts": {
    "build": "next build && next-agent-md build"
  }
}

Token estimation

Each markdown response includes x-markdown-tokens so agents can budget context.

I used a practical approximation (~1 token per 4 chars) because tiktoken + WASM is not Edge-friendly in this setup.

export function estimateTokens(text: string): number {
  return Math.ceil(text.length / 4)
}

This was another deliberate tradeoff: I wanted predictable, low-cost metadata over exact token accounting. The estimate is close enough for context budgeting, and cheap enough to compute on every request.

CLI setup

Setup is intentionally minimal:

npm install next-agent-md
npx next-agent-md init

init will:

• detect Next.js version
• create proxy.ts for Next.js 16+ (middleware.ts for older versions)
• avoid overwriting existing middleware
• print test curl commands

I spent extra time on init because integration friction usually kills small infrastructure tools. If setup is not one command, most people will never try it.

Example output:

✔ Created proxy.ts

AI agents can now request Markdown from any page:
  curl -H "Accept: text/markdown" http://localhost:3000/

Test it now

You can test a live endpoint directly with curl:

curl -si -H "Accept: text/markdown" https://fayeed.dev

If you’re testing locally, or on your own domain:

curl -si -H "Accept: text/markdown" http://localhost:3000/

Look for:

• content-type: text/markdown
• x-markdown-tokens
• x-markdown-source (when prebuilt markdown is used)

Edge runtime constraints

At request-time (Edge Runtime), no Node APIs:

• no fs
• no child_process
• no Node-only libs

So runtime conversion code is Edge-safe, while build tooling (next-agent-md build) runs in Node and can use fs freely.

Separating Edge-time code from Node-time code became a core architectural boundary. Once I made that explicit in package exports, the implementation got much cleaner.

{
  "exports": {
    ".": { "import": "./dist/edge.js" },
    "./config": { "import": "./dist/node-config.js" }
  }
}

What’s next

A few improvements I still want:

1. Streaming conversion to reduce TTFB for large pages
2. Better caching controls (Cache-Control, CDN behavior)
3. More robust stripping via lightweight streaming HTML parsing

If you want to try it:

• GitHub: fayeed/next-agent-md
• npm install + init:

npm install next-agent-md
npx next-agent-md init

Thanks for reading. If you test this in production, I’d love feedback on edge cases.

As you can see this looks great, but then I started to wonder what if I can make a customizable Github banner with random Avatars, gradients & stuff.

After doing some research I found that I could build an API that will serve the SVG, but as I started to build the API I found that the tags supported by the SVG are a little difficult to work with. So I wondered wouldn't it be good if I could use an HTML tag.

So I went off to google to find a solution and quickly found a post on MDN about foreignObject which allows the use of HTML tags inside SVG, though it is a little limited in styling.

The SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.

So this is how it works, you just need to add a new tag foreignObject inside which you need to add XHTML namespace, your SVG file would look something like this:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="20" y="20" width="160" height="160">
    <style>
      div {
        color: red;
        bacgroundColor: green;
      }
    </style>
    <div xmlns="http://www.w3.org/1999/xhtml">
      Hello world
    </div>
  </foreignObject>
</svg>

And that's it. I won't talk about how I build the Github Banner, but just by using the method I was able to build something like this:

Check out the project below:

fayeed/github-banner

Build custom Github banners for your Github profiles, to add some flair to your Readmes.

Though the styling is limited at the moment for the banner because I just wanted to check the idea, I might add more styling options in the future for this, so stay tuned for more updates.

Sitemaps are very important for a website as they provide a guide or map for web crawlers like Google to easily find content & index them easier, anything you want the search engines to find must be included in the sitemap & anything not included is not indexed.

Creating a sitemap is easy but how would you do it if you have dynamic content like a blog post or maybe you have an e-commerce website.

Lucky for us, it's really simple I will go through the steps I went through while adding a sitemap to my site.

Fun fact: You don't need a sitemap if your website is properly linked, doesn't have any dynamic content & has less than 500 pages.

Also, sitemaps cannot include more than 50,000 URLs.

What is the purpsose of the sitemap?

The Sitemap provides very helpful information to the crawlers like URL or location for the page, last modified date, how frequently the data is updated & the priority for this page.

Here's the sitemap for my website to explain the structure in more detail:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://fayeed.dev</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/building-my-personal-website-using-nextjs-ssg</loc>
    <lastmod>2020-08-06</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/how-to-make-inline-links-in-flutter</loc>
    <lastmod>2019-08-11</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/blog/create-a-chat-app-in-minutes-in-flutter</loc>
    <lastmod>2019-08-05</lastmod>
  </url>
  <url>
    <loc>https://fayeed.dev/projects</loc>
    <lastmod>2020-07-29</lastmod>
  </url>
</urlset>

Sitemaps only use six different type of tags urlset, <url>, <loc>, <lastmod>, <changefreq> & <prority>.

urlset

This is the top most tag & provides reference to the sitemap protocol to the search engines. All the url tags lives inside this tag.

url

Parent tag for each url & all the remaining tags are children.

• <loc> - This specifies the location for the each page & must be start with a protocol like http or https.
• <lastmod> - This is a optional tag that specifies the last date this page was modified.
• <changefreq> - This is also a optional tag and its purpose it to show how frequently is this page content likely to change, think of reddit.
• <prority> - The priority of this url relative to others. Google acutally ignore this tag so need to use this.

How do I create a sitemap for my site?

Well creating a sitemap is as easy as creating a new XML file in your project public/static root folder called sitemap.xml and follow the xml structure mentioned above.

You do also need to create a robot.txt file in the same folder & add a link to your sitemap there, this will allow the crawlers to easily find the sitemap if it is somewhere else other than the root of the URL.

User-agent: *
Sitemap: https://example.com/sitemap.xml

How do I handle dynamic content?

If you have some form of dynamic content on your NextJs website like a blog, adding each URL to the sitemap can be kind of a pain. To easily resolve this we can create a helper function for this.

import fs from "fs";
import { PostData } from "../types/post_data";

export const generateSitemap = async (posts: PostData[]) => {
  const sitemap = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
      <loc>${BASE_URL}</loc>
  </url>
  <url>
    <loc>${BASE_URL}/blog</loc>
  </url>
  ${[...posts]
    .map((post) => `<url><loc>${post.canonicalUrl}</loc></url>`)
    .join("")}
  <url>
    <loc>${BASE_URL}/projects</loc>
  </url>
</urlset>`.replace(",", "");

  // writes sitemap.xml to public directory
  const path = `${process.cwd()}/public/sitemap.xml`;

  fs.writeFileSync(path, sitemap, "utf8");

  console.log(`generated sitemap`);

  return sitemap;
};

What this little helper function does it goes through, all the posts that we pass it, generates a sitemap string which we then write to our public folder using the fs module. In my case, I already had another helper function which gets all the markdown file & all the props in it I just passed it to this function.

And then in your getStaticProps method in your landing page you can just call this helper function & it will create the sitemap for you.

export const getStaticProps = async () => {
  // gets all the markdown files & returns the content in proper structure
  const posts = await loadBlogPosts();

  await generateSitemap(posts);
};

And don't forget to create Robot.txt file

User-agent: *
Sitemap: https://example.com/sitemap.xml

1. A blog to put my thoughts.
2. Dark mode support.
3. Faster load times.
4. A good SEO.

Before we get started, here's the complete TechStack that I used:

• Next.js
• React
• SCSS
• Typescript
• Devii Boilerplate - I changed a few things to make it fit my needs.

Faster load times & good SEO

Back in March Next.js released a new update v9.3, where they introduced a new feature SSG (Static Site Generation) which allowed Next.js users to generate Static sites from the Next.js projects, previously this was not possible if someone needs to build a Static site they had to rely on Gatsby for this or just use good old HTML & CSS, which most people would say is still the best for your personal website.

But I still went with the Next.js because of these things:

• I like how Next.jS structures the project.
• It's easy to build Blogs now that Next.js support SSG
• I love ReactJS.

Faster load times

Load times for the pages can be improved drastically just by serving static files over a CDN, and since Vercel also provides CDN, we can leverage that to get faster load times.

Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from the Vercel Smart CDN, which is blazingly fast.

Loading SVG as React components

To improve loading speed even more, I also converted SVG images to React Components using React SVGR which reduces network request as the SVG is now rendered as part of the HTML.

Loading fonts from same domain

I was initially loading fonts from Google fonts, which was taking about 0.4s to load the fonts from thier server because of the round trip, I easily resolved it just by moving the fonts to static folder & then loading the fonts from the same domain.

Good SEO

NextJs by default provides good SEO because the content is available when search engines request pages to crawl unlike in client-side render web apps which have poor SEO.

SEO can be further improved by using a package like NextSEO or just by manually handling it by using meta tags, but I would recommend NextSEO as it provides a better syntax & omits few redundant tags.

import React from "react";
import { NextSeo } from "next-seo";

export default () => (
  <>
    <NextSeo
      title="My awesome website"
      description="My awesome website description"
      canonical="https://example.com"
      openGraph={{
        url: "https://example.com",
        title: "Open Graph Title",
        description: "Open Graph Description",
        images: [
          {
            url: "https://www.example.ie/og-image-01.jpg",
            width: 800,
            height: 600,
            alt: "Og Image Alt",
          },
        ],
        site_name: "SiteName",
      }}
      twitter={{
        handle: "@fayeedP",
        site: "@fayeed.dev",
        cardType: "summary_large_image",
      }}
    />
  </>
);

A blog to put my thoughts.

I used to post on Medium, but I didn't like how once you post on Medium it becomes their IP, that's why I decided to make my own blog.

Since v9.3 Next.js introduced a new API getStaticProps & getServerSideProps, here's what they do:

getStaticProps (Static Generation): Fetch data at build-time.

getStaticPaths (Static Generation): Specify dynamic routes to prerender based on data.

getServerSideProps (Server-Side Rendering): Fetch data on each request.

By using getStaticProps we can get the blog post data at runtime & pass it as props to Component, which then later uses it to generate static pages.

Since I used devii most of this was set up by default, so didn't need to do much work here, but I will still give a brief rundown of how it works.

All the markdown files live under the md/blog folder from the root directory of the project, each markdown must have these fields, the below example is from Create a chat app in minutes in Flutter.

title: Create a chat app in minutes in Flutter
subtitle: Finally a better way to build your chat functionality
published: true
datePublished: 1564943400249
author: Fayeed Pawaskar
authorPhoto: /profile.jpg
bannerPhoto: https://cdn-images-1.medium.com/max/2700/1*pYJQe00OSztV3p5gFeG0Cw.jpeg
canonicalUrl: https://fayeed.dev/blog/create-a-chat-app-in-minutes-in-flutter
tags:

- Dash chat
- Flutter
- Dart
- Chat App

Then in getStaticProps function, we get content of the markdown files using gray-matter and then properly structure it before passing it to the component as props.

This makes a very easy to add more articles later as you just have to write markdown and push and Nextjs takes care of it.

Darkmode support

I initial used Styled Components as it comes with default Theming support, which was working pretty great initially but when I deployed to the Vercel and it generated Static site I started facing some problems with, styles were not copied to the articles pages, it was working as expected on other pages but for some reason not on blogs.

I tried fixing this issue using Styled Components's ServerStyleSheet Class, in _document.ts which collects all the styles from the parent App tag and pass it a style tag. This solved the problem but introduced a new one, whenever I go back to the index page from the blog post page it would completely break the styles.

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

Finally, I decided to move everything from Styled Components to SCSS which solved all the problems but I would have loved to use Styled Components.

To support light & dark mode I wrote a small react hook that saves current mode to localStorage and adds a new class to body tag light-mode or dark-mode depending on the current mode.

  export const darkMode(initialValue: boolean) {
    const [darkmode, setDarkmode] = useState(initialValue);

    const toggle = (value: boolean) => {
      document.body.classList.remove(!value ? "dark-mode": "light-mode");
      document.body.classList.add(value ? "dark-mode": "light-mode");
    }

    useEffect(() => {
      const value = localStorage.getItem("darkmode");

      if (value) {
        toggle(value);
      } else {
        document.body.classList.add(initialValue ? "dark-mode": "light-mode");
      }
    }, []);

    const toggleDarkmode = () => {
      localStorage.setItem("darkmode", !darkmode);

      setDarkmode(!darkmode);

      toggle(!darkmode);
    }

    return {darkmode, toggleDarkmode};
  }

And then based on the body tag class, I would then change the styles for the components.

body.light-mode {
  background-color: var(--light-body);
  color: var(--light-text);
}

body.dark-mode {
  background-color: var(--dark-body);
  color: var(--dark-text);
}

Thanks for reading, if you have any questions or suggestions get in touch with me on twitter.

fayeed/flutterparsedtext

A Flutter package to parse text and extract parts using predefined types like url, phone and email and also supports Regex.

So, In this tutorail, we are going to explore this widget and see how simple it is to create an Inline link in Flutter.

First, lets jus create a fresh flutter project using:

flutter create flutter_parsed_text_example

Now that we have a project let’s add the dependency to your pubspec.yaml .

url_launcher: ^5.0.3
flutter_parsed_text: ^1.2.0

We are almost ready to start, Let's add ParsedText to your starter code, you can add the text in text parameter that needs to be parsed. You can set alignment by setting alignment and also set a default style for the text which does not match the regex using style parameter.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'example_app',
      home: Scaffold(
      body: Container(
          child: ParsedText(
              alignment: TextAlign.start,
              text:
                  "[@michael:51515151] Hello this is an example of the ParsedText,
                    links like http://www.google.com or http://www.facebook.com are clickable
                    and phone number 444-555-6666 can call too. But you can also do more with this package,
                    for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117.
                    foo@gmail.com And the magic number is 42! #flutter #flutterdev",
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
        ),
      )
    );
  }
}

As you can see from the above example we have phone numbers, links, emails and also hashtags too. Since this library supports build-in types for email, links, and email there's no need to implement but we will have to implement custom regex for hashtag we will see that later, for now, let's start with build-in types.

ParsedText hasparse parameter which takes a List<MatchText> . This MatchText the class has 4 parameters type , style , onTap , pattern let's go over them one by one:

• type: Uses build-in types for “email”, “phone” and “url”.

• style: Styles for the parsed text.

• onTap: Fires a callback function when this MatchText is tapped on.

• pattern: Custom regex to match text too.

Let’s the code example of this three build in types:

ParsedText(
  alignment: TextAlign.start,
  text:
      "[@michael:51515151] Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. But you can also do more with this package, for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117. foo@gmail.com And the magic number is 42! #flutter #flutterdev",
  parse: <MatchText>[
    MatchText(
        type: "email",
        style: TextStyle(
          color: Colors.red,
          fontSize: 24,
        ),
        onTap: (url) {
          launch("mailto:" + url);
        }),
    MatchText(
        type: "url",
        style: TextStyle(
          color: Colors.blue,
          fontSize: 24,
        ),
        onTap: (url) async {
          var a = await canLaunch(url);

          if (a) {
            launch(url);
          }
        }),
    MatchText(
        type: "phone",
        style: TextStyle(
          color: Colors.purple,
          fontSize: 24,
        ),
        onTap: (url) {
          launch("tel:" + url);
        }),
  ],
)

Let's also try to make hashtags clickable here’s how you do it. Just by overriding the pattern parameter, we can have a clickable hashtag like so:

ParsedText(
  alignment: TextAlign.start,
  text:
      "[@michael:51515151] Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. But you can also do more with this package, for example Bob will change style and David too.\nAlso a US number example +1-(800)-831-1117. foo@gmail.com And the magic number is 42! #flutter #flutterdev",
  parse: <MatchText>[
    /*other match_text objects*/,
    MatchText(
      pattern: r"\B#+([\w]+)\b",
      style: TextStyle(
        color: Colors.pink,
        fontSize: 24,
      ),
      onTap: (url) async {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Hashtag clicked"),
              content: new Text("$url clicked."),
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                new FlatButton(
                  child: new Text("Close"),
                  onPressed: () {},
                ),
              ],
            );
          },
        );
      })
  ],
)

Here’s the final output:

If you want a to take a look at the working example you take a look the example folder in the packages Github repository.

fayeed/flutterparsedtext

A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started if this is your first Flutter project.

Thanks for reading.

fayeed/dash_chat

The most complete Chat UI for flutter Inspired by react-native-gifted-chat. Highly customizable and helps developing chat UI faster.

As there are lots of chat tutorial available so I will keep this tutorial short and simple. We will just try to implement Firebase and Dash together. If you are ready to get your timer out because we will build this app in 15 minutes.

1, 2, 3… here we go

The first thing that we need do is create a Flutter Project you can use VsCode plugin for this or Flutter CLI and also setup Firebase. To set up firebase you can follow the guide below:

How to use Firebase with Flutter

Ok, great now that you have set up firebase we will add all the dependencies that we need for this tutorial in pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth:
  cloud_firestore:
  firebase_storage:
  image_picker:
  shared_preferences:
  uuid:
  dash_chat: 1.0.4

In your main.dart the file you will have this as a starting point:

Laying the Auth screen

We begin by creating the MyHomePage widget which we will use to get the username and also to authenticate the user on firebase anonymously.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  TextEditingController _editingController = TextEditingController();
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dash Chat"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                controller: _editingController,
                decoration: InputDecoration(hintText: "Enter Name here..."),
                validator: (val) {
                  if (val.length < 3) {
                    return "Name to short";
                  }
                  return null;
                },
              ),
              SizedBox(
                height: 40.0,
              ),
              FlatButton(
                child: Text("Next"),
                onPressed: () async {
                  // Check to see if username was correct if not dont authenticate
                  if (_formKey.currentState.validate()) {
                    try {
                      // Authenticate the user
                      await FirebaseAuth.instance.signInAnonymously();

                      // If authentication was sucessful move to chat screen.
                      // with username and uuid
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => ChatScreen(
                            username: _editingController.text,
                            uuid: Uuid().v4().toString(),
                          ),
                        ),
                      );
                    } catch (e) {
                      print(e);
                    }
                  }
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

Laying the Chat screen

Now that we have authenticated the user and we can start with the actual thing that you are here for, first lets set up the ChatScreen.dart

class ChatScreen extends StatefulWidget {
  final String username;
  final String uuid;

  ChatScreen({this.username, this.uuid});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  ChatUser user = ChatUser();

  @override
  void initState() {
    user.name = widget.username;
    user.uid = widget.uuid;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dash Chat"),
      ),
      body: Container(),
    );
  }
}

Let’s remove the Container and replace with StreamBuilder so that we can listen to Firestore for changes. In your builder method, we are checking to see if we the stream has any data if not we show a CircularProgressIndicatorand or else show the chat app.

StreamBuilder(
          stream: Firestore.instance.collection('messages').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(
                      Theme.of(context).primaryColor),
                ),
              );
            } else {
              return DashChat(
                user: user,
              );
            }
          },
),

We will now start using implementing different features in the dash_chatwidget. This widget has 52 properties that you can override to customize it however you want for this tutorial we will implement only a few of those properties but you can check the GitHub page for detail.

List<DocumentSnapshot> items = snapshot.data.documents;
var messages =
    items.map((i) => ChatMessage.fromJson(i.data)).toList();

return DashChat(
         user: user,
         messages: messages,
       );

we will only override these properties in this tutorial:

1. user (Require)

2. messages (Require)

3. inputDecoration

4. onSend

5. trailing

We have already passed the user object to the DashChat widget now we need to pass a List<ChatMessage> to the DashChat for that, we will first need to convert the retrieved data from Firebase to ChatMessage we can do that above the widget using the ChatMessage.fromJson constructor.

After this, you will have a working chat app but we still have few things missing you cannot add message let do that now, to that you need to add a parameter called onSend which as a parameter gets the ChatMessage object back which we can then send to Firebase, make a note that we are running a transaction because since this is a 1-to-many chat so we might run it a lot of problems:

onSend: (message) {
  var documentReference = Firestore.instance
      .collection('messages')
      .document(
          DateTime.now().millisecondsSinceEpoch.toString());

  Firestore.instance.runTransaction((transaction) async {
    await transaction.set(
      documentReference,
      message.toJson(),
    );
  });
},

Now that we can successfully send messages we will move to upload images to Firebase Storage for this we will need to add a button in the input bar so that we can open gallery for this we can use to parameters first leading which will add widgets before the input and trailling which will add widgets after for this tutorial we will use trailling.

trailing: <Widget>[
  IconButton(
    icon: Icon(Icons.photo),
    onPressed: uploadFile,
  )
],

Now that we have the icon we can use to call uploadFile method which will upload the file to Firebase to get the file from the gallery we will use image_picker package if you want to get the image from camera you change the source to ImageSource.camera.

void uploadFile() async {
  File result = await ImagePicker.pickImage(
    source: ImageSource.gallery,
    imageQuality: 80,
    maxHeight: 400,
    maxWidth: 400,
  );

  if (result != null) {
    String id = Uuid().v4().toString();

    final StorageReference storageRef =
        FirebaseStorage.instance.ref().child("chat_images/$id.jpg");

    StorageUploadTask uploadTask = storageRef.putFile(
      result,
      StorageMetadata(
        contentType: 'image/jpg',
      ),
    );
    StorageTaskSnapshot download = await uploadTask.onComplete;

    String url = await download.ref.getDownloadURL();

    ChatMessage message = ChatMessage(text: "", user: user, image: url);

    var documentReference = Firestore.instance
        .collection('messages')
        .document(DateTime.now().millisecondsSinceEpoch.toString());

    Firestore.instance.runTransaction((transaction) async {
      await transaction.set(
        documentReference,
        message.toJson(),
      );
    });
  }
}

Yay!!! Now you have a fully functional chat app which you can customize completely, we haven’t fully explored all the parameters in this tutorial but if like for me cover let me know in the comments in the meantime you can take a look at the docs in the link mentioned above.

Here’s the link to the Github repository:

fayeed/dashchatexample

A new Flutter project. This project is a starting point for a Flutter application.

Thank you for reading.